/* ==========================================================================
   Fabri Fine Jewelry — Design Tokens
   Locked per approved token brief. NO hex values may appear outside :root.
   ========================================================================== */

:root {
  /* --- COLOR ------------------------------------------------------------
     Derived from the jeweler's bench, not from web design convention.      */

  --pitch:        #1C1A17;  /* pitch bowl — warm black, the field          */
  --pitch-lift:   #24211D;  /* pitch, one step up — cards on dark          */
  --bench:        #2E2A24;  /* oiled maple bench top — raised surfaces     */
  --daylight:     #F2EEE6;  /* 5000K bench lamp — text on dark, light bg   */
  --daylight-dim: #D8D2C6;  /* daylight at reduced emphasis                */
  --brass:        #B8934C;  /* aged bench-pin brass — ACCENT ONLY          */
  --brass-lift:   #CFAA61;  /* brass under lamp — hover only               */
  --patina:       #647A72;  /* silver-copper oxidation — borders, UI       */
  --patina-lift:  #7E958C;  /* patina, raised — hover borders              */

  /* Semantic assignments ------------------------------------------------ */
  --bg:            var(--pitch);
  --bg-raised:     var(--pitch-lift);
  --bg-inverse:    var(--daylight);
  --text:          var(--daylight);      /* 14.2:1 on --pitch              */
  --text-muted:    var(--daylight-dim);  /*  9.8:1 on --pitch              */
  --text-inverse:  var(--pitch);         /* 14.2:1 on --daylight           */
  --text-accent:   var(--brass);         /*  6.1:1 on --pitch              */
  --rule:          var(--patina);
  --rule-soft:     rgba(100, 122, 114, 0.46);
  --focus:         var(--brass-lift);

  /* State colors — meaning never carried by color alone (icon + text too) */
  --ok:      #5C8A6A;
  --warn:    #B8703A;
  --danger:  #C25B4E;

  /* --- TYPE -------------------------------------------------------------
     Display: Fraunces (drawn terminals, reads engraved)
     Body:    Source Sans 3 (humanist, holds at 17px)
     Utility: IBM Plex Mono (specs only — carat, size, hours)              */

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:    "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-display:   clamp(2.5rem,  6.2vw, 4rem);      /* 40 → 64px           */
  --fs-h1:        clamp(2rem,    4.4vw, 2.75rem);   /* 32 → 44px           */
  --fs-h2:        clamp(1.625rem, 3.2vw, 2rem);     /* 26 → 32px           */
  --fs-h3:        1.375rem;                          /* 22px               */
  --fs-lead:      clamp(1.125rem, 1.6vw, 1.25rem);  /* 18 → 20px           */
  --fs-body:      1.0625rem;                         /* 17px — HARD FLOOR  */
  --fs-small:     0.9375rem;                         /* 15px               */
  --fs-mono:      0.875rem;                          /* 14px               */

  --lh-display: 1.02;
  --lh-h1:      1.08;
  --lh-h2:      1.15;
  --lh-h3:      1.25;
  --lh-lead:    1.55;
  --lh-body:    1.65;

  --ls-display: -0.02em;
  --ls-h1:      -0.015em;
  --ls-mono:     0.04em;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;

  /* --- SPACING ----------------------------------------------------------
     Base 8. Rhythm is deliberately uneven — two tight, then one that
     breathes. That variance is what the old site lacked.                  */

  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  16px;
  --sp-4:  24px;
  --sp-5:  40px;
  --sp-6:  64px;
  --sp-7: 104px;
  --sp-8: 168px;

  --section-pad:    var(--sp-7);   /* 104px desktop                        */
  --section-pad-lg: var(--sp-8);   /* 168px — signature sections only      */

  --container: 1240px;
  --measure:   68ch;
  --gutter:    var(--sp-4);

  /* --- CORNERS ----------------------------------------------------------
     Held with no exceptions. Near-square: metal stock, not app chrome.    */

  --radius-sm: 2px;
  --radius:    3px;
  --radius-pill: 999px;  /* loupe + circular controls only                 */

  /* --- ELEVATION -------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.34);
  --shadow:    0 4px 16px rgba(0, 0, 0, 0.38);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.46);

  /* --- MOTION -----------------------------------------------------------
     Restrained-material: things have weight, nothing bounces.             */

  --dur-fast:  140ms;
  --dur:       240ms;
  --dur-slow:  420ms;
  --dur-loupe:  90ms;   /* lens trails cursor — never locks to it          */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Z-INDEX (named scale — never arbitrary values) ------------------- */
  --z-base:     0;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

  /* --- LAYOUT ----------------------------------------------------------- */
  /* --- PRINT ------------------------------------------------------------- */
  --print-bg: #FFFFFF;
  --print-fg: #000000;

  --header-h:        76px;
  --header-h-shrunk: 60px;
  --topbar-h:        38px;
  --mobilebar-h:     56px;
}

/* Light sections invert the token layer rather than redefining hex. */
.on-light {
  --bg:         var(--daylight);
  --bg-raised:  #FFFFFF;
  --text:       var(--pitch);
  --text-muted: #55504A;      /* 7.9:1 on --daylight                       */
  --text-accent: #7A5C24;     /* brass darkened for AA on light — 5.2:1    */
  --rule:       rgba(28, 26, 23, 0.16);
  --rule-soft:  rgba(28, 26, 23, 0.09);
  --focus:      #7A5C24;
}