/* Turnkey Vintage — design tokens.
 *
 * THE SINGLE SOURCE OF TRUTH. Every colour, size, rhythm and duration used
 * anywhere on this site is named here and nowhere else. Two rules keep it
 * that way:
 *
 *   1. Tokens are declared on :root, never on a component class. They were
 *      once declared on `.doc`, which meant /admin — which has no `.doc`
 *      wrapper — resolved every one of them to nothing and rendered cream
 *      text on a white page.
 *   2. `npm run check:tokens` fails the build if any stylesheet or template
 *      uses a var(--name) that is not declared in this file. That is the
 *      check that would have caught --brass, which the redesign referenced
 *      thirty times and defined zero times: links lost their colour, the
 *      clock logo lost its stroke, and both "Send" buttons rendered
 *      near-black on near-black — invisible, on the live site.
 *
 * Contrast: every text pair below is measured against its own background and
 * annotated with its ratio. WCAG 2.2 AA wants 4.5:1 for body text, 3:1 for
 * large text and for the borders of anything you can click or type into.
 */

:root {
  /* ============================================================
     STOREFRONT — the public site. Deliberately one fixed dark
     palette: it is a period piece, not a themeable app.
     Ratios are against --ink unless noted.
     ============================================================ */

  /* surfaces */
  --ink:          #0d0b09;   /* page ground */

  /* type */
  --cream:        #ece6da;   /* primary text          15.81:1  AA */
  --cream-hi:     #f6f1e6;   /* over photographs      17.4 :1  AA */
  --cream-2:      #bdb4a4;   /* secondary text         9.57:1  AA */
  --faint:        #938a7b;   /* labels, captions, meta 5.76:1  AA
                                was #7d7365 at 4.22:1 — failed AA at the
                                11.5–14px sizes it is actually used at */

  /* accent */
  --brass:        #c9a45c;   /* links, rules, accents  8.37:1  AA */
  --brass-lit:    #f0e2c2;   /* hover                 13.1 :1  AA */
  --brass-glow:   rgba(200, 160, 90, .6);
  --on-brass:     var(--ink); /* text on a brass fill   8.37:1  AA */
  --verdigris:    #6f9486;   /* editorial brackets     5.85:1  AA
                                was #5c7d6f at 4.32:1 */

  /* lines */
  --hair:         rgba(236, 230, 218, .16);  /* decorative rules only: 1.66:1 */
  --hair-2:       rgba(236, 230, 218, .09);
  --hair-dark:    rgba(13, 11, 9, .18);
  --line-control: #6b6459;   /* borders of inputs and buttons  3.36:1
                                1.4.11 — a control's edge must clear 3:1,
                                which --hair at 1.66:1 does not */

  /* ============================================================
     CONTROL PANEL — /admin. A working tool, not a period piece,
     so it follows the device's light/dark setting.
     ============================================================ */
  --ui-bg:          #faf7f2;
  --ui-bg-2:        #f2ede4;
  --ui-card:        #ffffff;
  --ui-text:        #1c1917;  /* on --ui-bg-2  15.00:1  AA */
  --ui-text-2:      #57534e;  /*                6.54:1  AA */
  --ui-text-3:      #6b645b;  /*                5.00:1  AA  (was #8a8279, 3.25) */
  --ui-accent:      #7d6029;  /*                5.03:1  AA  (was #a07d3b, 3.28) */
  --ui-on-dark:     #faf7f2;
  --ui-bubble:      #1c1917;
  --ui-line:        #e3dbcf;  /* decorative separators */
  --ui-line-control:#8d8172;  /* input + button borders  3.27:1 on --ui-bg-2 */
  --ui-danger:      #c0392b;  /*                4.66:1  AA */
  --ui-ok:          #2a6e2e;  /*                5.35:1  AA  (was #2e7d32, 4.40) */
  --ui-shadow:      0 1px 2px rgba(28, 25, 23, .05), 0 8px 24px -12px rgba(28, 25, 23, .18);

  /* ============================================================
     TYPE
     ============================================================ */
  --font-display: "Bodoni Moda", "Didot", "Bodoni MT", Georgia, serif;
  --font-text:    "Libre Caslon Text", "EB Garamond", Georgia, serif;
  --font-ui:      ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, Helvetica, Arial, sans-serif;

  /* A ramp, not a pile of one-offs. --fs-0 is body copy. */
  --fs--2:  11.5px;
  --fs--1:  12px;
  --fs-0:   16.5px;
  --fs-xs:  13.5px;
  --fs-s:   14.5px;
  --fs-m:   15.5px;
  --fs-l:   17px;
  --fs-xl:  21px;
  --fs-2xl: 25px;
  --fs-3xl: 34px;

  /* Display sizes are fluid, so they are clamps rather than steps.
     h1's line-height is 1.08, not the 1.02 it started at: Bodoni's glyph box
     overflows a tighter line box, and above 1440px the first line crept up
     into the label above it. */
  --fs-h1: clamp(54px, 7.4vw, 116px);
  --fs-h2: clamp(34px, 4.2vw, 62px);
  --lh-display: 1.08;
  --lh-body:    1.78;
  --lh-tight:   1.2;

  /* tracking — letterspacing is structural in this design, not decoration */
  --track-display: -.015em;
  --track-label:   .34em;
  --track-nav:     .2em;
  --track-chip:    .14em;
  --track-fig:     .24em;

  --measure: 56ch;   /* longest comfortable line */

  /* ============================================================
     SPACE + LAYOUT
     ============================================================ */
  /* No numeric spacing ramp here on purpose. The vertical rhythm in this
     design is hand-set — 6, 12, 14, 18, 22, 26, 34, 42, 54, 62 — and a scale
     invented after the fact would either be a lie or force a relayout. What
     is tokenised is the structure that must stay consistent across pages. */
  --gutter:    clamp(24px, 5vw, 76px);  /* page edge to content */
  --inner-max: 1240px;
  --section-y: clamp(70px, 9vh, 140px); /* vertical rhythm between movements */
  --radius-ui: 10px;                    /* control panel only; the storefront
                                           has no rounded corners by design */

  /* ============================================================
     MOTION — every duration in one place so a reduced-motion audit
     has one thing to read.
     ============================================================ */
  --dur-fast:  .3s;
  --dur-mid:   .4s;
  --dur-slow:  1.4s;
  --ease-out:  cubic-bezier(.16, .84, .28, 1);

  /* ============================================================
     FOCUS — 2.4.7/2.4.11. One ring, used everywhere, so a keyboard
     user never has to guess where they are.
     ============================================================ */
  --focus-ring:   var(--brass);
  --focus-width:  2px;
  --focus-offset: 3px;

  --z-mast: 30;
  --z-grain: 60;
  --z-skip: 90;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ui-bg:           #16130f;
    --ui-bg-2:         #1e1a15;
    --ui-card:         #1c1813;
    --ui-text:         #f5f0e8;  /* 15.56:1  AA */
    --ui-text-2:       #c2b8a8;  /*  9.01:1  AA */
    --ui-text-3:       #8e8577;  /*  4.85:1  AA */
    --ui-accent:       #d4ab5e;  /*  8.23:1  AA */
    --ui-on-dark:      #16130f;
    --ui-bubble:       #d4ab5e;
    --ui-line:         #332c24;
    --ui-line-control: #776a59;  /*  3.29:1 */
    --ui-danger:       #ff8b7a;  /*  7.76:1  AA */
    --ui-ok:           #7fc784;  /*  8.75:1  AA */
    --ui-shadow:       0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
  }
}

:root[data-theme="dark"] {
  --ui-bg:           #16130f;
  --ui-bg-2:         #1e1a15;
  --ui-card:         #1c1813;
  --ui-text:         #f5f0e8;
  --ui-text-2:       #c2b8a8;
  --ui-text-3:       #8e8577;
  --ui-accent:       #d4ab5e;
  --ui-on-dark:      #16130f;
  --ui-bubble:       #d4ab5e;
  --ui-line:         #332c24;
  --ui-line-control: #776a59;
  --ui-danger:       #ff8b7a;
  --ui-ok:           #7fc784;
  --ui-shadow:       0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
}