/*
 * Touchstone — design tokens.
 *
 * Direction: modern product page, pinned by the brief, which
 * overrides the Trust & Authority palette that the category data
 * pointed at. What that direction does, mechanically:
 *
 *   - Full-bleed tonal slabs. A section is a field of colour edge to
 *     edge, not a tinted card floating on a page.
 *   - Large radii. 28px on panels and media, full pill on buttons.
 *     Nothing is square.
 *   - Display type set LIGHT and huge. 400 weight at 4rem, not 700
 *     at 2.5rem. The size carries it; the weight would shout.
 *   - Short copy. One idea per slab, one sentence under the headline.
 *   - Blue is structural, not an accent to be rationed. It fills
 *     buttons, tints whole sections, and colours the links.
 *   - The product is shown enormous, cropped to one detail at a time.
 *
 * Status colours stay a separate system. A band is a real value the
 * plugin computed; it is never decoration.
 *
 * Contrast is measured, and the figure is in the comment so the next
 * person can check rather than trust.
 */

:root {
  /* ===== Brand ===== */
  --primary:            #2B4ACB;  /* 7.1:1 with white */
  --primary-bright:     #3E5FE0;  /* 5.4:1 — display and large text */
  --primary-hover:      #1F37A0;  /* 9.9:1 */
  --on-primary:         #FFFFFF;

  /* ===== Ink ===== */
  --ink:                #1F2027;  /* neutral 900 — 16.2:1 on white */
  --ink-secondary:      #545861;  /* neutral 700 — 7.1:1 on white */
  --ink-tertiary:       #666B75;  /* 5.3:1 on white, 5.0:1 on neutral 50 */

  /* ===== Tonal surfaces — whole sections are painted in these ===== */
  --surface:            #FFFFFF;
  --surface-grey:       #F6F8FB;  /* neutral 50 */
  --surface-grey-deep:  #EEF0F5;  /* neutral 100 */
  --surface-blue:       #ECEFFC;  /* ink 14.2:1, primary 6.2:1 */
  --surface-dark:       #1F2027;
  --on-dark:            #E5E8EF;  /* 13.2:1 on --surface-dark */
  --on-dark-secondary:  #9DA2AC;  /* 6.3:1 on --surface-dark */
  --on-dark-accent:     #9DB0F7;  /* 7.7:1 on --surface-dark */

  --outline:            #D7DAE2;
  --outline-soft:       #E5E8EF;

  /* ===== Status — data only, never decoration ===== */
  --status-ok:          #1B7F43;  /* 5.0:1 with white */
  --status-watch:       #A35C00;  /* 5.2:1 with white */
  --status-risk:        #BC2020;  /* 6.2:1 with white */
  --status-ok-soft:     #E8F3EC;
  --status-watch-soft:  #FBF1DF;
  --status-risk-soft:   #FAEAEA;

  /* Brand mark. The stone inverts with the theme. The streaks are
     literals, not palette tokens, because they sit ON the stone rather
     than on the page - in dark mode --primary becomes #9DB0F7, which
     would be near-invisible against the light stone. */
  --logo-stone:        #17181A;
  --logo-streak:       #F2B33D;
  --logo-streak-dull:  #6E747C;

  /* ===== Type =====
     One family, DM Sans, for everything that is read as language, with
     DM Mono from the same superfamily for identifiers — slugs,
     committer handles, revisions — where character alignment and an
     unmistakable 0 actually matter.

     An earlier pass paired DM Sans for display with Roboto for text,
     mirroring a common two-face pairing. It made the page look
     assembled from two systems rather than designed as one, so the
     second face is gone. Hierarchy comes from size, weight and space.

     Both token names are kept and point at the same family: they record
     the ROLE, so a future decision to reintroduce a display face is a
     one-line change rather than a rewrite. */
  --font-display: "DM Sans", system-ui, -apple-system, sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "DM Mono", ui-monospace, SFMono-Regular, monospace;

  --text-display:  4.5rem;
  --text-h1:       3rem;
  --text-h2:       2.25rem;
  --text-h3:       clamp(1.125rem, 1.35vw, 1.375rem);
  --text-lede:     clamp(1.0625rem, 1.55vw, 1.375rem);
  --text-body:     1.0625rem;
  --text-small:    0.875rem;
  --text-mono:     0.9375rem;

  --lh-display: 1.08;
  --lh-h1:      1.12;
  --lh-h2:      1.3;
  --lh-h3:      1.35;
  --lh-body:    1.6;

  /* Light at size: display type loses weight as it grows. */
  --weight-display: 400;
  --weight-medium:  500;

  --track-display: -0.02em;
  --track-h2:      -0.015em;

  --measure: 60ch;

  /* ===== Space ===== */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: clamp(2rem, 4vw, 3rem);
  --space-6: clamp(2.5rem, 5.5vw, 4rem);
  --space-7: clamp(3rem, 7vw, 6rem);
  --space-8: clamp(3.5rem, 9vw, 7.5rem);

  /* ===== Shape — nothing is square ===== */
  --radius-pill:   62.5rem;
  --radius-panel:  1.75rem;  /* 28px */
  --radius-media:  2rem;
  --radius-small:  0.75rem;

  /* Depth is a soft ambient lift, never a hard drop. */
  --shadow-panel:
    0 0.0625rem 0.125rem rgba(60, 64, 67, 0.3),
    0 0.125rem 0.375rem 0.125rem rgba(60, 64, 67, 0.15);
  --shadow-lift:
    0 0.0625rem 0.1875rem rgba(60, 64, 67, 0.3),
    0 0.5rem 1.5rem 0.25rem rgba(60, 64, 67, 0.15);

  /* ===== Motion ===== */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --duration: 250ms;
  --duration-slow: 600ms;
}

