/* ==========================================================================
   Astelia — Design Tokens
   Declarations only. No rules live in this file.

   Every page and site.css reference these; nothing else hard-codes a color
   or a font. See docs/BRIEF.md §4.
   ========================================================================== */

:root {
  /* ----- Color — locked. These are the live Astelia values. ----- */
  --paper:         #FBF8F2;   /* page ground */
  --ivory:         #F8F4ED;   /* recessed panels, form fields */
  --linen:         #E8DFCE;   /* the one filled surface, used sparingly */
  --stone:         #7F7866;   /* utility text: labels, nav, metadata */
  --moss:          #4A5D3F;   /* emphasis, links on hover, italic accents */
  /* Hairlines, small accents, and the mark. NEVER a filled button and never
     a large surface — see BRIEF.md §4. */
  --brass:         #B08D57;
  --ink:           #2A2A28;   /* headings, body */
  --ink-soft:      rgba(42,42,40,.86);        /* paragraph copy */
  --hairline:      rgba(127,120,102,.28);     /* the standard divider */
  --hairline-soft: rgba(127,120,102,.16);     /* secondary divider */

  /* ----- Type -----
     Four layers, matching the layering used on the first commission's site so
     the studio and its work read as one hand. Each role has ONE job; no rule
     anywhere should reach past this list.

       display  long headlines, in sentence case. The editorial voice.
       named    short named things — an engagement, a ledger item. Small caps.
       body     every paragraph. A plainer serif than the headings, on purpose:
                headings and body never share a face, which is what gives the
                page its layers rather than one continuous wash of Cormorant.
       utility  labels, nav, buttons, fields, metadata. Small, tracked, upper.

     Georgia is deliberate, not a fallback — it is a system face, so body copy
     renders instantly and never flashes, and it is the same body face the
     first commission's site uses. Its x-height is much larger than Cormorant's,
     which is why body sits at 17px here and not 18px. */
  --font-display:  'Cormorant Garamond', Georgia, 'Iowan Old Style', serif;
  --font-named:    'Cormorant SC', 'Cormorant Garamond', Georgia, serif;
  --font-body:     Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --font-utility:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --tracking-label: 2.5px;
  /* Small caps read optically larger and need air between letters. */
  --tracking-named: .045em;

  /* ----- Structure ----- */
  --measure:  62ch;    /* comfortable reading width */
  --page-max: 68rem;
  --rule: 1px solid var(--hairline);

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 2rem;
  --space-4: 3.5rem;
  --space-5: 6rem;
  --space-6: 8.5rem;
}

/* Dark theme. ONLY tokens are redefined — no rule in this file, and no rule
   in site.css, is written twice for a theme. Guarded against an explicit
   light choice so a future toggle wins in both directions.

   These are not inversions: the dark ground is a warm near-black that keeps
   the paper feeling, and moss and brass are lifted so they stay legible
   against it rather than going muddy. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:         #1C1A16;
    --ivory:         #242019;
    --linen:         #3A3327;
    --stone:         #A79C87;
    --moss:          #8CB077;
    --brass:         #D8B372;
    --ink:           #F3EFE6;
    --ink-soft:      rgba(243,239,230,.86);
    --hairline:      rgba(215,201,171,.22);
    --hairline-soft: rgba(215,201,171,.12);
  }
}

:root[data-theme="dark"] {
  --paper:         #1C1A16;
  --ivory:         #242019;
  --linen:         #3A3327;
  --stone:         #A79C87;
  --moss:          #8CB077;
  --brass:         #D8B372;
  --ink:           #F3EFE6;
  --ink-soft:      rgba(243,239,230,.86);
  --hairline:      rgba(215,201,171,.22);
  --hairline-soft: rgba(215,201,171,.12);
}