/* ============================================================
   SHARIFI'S STUDIO — DESIGN TOKENS
   Every value below traces to the approved token brief.
   No colour or type value may be authored outside this file.
   ============================================================ */

:root {
  /* ---------- COLOR — 5 named values ----------
     --field is the LOCKED brand colour #E1DED9, repositioned
     from incidental 13-use tint to the full page ground.     */
  --field:        #E1DED9;  /* LOCKED. Unbleached calico — the page itself   */
  --field-raised: #EFEDE9;  /* Cards, mats, header. Elevation by lightness   */
  --ink:          #241F1C;  /* Warm near-black. Replaces #000000             */
  --thread:       #7A2E3C;  /* Madder marking thread. Sole accent → booking  */
  --brass:        #A6803F;  /* Pin/tape hardware. RULES AND HAIRLINES ONLY.  */

  /* Brass darkened for type. The named --brass reads 2.71:1 on --field,
     which is below AA for any text size. Decorative 1px rules are exempt
     (non-text contrast does not apply to pure decoration), so --brass is
     kept as-is for those and this value carries every brass NUMERAL and
     LABEL. 4.25:1 on --field, 4.88:1 on --field-raised. Same hue family. */
  --brass-text:   #7F6228;

  /* On-thread text + pressed state. Derived from the five named
     values; declared here so no hex is authored outside :root. */
  --on-thread:     #FBF7F4;   /* text on --thread; 8.9:1 */
  --thread-press:  #6A2734;   /* --thread darkened for :hover */

  /* Derived alphas — same five hues, no new colours introduced */
  --ink-70:   rgba(36, 31, 28, .70);
  /* Was .45 — measured 2.62:1 on --field, a clear AA failure on captions,
     review meta, breadcrumbs and the footer. Raised to .68 (4.94:1 on
     --field, 5.24:1 on --field-raised). The name is kept so no call site
     has to change; the tier still reads as the quietest text on the page,
     it is now merely legible. Matters here: the studio's clients skew
     older, and this tier carries the 13px type. */
  --ink-45:   rgba(36, 31, 28, .68);
  --ink-12:   rgba(36, 31, 28, .12);
  --ink-08:   rgba(36, 31, 28, .08);
  --thread-30: rgba(122, 46, 60, .30);

  /* ---------- TYPE ---------- */
  --font-display: "Fraunces", "Fraunces Fallback", Georgia, serif;
  --font-body:    "Source Serif 4", "Source Serif Fallback", Georgia, serif;
  --font-utility: "Inter", "Inter Fallback", system-ui, -apple-system, sans-serif;

  /* Scale — 1.25 ratio, 8 steps. Replaces 18 arbitrary sizes. */
  --t-13: 0.8125rem;  /* 13px utility small   */
  --t-14: 0.875rem;   /* 14px utility         */
  --t-17: 1.0625rem;  /* 17px BODY MINIMUM    */
  --t-21: 1.3125rem;  /* 21px lead            */
  --t-26: 1.625rem;   /* 26px h3              */
  --t-33: 2.0625rem;  /* 33px h2              */
  --t-41: 2.5625rem;  /* 41px h2 large        */
  --t-51: 3.1875rem;  /* 51px display         */

  --lh-tight: 1.15;
  --lh-body:  1.65;
  --measure:  68ch;

  /* ---------- SPACING — 4px base, 8 steps ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  40px;
  --s-7:  64px;
  --s-8:  96px;

  /* Section padding — explicit per brief */
  --section-block:  var(--s-8);  /* 96px desktop */
  --section-inline: var(--s-6);  /* 40px desktop */

  /* ---------- LAYOUT ---------- */
  --container: 1200px;
  --gutter:    var(--s-5);   /* 24px */
  --radius:    8px;
  --radius-pill: 999px;

  /* ---------- ELEVATION ----------
     Kills the 8px 8px 8px hard-offset shadow.
     X = 0, alpha-based, two layers.                          */
  --shadow-1: 0 1px 2px rgba(36,31,28,.06), 0 4px 12px rgba(36,31,28,.08);
  --shadow-2: 0 2px 4px rgba(36,31,28,.06), 0 12px 28px rgba(36,31,28,.10);

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(.2, .6, .3, 1);
  --dur:  240ms;

  /* Reveal choreography. Fires once at 82% of viewport height. */
  --reveal-dur:  760ms;
  --reveal-ease: cubic-bezier(.22, .8, .28, 1);
  --reveal-stagger: 90ms;

  /* Focus ring — designed, not browser default */
  --focus-ring: 0 0 0 2px var(--field), 0 0 0 4px var(--thread);
}

/* Metric-matched fallback so the swap to Fraunces does not shift layout.
   Tuned against Georgia, the first fallback in --font-display. */
@font-face {
  font-family: "Fraunces Fallback";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 103%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Source Serif Fallback";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 101%;
  ascent-override: 96%;
  descent-override: 30%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("Segoe UI"), local("Arial");
  size-adjust: 100%;
  ascent-override: 95%;
  descent-override: 24%;
  line-gap-override: 0%;
}

@media (max-width: 767px) {
  :root {
    --section-block:  var(--s-7);  /* 64px mobile */
    --section-inline: 20px;        /* 20px mobile */
    --gutter:         var(--s-4);  /* 16px        */
  }
}