/* ============================================================
 * Dark theme — built as its own palette, not an inversion of the light
 * one. Neutral 900 ground, light blue accent, neutral 200 text.
 * ============================================================ */

:root[data-theme="dark"] {
  --primary:            #9DB0F7;  /* 7.7:1 on the dark ground */
  --primary-bright:     #BDC9FA;
  --primary-hover:      #BDC9FA;
  --on-primary:         #1F2027;

  --ink:                #E5E8EF;  /* 13.2:1 on --surface */
  --ink-secondary:      #9DA2AC;  /* 6.3:1 on --surface */
  --ink-tertiary:       #8F949E;  /* 5.3:1 on neutral 900, 4.4:1 on neutral 800 */

  --surface:            #1F2027;
  --surface-grey:       #26282F;
  --surface-grey-deep:  #2D2F37;
  --surface-blue:       #1C2340;
  --surface-dark:       #17181A;
  --on-dark:            #E5E8EF;
  --on-dark-secondary:  #9DA2AC;
  --on-dark-accent:     #9DB0F7;

  --outline:            #393C44;
  --outline-soft:       #2D2F37;

  --status-ok:          #74C493;
  --status-watch:       #D9A94E;
  --status-risk:        #E88B84;
  --status-ok-soft:     #1E3025;
  --status-watch-soft:  #332B16;
  --status-risk-soft:   #33201F;

  --logo-stone:        #E5E8EF;
  --logo-streak:       #2B4ACB;
  --logo-streak-dull:  #9DA2AC;

  --shadow-panel:
    0 0.0625rem 0.125rem rgba(0, 0, 0, 0.6),
    0 0.125rem 0.375rem 0.125rem rgba(0, 0, 0, 0.3);
  --shadow-lift:
    0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.6),
    0 0.5rem 1.5rem 0.25rem rgba(0, 0, 0, 0.35);

  color-scheme: dark;
}

/* Without JavaScript the attribute is never set, so honour the OS
   preference — but only while no explicit choice is on the element. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary:            #9DB0F7;
    --primary-bright:     #BDC9FA;
    --primary-hover:      #BDC9FA;
    --on-primary:         #1F2027;

    --ink:                #E5E8EF;
    --ink-secondary:      #9DA2AC;
    --ink-tertiary:       #8F949E;

    --surface:            #1F2027;
    --surface-grey:       #26282F;
    --surface-grey-deep:  #2D2F37;
    --surface-blue:       #1C2340;
    --surface-dark:       #17181A;

    --outline:            #393C44;
    --outline-soft:       #2D2F37;

    --status-ok:          #74C493;
    --status-watch:       #D9A94E;
    --status-risk:        #E88B84;
    --status-ok-soft:     #1E3025;
    --status-watch-soft:  #332B16;
    --status-risk-soft:   #33201F;

    --logo-stone:        #E5E8EF;
    --logo-streak:       #2B4ACB;
    --logo-streak-dull:  #9DA2AC;

    --shadow-panel:
      0 0.0625rem 0.125rem rgba(0, 0, 0, 0.6),
      0 0.125rem 0.375rem 0.125rem rgba(0, 0, 0, 0.3);
    --shadow-lift:
      0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.6),
      0 0.5rem 1.5rem 0.25rem rgba(0, 0, 0, 0.35);

    color-scheme: dark;
  }
}