/* ==========================================================================
   tokens.css — Dajer & Co
   The only file in this project containing literal values.
   Everything downstream references var(--…). See DESIGN.md.
   ========================================================================== */

:root {
  /* --- Colour ------------------------------------------------------------
     Near-monochrome, warm-biased. Contrast ratios verified — DESIGN.md §2. */

  --bg:                  #FBFAF8;   /* warm off-white page ground          */
  --surface:             #FFFFFF;   /* raised card                          */
  --surface-sunken:      #F1EEEA;   /* recessed band, table header          */
  --ink:                 #141311;   /* inverted-section ground              */

  --text:                #141311;   /* 17.80:1 on --bg                      */
  --text-secondary:      #3D3A35;   /* 10.85:1 on --bg                      */
  --text-muted:          #615C55;   /*  6.35:1 on --bg                      */
  --text-on-ink:         #F1EEEA;   /* 16.06:1 on --ink                     */
  --text-muted-on-ink:   #A9A39A;   /*  7.42:1 on --ink                     */

  --border:              #DCD7D0;   /* decorative hairline only             */
  --rule:                #C9C3BA;   /* visible divider                      */
  --border-strong:       #141311;   /* meaningful edge — 17.80:1 on --bg    */

  /* Dark chocolate. Deepened and cooled slightly from an earlier #6B4423 at
     Carla's direction — lightness 27.8% → 22.4%, and the blue:red ratio from
     0.33 to 0.46, which drops the orange cast without leaving the brown
     family. It also nods at the Dajer Studio guidebook's espresso (#3F2619)
     without adopting that brand's system. DESIGN.md §9 #2.                  */
  --accent:              #4E3624;   /* fills, marks AND link text — 10.72:1 */
  --accent-ink:          #2E2015;   /* the darker hover/pressed state        */
  /* A warm sand tint, not a near-white. It has to stay perceptible against
     BOTH --surface (1.25) and --surface-sunken (1.08), because the pricing
     table sits on the sunken band. A fainter wash vanished there entirely.  */
  --accent-wash:         #EDE5D9;   /* accent tint — 8.96:1 for accent text  */
  --on-accent:           #FFFFFF;   /* label on an accent ground — 11.19:1   */

  /* NOTE on the two roles: at this darkness --accent is already well past
     4.5:1, so it carries link text as well as fills — that keeps links
     visibly BROWN (1.66:1 apart from body text) instead of near-black.
     --accent-ink exists purely as the darker hover state; the 1.41:1 step
     between them is what makes a button hover perceptible. Making --accent
     any darker collapses that step.                                         */

  /* Chocolate is invisible on the ink ground: #4E3624 on #141311 is 1.55:1.
     The inverted sections therefore use a lightened tan of the same hue,
     cooled to match — 7.70:1. Measured, not guessed.                        */
  --accent-on-ink:       #C4A085;   /* tan — 7.70:1 on --ink                */
  --border-on-ink:       #3A3733;   /* the only hairline that reads on ink  */

  --focus:               #4E3624;   /* ring on light grounds — ≥9.67:1       */
  --focus-on-ink:        #C4A085;   /* ring on --ink — 7.70:1                */

  /* Scrims for the lightbox backdrop and the portfolio-card hover overlay.
     Both are --ink with alpha, so overlaid labels reuse the on-ink tokens. */
  --overlay:             rgb(20 19 17 / 0.92);   /* lightbox backdrop        */
  --overlay-soft:        rgb(20 19 17 / 0.55);   /* card hover scrim         */

  --success:             #1F6B3D;
  /* Now a true red. It previously had to equal --accent-ink to avoid two
     competing reds on the page; with a brown accent that constraint is gone,
     so an error can finally look like an error. */
  --danger:              #9E2617;   /* 7.34:1 on --bg                        */

  --selection-bg:        #141311;
  --selection-text:      #FBFAF8;

  /* --- Type: families ---------------------------------------------------- */

  /* Playfair Display: Didone lineage and the same high stroke contrast as the
     Vogue-style wordmark, but with sturdier hairlines and a larger x-height —
     it holds together at body-adjacent sizes where Bodoni Moda broke up. */
  --font-display: "Playfair Display", "Didot", "Bodoni MT", "Times New Roman", Georgia, serif;
  --font-body:    "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system,
                  "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* --- Type: scale — ratio 1.25 from a 17px base, rounded to whole px -----
     11 · 13 · 17 · 21 · 27 · 33 · 42 · 52 · 65 · 81
     --fs-xs (15px) is the one deliberate off-ladder value. DESIGN.md §3.   */

  --fs-3xs:  0.6875rem;   /* 11 */
  --fs-2xs:  0.8125rem;   /* 13 */
  --fs-xs:   0.9375rem;   /* 15 — off-ladder, for dense table cells        */
  --fs-sm:   1.0625rem;   /* 17 — BODY BASE                                */
  --fs-md:   1.3125rem;   /* 21 */
  --fs-lg:   1.6875rem;   /* 27 */
  --fs-xl:   2.0625rem;   /* 33 */
  --fs-2xl:  2.625rem;    /* 42 */
  --fs-3xl:  3.25rem;     /* 52 */
  --fs-4xl:  4.0625rem;   /* 65 */
  --fs-5xl:  5.0625rem;   /* 81 */

  /* Fluid display roles */
  --fs-display: clamp(2.625rem, 7vw + 0.5rem,  5.0625rem);  /*  42 → 81 */
  --fs-h1:      clamp(2.0625rem, 5vw + 0.5rem, 4.0625rem);  /*  33 → 65 */
  --fs-h2:      clamp(1.6875rem, 3vw + 0.75rem, 2.625rem);  /*  27 → 42 */
  --fs-h3:      clamp(1.3125rem, 1vw + 1rem,   1.6875rem);  /*  21 → 27 */
  --fs-lead:    clamp(1.1875rem, 1vw + 0.94rem, 1.3125rem); /*  19 → 21 */

  /* --- Type: weights ----------------------------------------------------- */

  --fw-display:  400;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;

  /* --- Type: line-height ------------------------------------------------- */

  /* Measured at 1440px: 0.98/1.02 collided on any heading running to three
     lines. These are the tightest values that clear the descenders. */
  --lh-display:  1.06;
  --lh-h1:       1.08;
  --lh-h2:       1.12;
  --lh-h3:       1.2;
  --lh-tight:    1.3;
  --lh-lead:     1.55;
  --lh-body:     1.65;
  --lh-flat:     1;

  /* --- Type: tracking ---------------------------------------------------- */

  --ls-display:  -0.02em;
  --ls-h2:       -0.015em;
  --ls-h3:       -0.01em;
  --ls-none:     0;
  --ls-button:   0.01em;
  --ls-eyebrow:  0.14em;

  /* --- Type: measure ----------------------------------------------------- */

  --measure:        68ch;
  --measure-narrow: 52ch;

  /* --- Space — 4px base unit --------------------------------------------- */

  --space-1:   0.25rem;   /*   4 */
  --space-2:   0.5rem;    /*   8 */
  --space-3:   0.75rem;   /*  12 */
  --space-4:   1rem;      /*  16 */
  --space-5:   1.5rem;    /*  24 */
  --space-6:   2rem;      /*  32 */
  --space-7:   2.5rem;    /*  40 */
  --space-8:   3rem;      /*  48 */
  --space-10:  4rem;      /*  64 */
  --space-12:  5rem;      /*  80 */
  --space-14:  6.5rem;    /* 104 */
  --space-16:  8rem;      /* 128 */
  --space-20:  10rem;     /* 160 */

  --section-y: clamp(4rem, 8vw + 1rem, 10rem);   /*  64 → 160 */
  --gutter:    clamp(1.25rem, 4vw, 3rem);        /*  20 →  48 */

  /* --- Layout ------------------------------------------------------------ */

  --container:        72rem;   /* 1152 */
  --container-wide:   84rem;   /* 1344 */
  --container-narrow: 44rem;   /*  704 */

  --header-h: 4.5rem;          /*  72 */

  /* --- Surface ----------------------------------------------------------- */

  --radius-sm:   2px;
  --radius-md:   3px;
  --radius-lg:   4px;
  --radius-full: 999px;   /* avatars only */

  --border-w:        1px;
  --border-w-strong: 2px;

  --shadow-sm: 0 1px 2px rgb(20 19 17 / 0.04);
  --shadow-md: 0 2px 10px rgb(20 19 17 / 0.06);
  --shadow-lg: 0 12px 40px rgb(20 19 17 / 0.09);

  /* --- Motion ------------------------------------------------------------ */

  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  --ease:     cubic-bezier(0.2, 0, 0.1, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Focus ------------------------------------------------------------- */

  --focus-w:      2px;
  --focus-offset: 2px;

  /* --- Z-index ----------------------------------------------------------- */

  --z-base:   1;
  --z-raised: 10;
  --z-header: 100;
  --z-nav:    200;
}

/* Breakpoints are documented here for reference. CSS custom properties
   cannot be used inside @media conditions, so the literals are repeated in
   layout.css and the component files — the one unavoidable duplication.
     --bp-cards: 34rem / 544px   cards go two-up
     --bp-nav:   48rem / 768px   nav goes horizontal
     --bp-split: 64rem / 1024px  split + three-up layouts engage
     --bp-max:   84rem / 1344px  container caps                              */