/* ============================================================================
   tokens.css — the entire visual vocabulary of the storefront.
   ============================================================================

   Every color, space, size and radius used anywhere in the UI is declared
   here and nowhere else. Components reference these variables; none of them
   contain a literal hex, px or font stack. Applying Tri-State's approved design
   should mean editing this file and nothing else.

   To verify that claim, swap this file for tokens-loud.css and reload. If any
   part of the UI does not change, something hard-coded a value it should have
   borrowed — that is a bug in the component, not in the design.

   ── Why it looks like this ──────────────────────────────────────────────────

   THE BRAND HAS NOW ARRIVED. The approved design lives in the WordPress child
   theme `twentytwentyfive-child`, which declares its own tokens in the :root of
   its style.css — --tsp-plum, --tsp-cream, --tsp-steel and the rest.

   So the color tokens below REFERENCE those variables rather than copying their
   values. One source of truth: a palette change in the theme reaches the shop
   with no edit here. Copied hex would drift silently the first time somebody
   adjusted a color.

   Each reference carries the original neutral as its fallback, which is what
   renders when the shop is loaded OUTSIDE WordPress — gallery.html, or the
   static page before migration. Inside WordPress the theme always wins.

   Not every token has an equivalent. Where the theme has no counterpart
   (--ink-subtle, the spacing scale, radii, shadows) the original value stays.
   Inventing a brand value to fill a gap is how a palette stops being the
   client's.

   One rule survives unchanged:

   COLOUR IS RESERVED FOR MEANING. The only saturated values in the system are
   the three verdicts and the print guides. A customer must never have to read
   text to learn whether their artwork is acceptable, so pass/warn/fail carry
   color; everything else is gray and earns attention through weight and space
   instead. When the brand arrives it fills --brand-*, which is currently unset
   on purpose.

   Dark mode is not defined. Adding it means overriding the surface and ink
   tokens in one media query — no component changes — but there is no point
   guessing at it before the brand exists.
   ========================================================================= */

