/* PURIVA — production stylesheet (fonts + tokens) */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..600;1,9..144,300..500&family=Outfit:wght@300;400;500;600&family=Newsreader:ital@0;1&display=swap');

/* ─────────────────────────────────────────────────────────
   PURIVA · COLOR TOKENS
   Warm editorial palette from the Master Plan. Ink + paper
   grounds; clay is the single saturated accent; sage & gold
   are quiet supports.
   ───────────────────────────────────────────────────────── */
:root {
  /* ── Ink (near-black warm charcoal) ── */
  --sumi:        #1C1815;   /* primary ink, dark surfaces */
  --sumi-soft:   #2C2620;   /* raised dark surface */

  /* ── Paper (warm off-whites) ── */
  --bone:        #F2EEE4;   /* default page background */
  --bone-deep:   #E7E1D3;   /* sunken / zebra surface */
  --cream:       #FBF9F3;   /* card / raised surface */

  /* ── Clay (the accent) ── */
  --clay:        #C04A2B;   /* primary accent, links, active */
  --clay-deep:   #9E3A20;   /* accent pressed / emphasis text */

  /* ── Quiet supports ── */
  --sage:        #7E8576;   /* muted labels, captions */
  --gold:        #B08A4F;   /* premium tier accent, on dark */
  --line:        #DAD3C4;   /* hairline borders / dividers */

  /* ── Text ramp (on paper) ── */
  --text-strong: #1C1815;   /* headings */
  --text-body:   #4A4035;   /* body copy */
  --text-lead:   #3B342C;   /* lead paragraph */
  --text-muted:  #5A5247;   /* secondary copy */
  --text-faint:  #6A6056;   /* tertiary / footnotes */

  /* ── Text on dark surfaces ── */
  --on-dark:        #F2EEE4;
  --on-dark-muted:  rgba(242,238,228,.58);
  --on-dark-faint:  rgba(242,238,228,.22);

  /* ── Semantic aliases ── */
  --surface-page:   var(--bone);
  --surface-sunken: var(--bone-deep);
  --surface-card:   var(--cream);
  --surface-dark:   var(--sumi);
  --border-hair:    var(--line);
  --accent:         var(--clay);
  --accent-press:   var(--clay-deep);

  /* Accent tints (color-mix over paper) */
  --accent-tint-4:  color-mix(in srgb, var(--clay) 4%, transparent);
  --accent-tint-7:  color-mix(in srgb, var(--clay) 7%, transparent);
  --accent-tint-15: color-mix(in srgb, var(--clay) 15%, transparent);
}


/* ─────────────────────────────────────────────────────────
   PURIVA · TYPOGRAPHY TOKENS
   Three families: Fraunces (display serif), Outfit (body sans),
   Newsreader (editorial italic serif for leads & asides).
   ───────────────────────────────────────────────────────── */
:root {
  /* ── Families ── */
  --font-display: 'Fraunces', Georgia, serif;      /* headings, numbers, wordmark */
  --font-body:    'Outfit', system-ui, sans-serif; /* UI, body, labels */
  --font-editorial: 'Newsreader', Georgia, serif;  /* leads, italic asides, captions */
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── Display scale (Fraunces) ── */
  --type-hero:    clamp(56px, 8vw, 104px); /* cover H1 */
  --type-h1:      clamp(40px, 6vw, 68px);
  --type-h2:      clamp(28px, 4vw, 50px);
  --type-h3:      20px;
  --type-stat:    clamp(22px, 3vw, 36px);  /* stat card value */

  /* ── Body scale (Outfit) ── */
  --type-body:    14.5px;
  --type-small:   12.5px;
  --type-caption: 11.5px;

  /* ── Editorial (Newsreader) ── */
  --type-lead:    18.5px;

  /* ── Label / eyebrow ── */
  --type-eyebrow: 10.5px;
  --type-microlabel: 9.5px;

  /* ── Weights ── */
  --weight-light:  300;
  --weight-regular:400;
  --weight-medium: 500;
  --weight-semibold:600;
  /* Fraunces optical weights used across the system */
  --weight-display-light: 300;  /* hero */
  --weight-display:       340;  /* h2 */
  --weight-display-mid:   380;  /* h3 */
  --weight-display-bold:  440;

  /* ── Line heights ── */
  --leading-tight:  1.02;   /* display headings */
  --leading-snug:   1.15;   /* h3 */
  --leading-normal: 1.6;    /* body */
  --leading-lead:   1.65;   /* leads */
  --leading-relaxed:1.75;   /* long paragraphs */

  /* ── Letter spacing ── */
  --tracking-hero:    -.025em;
  --tracking-heading: -.015em;
  --tracking-wordmark:.07em;
  --tracking-eyebrow: .4em;   /* uppercase eyebrows */
  --tracking-label:   .28em;  /* uppercase micro labels */
  --tracking-nav:     .16em;
}


/* ─────────────────────────────────────────────────────────
   PURIVA · SPACING, RADIUS, SHADOW, LAYOUT TOKENS
   Restrained system: tight 4px radii, hairline borders, and
   almost no shadow — depth comes from surface color, not lift.
   ───────────────────────────────────────────────────────── */
:root {
  /* ── Spacing scale (4px base) ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  26px;
  --space-7:  36px;
  --space-8:  44px;
  --space-9:  60px;
  --space-10: 88px;   /* section vertical padding */

  /* ── Radius (deliberately small) ── */
  --radius-xs: 2px;   /* tags, code, checkboxes */
  --radius-sm: 3px;
  --radius-md: 4px;   /* the default: cards, tables, panels */
  --radius-pill: 100px;

  /* ── Borders ── */
  --border-width: 1px;
  --border-accent-width: 3px;  /* left-accent on notices */

  /* ── Shadow (used very sparingly — only floating chrome) ── */
  --shadow-float: 0 4px 16px rgba(28,24,21,.3);

  /* ── Layout ── */
  --measure:   860px;   /* text column max-width */
  --measure-wide: 1080px;
  --nav-w:     264px;
  --content-pad: 60px;
}