:root {
  /* ── Ink ─────────────────────────────────────────────────────────────────
     Three weights, not five. More greys than a design needs is how a UI ends
     up with text nobody can quite read. */
  --ink:            var(--tsp-plum, #16181c);         /* body text, headings */
  --ink-muted:      var(--tsp-plum-muted, #5b6169);   /* secondary text, labels */
  /* No theme counterpart — the theme has no tone this light for text. Kept. */
  --ink-subtle:     #878d96;                          /* captions, disabled, placeholder */
  --ink-inverse:    var(--tsp-white, #ffffff);

  /* ── Surfaces ────────────────────────────────────────────────────────── */
  --surface:        var(--tsp-white, #ffffff);     /* cards, panels */
  --surface-page:   var(--tsp-cream, #f6f7f8);     /* page background */
  --surface-sunken: var(--tsp-surface-2, #eef0f2); /* wells, inactive tabs, dropzone */

  /* ── Lines ───────────────────────────────────────────────────────────── */
  --line:           var(--tsp-sky, #dfe3e7);       /* default borders, dividers */
  --line-strong:    var(--tsp-surface-3, #c3c9d0); /* input borders, emphasis */

  /* ── Brand ───────────────────────────────────────────────────────────────
     Now the theme's. Every primary action, link and focus ring follows these. */
  --brand:          var(--tsp-plum, #16181c);
  --brand-hover:    var(--tsp-plum-dark, #33373d);
  --brand-ink:      var(--tsp-white, #ffffff);   /* text on --brand */
  /* The theme's magenta, for the few places that need to stand apart from the
     plum without competing with a verdict color. */
  --accent:         var(--tsp-accent, #a43a6b);

  /* ── Verdicts ────────────────────────────────────────────────────────────
     The one place color carries meaning rather than decoration. Each verdict
     has a text color, a tint for badges, and a border for panels.

     A brand that wants amber for pass changes these three values; no markup or
     JavaScript is touched, because state is expressed as data-verdict in the
     HTML and mapped to color here. */
  --verdict-pass:      #256d3a;
  --verdict-pass-bg:   #e7f3ea;
  --verdict-pass-line: #a9d3b7;

  --verdict-warn:      #8a5a00;
  --verdict-warn-bg:   #fcf2e0;
  --verdict-warn-line: #e6c68a;

  --verdict-fail:      #a02121;
  --verdict-fail-bg:   #fbeaea;
  --verdict-fail-line: #e2a8a8;

  /* Used where a check could not be performed — outlined type, encrypted
     files, unresolvable page size. Deliberately gray: "not checked" is not a
     caution, and coloring it amber would make real warnings mean less. */
  --verdict-unknown:      #5b6169;
  --verdict-unknown-bg:   #eef0f2;
  --verdict-unknown-line: #c3c9d0;

  /* ── Print guides ────────────────────────────────────────────────────────
     Drawn onto a canvas by JavaScript, so paintGuides() reads these through
     getComputedStyle rather than holding literals. Otherwise the overlay would
     be the one part of the UI a designer could not restyle.

     These follow prepress convention — red for the cut, blue for the safe
     area — which customers who have seen a dieline will already recognise. */
  --guide-bleed:   #a02121;
  --guide-trim:    #16181c;
  --guide-safe:    #2c5f96;
  --guide-fold:    #7a1c1c;
  --guide-zone:    rgba(160, 33, 33, 0.13);   /* keep-clear fill, e.g. hang hole */

  /* ── Type ────────────────────────────────────────────────────────────────
     System stacks for now: a webfont is a brand decision, and loading one we
     will discard costs a request and a layout shift for nothing.

     The monospace face is not decorative. This storefront is full of
     measurements — 4.5 x 11.25 in, 300 dpi, $0.23 — and tabular figures keep
     them aligned in the check rows and the order summary, where a misread
     dimension is the whole problem preflight exists to prevent. */
  --font-sans: var(--tsp-font-sans,
               system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --text-xs:   0.75rem;    /* 12px — captions, legend */
  --text-sm:   0.8125rem;  /* 13px — check detail, table data */
  --text-base: 0.9375rem;  /* 15px — body */
  --text-md:   1.0625rem;  /* 17px — card titles */
  --text-lg:   1.375rem;   /* 22px — section headings */
  --text-xl:   1.875rem;   /* 30px — page title */
  --text-2xl:  2.5rem;     /* 40px — price, order total */

  --weight-normal: 400;
  --weight-medium: 550;
  --weight-bold:   700;

  --leading-tight: 1.25;
  --leading-base:  1.55;

  /* Uppercase micro-labels need loosening or they set as a solid block. */
  --tracking-label: 0.06em;

  /* ── Space ───────────────────────────────────────────────────────────────
     A 4px base. Every margin, padding and gap comes from this scale, so
     vertical rhythm holds without anyone eyeballing it. */
  --space-1: 0.25rem;   /*  4px */
  --space-2: 0.5rem;    /*  8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-7: 3rem;      /* 48px */
  --space-8: 4rem;      /* 64px */

  /* ── Shape ───────────────────────────────────────────────────────────── */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --border-width: 1px;

  /* ── Elevation ───────────────────────────────────────────────────────────
     Two levels. Anything needing a third is probably a layout problem. */
  --shadow-sm: 0 1px 2px rgba(22, 24, 28, 0.06);
  --shadow-md: 0 4px 16px rgba(22, 24, 28, 0.10);

  /* ── Focus ───────────────────────────────────────────────────────────────
     Keyboard focus must stay visible whatever the brand does to color. */
  --focus-ring: 2px solid var(--brand);
  --focus-offset: 2px;

  /* ── Layout ──────────────────────────────────────────────────────────── */
  --rule-width: 2px;      /* legend swatch rules — thicker than a border so they read */
  --card-min: 220px;      /* narrowest a product card may get before the grid rewraps */
  --measure: 68ch;        /* readable line length for prose */
  --page-max: 1180px;
  --duration: 140ms;
  --ease: cubic-bezier(0.2, 0, 0.2, 1);
}

/* Anyone who has asked their system to reduce motion gets none of ours. */
@media (prefers-reduced-motion: reduce) {
  :root { --duration: 0ms; }
}