/* ==========================================================================
   WENEX UI SYSTEM — TOKENS
   The single source of every visual value in the platform.

   ARCHITECTURE
   ------------
   Tokens own values. Components consume tokens. A component that hardcodes a
   colour, radius, duration, shadow, space or type value is a defect — the
   linter enforces this, not convention.

   THREE LAYERS
   ------------
   1. PRIMITIVE  --wx-<family>-<step>   raw values, no meaning
   2. SEMANTIC   --wx-<role>            meaning, points at a primitive
   3. COMPONENT  --wx-<component>-<prop> component-scoped, points at semantic

   Only layer 2 and 3 may be used inside a component. Layer 1 exists so the
   palette can be retuned in one place.

   RELATIONSHIP TO --wenex-* TOKENS
   --------------------------------
   The site already ships a --wenex-* token layer (Customizer, canonical CSS).
   That layer remains the brand's source of truth; every semantic token here
   RESOLVES from it with the canonical value as a fallback, so this file is
   correct whether or not that layer has loaded, and a brand change made
   there still propagates here.
   ========================================================================== */

:root{

  /* ================= 1. PRIMITIVES ================= */

  /* neutral ramp — Apple-neutral light surface family */
  --wx-n-0:#FFFFFF;
  --wx-n-50:#F5F5F7;
  --wx-n-100:#EFEFF2;
  --wx-n-200:#D2D2D7;
  --wx-n-300:#B0B0B7;
  --wx-n-400:#86868B;
  --wx-n-500:#6E6E73;
  --wx-n-600:#4B4B4F;
  --wx-n-900:#1D1D1F;

  /* brand — resolves from the canonical WENEX crimson ramp */
  --wx-brand:var(--wenex-color-accent,#C93927);
  --wx-brand-hover:var(--wenex-color-accent-hover,#9D2F21);
  --wx-brand-light:var(--wenex-color-accent-light,#E24D39);

  /* status — deliberately separated from brand crimson */
  --wx-green-600:#1E7F4F;
  --wx-green-50:#E9F6EF;
  --wx-green-200:#B6E0C8;
  --wx-amber-600:#C77700;
  --wx-red-600:var(--wenex-color-error,#D7263D);
  --wx-red-700:#B01F32;
  --wx-red-50:#FDECEE;
  --wx-red-200:#F4C1C7;
  --wx-blue-50:#EEF2F7;
  --wx-blue-200:#CBD7E4;
  --wx-blue-900:#1F3350;

  /* alpha — for overlays and hairlines on unknown backgrounds */
  --wx-a-04:rgba(0,0,0,.04);
  --wx-a-06:rgba(0,0,0,.06);
  --wx-a-09:rgba(0,0,0,.09);
  --wx-a-10:rgba(0,0,0,.10);
  --wx-a-45:rgba(0,0,0,.45);
  --wx-brand-a08:rgba(201,57,39,.08);
  --wx-brand-a13:rgba(201,57,39,.13);
  --wx-red-a11:rgba(215,38,61,.11);

  /* ================= 2. SEMANTIC ================= */

  /* ink */
  --wx-ink:var(--wx-n-900);
  --wx-ink-2:var(--wx-n-600);
  --wx-ink-3:var(--wx-n-500);
  --wx-ink-4:var(--wx-n-400);
  --wx-ink-inverse:var(--wx-n-0);

  /* surface */
  --wx-surface:var(--wx-n-0);
  --wx-surface-sunken:var(--wx-a-04);
  --wx-canvas:var(--wx-n-50);

  /* line */
  --wx-line:var(--wx-a-10);
  --wx-line-strong:var(--wx-n-200);
  --wx-line-hover:var(--wx-n-300);

  /* intent */
  --wx-accent:var(--wx-brand);
  --wx-accent-hover:var(--wx-brand-hover);
  --wx-accent-wash:var(--wx-brand-a08);
  --wx-ok:var(--wx-green-600);
  --wx-ok-wash:var(--wx-green-50);
  --wx-ok-line:var(--wx-green-200);
  --wx-warn:var(--wx-amber-600);
  --wx-bad:var(--wx-red-600);
  --wx-bad-hover:var(--wx-red-700);
  --wx-bad-wash:var(--wx-red-50);
  --wx-bad-line:var(--wx-red-200);
  --wx-info-wash:var(--wx-blue-50);
  --wx-info-line:var(--wx-blue-200);
  --wx-info-ink:var(--wx-blue-900);
  --wx-ok-ink:#14532D;
  --wx-bad-ink:#8C1420;
  --wx-disabled:#C7C7CC;
  --wx-scrim:var(--wx-a-45);

  /* typography */
  --wx-font-head:var(--wenex-font-headline,'Switzer',sans-serif);
  --wx-font-body:var(--wenex-font-body,'Satoshi',sans-serif);
  --wx-text-2xs:11px;
  --wx-text-xs:12px;
  --wx-text-sm:12.5px;
  --wx-text-md:14px;
  --wx-text-base:15px;
  --wx-text-lg:17px;
  --wx-text-xl:19px;
  --wx-text-2xl:clamp(23px,3.4vw,29px);
  /* 16px is a FUNCTIONAL minimum for inputs: iOS zooms the viewport on focus
     for anything smaller. Never lower this token. */
  --wx-text-input:16px;
  --wx-weight-medium:500;
  --wx-weight-semibold:600;
  --wx-weight-bold:700;
  --wx-leading-tight:1.15;
  --wx-leading-snug:1.5;
  --wx-leading-normal:1.55;
  --wx-leading-relaxed:1.6;
  --wx-tracking-tight:-.022em;
  --wx-tracking-snug:-.012em;
  --wx-tracking-wide:.05em;
  --wx-tracking-wider:.1em;

  /* space */
  --wx-space-1:4px;
  --wx-space-2:6px;
  --wx-space-3:8px;
  --wx-space-4:10px;
  --wx-space-5:12px;
  --wx-space-6:14px;
  --wx-space-7:16px;
  --wx-space-8:18px;
  --wx-space-9:20px;
  --wx-space-10:22px;
  --wx-space-12:26px;
  --wx-space-14:32px;
  --wx-space-16:44px;

  /* radius */
  --wx-radius-xs:4px;
  --wx-radius-sm:8px;
  --wx-radius-md:12px;
  --wx-radius-lg:16px;
  --wx-radius-pill:999px;
  --wx-radius-circle:50%;

  /* elevation */
  --wx-shadow-none:none;
  --wx-shadow-xs:0 1px 2px rgba(0,0,0,.03);
  --wx-shadow-sm:0 1px 3px rgba(0,0,0,.08);
  --wx-shadow-md:0 2px 10px rgba(0,0,0,.07);
  --wx-shadow-lg:0 4px 16px rgba(0,0,0,.06);
  --wx-shadow-card:0 1px 2px rgba(0,0,0,.03), 0 8px 24px rgba(0,0,0,.04);
  --wx-shadow-modal:0 24px 60px rgba(0,0,0,.28);
  --wx-ring:0 0 0 3px var(--wx-brand-a13);
  --wx-ring-bad:0 0 0 3px var(--wx-red-a11);

  /* motion */
  --wx-ease:cubic-bezier(.16,1,.3,1);
  --wx-ease-standard:cubic-bezier(.4,0,.2,1);
  --wx-dur-fast:160ms;
  --wx-dur-med:280ms;
  --wx-dur-slow:420ms;
  --wx-shimmer:1.3s;
  --wx-spin:.7s;

  /* focus */
  --wx-focus-width:2px;
  --wx-focus-color:var(--wx-brand);
  --wx-focus-offset:2px;

  /* targets — WCAG 2.5.8 floor is 24px; WENEX standard is 44px, and
     primary controls sit at 50px. These are contracts, not preferences. */
  --wx-target-min:44px;
  --wx-target-control:50px;

  /* layout */
  --wx-measure-form:480px;
  --wx-measure-prose:38ch;
  --wx-container:1120px;

  /* z */
  --wx-z-dialog:9990;

  /* ================= 3. COMPONENT ================= */

  --wx-card-bg:var(--wx-surface);
  --wx-card-border:var(--wx-line);
  --wx-card-radius:var(--wx-radius-lg);
  --wx-card-shadow:var(--wx-shadow-card);

  --wx-input-bg:var(--wx-surface);
  --wx-input-border:var(--wx-line-strong);
  --wx-input-radius:var(--wx-radius-md);
  --wx-input-height:var(--wx-target-control);

  --wx-btn-radius:var(--wx-radius-md);
  --wx-btn-height:var(--wx-target-control);

  --wx-tile-radius:var(--wx-radius-md);
  --wx-nav-radius:var(--wx-radius-sm);
  --wx-dialog-radius:var(--wx-radius-lg);
}

/* ==========================================================================
   DARK CANVAS (S-001) — the second product surface.

   The member area ships a three-way appearance switch (wenex-wdxs boot sets
   data-theme on :root), but this system was built against one canvas: in dark,
   cards and inputs stayed white and the accent stayed the light-canvas
   crimson. Because every component consumes the SEMANTIC layer, the whole
   system recolours from this one block — no component is edited.

   PRINCIPLE — on dark, elevation is LIGHT, not shadow. Shadows are invisible
   on black; raised surfaces get lighter instead, and card shadows become
   hairline light borders.

   Every pair below is measured, not eyeballed:
     ink   #F5F5F7 on #000     19.6:1  AAA
     ink-2 #C7C7CC on #101010  11.4:1  AAA
     ink-3 #8E8E93 on #101010   6.3:1  AA at every size
     accent #E24D39 on #000     4.8:1  AA (replaces the 4.1:1 failure of
                                        light-canvas crimson used on black)
   ========================================================================== */
:root[data-theme="dark"]{
  color-scheme:dark; /* native controls (selects, autofill) follow the canvas */

  /* ink */
  --wx-ink:#F5F5F7;
  --wx-ink-2:#C7C7CC;
  --wx-ink-3:#8E8E93;
  --wx-ink-4:#8E8E93;

  /* surface — the light-elevation ladder: canvas 000 → card 101010 → raised 1E1E1E */
  --wx-surface:#101010;
  --wx-surface-sunken:rgba(255,255,255,.05);
  --wx-canvas:#000000;

  /* line — hairlines are light on dark */
  --wx-line:rgba(255,255,255,.10);
  --wx-line-strong:rgba(255,255,255,.20);
  --wx-line-hover:rgba(255,255,255,.30);

  /* intent — crimson-light IS the accent on dark (S-031: the primary action
     must never be the least visible element on the page) */
  --wx-accent:var(--wx-brand-light);
  --wx-accent-hover:#FF6A55;
  --wx-accent-wash:rgba(226,77,57,.14);
  --wx-ok:#4CC38A;
  --wx-ok-wash:rgba(30,127,79,.18);
  --wx-ok-line:rgba(76,195,138,.35);
  --wx-ok-ink:#A7E3C5;
  --wx-warn:#E8A13D;
  --wx-bad:#F0637A;
  --wx-bad-hover:#FF7B90;
  --wx-bad-wash:rgba(215,38,61,.18);
  --wx-bad-line:rgba(240,99,122,.35);
  --wx-bad-ink:#F6AEB9;
  --wx-info-wash:rgba(80,110,160,.22);
  --wx-info-line:rgba(140,165,205,.35);
  --wx-info-ink:#C2D2E8;
  --wx-disabled:#5A5A5F;
  --wx-scrim:rgba(0,0,0,.62);

  /* elevation — depth is carried by lightness + a hairline, not by shadow */
  --wx-shadow-xs:0 0 0 1px rgba(255,255,255,.05);
  --wx-shadow-sm:0 0 0 1px rgba(255,255,255,.07);
  --wx-shadow-md:0 0 0 1px rgba(255,255,255,.07);
  --wx-shadow-lg:0 0 0 1px rgba(255,255,255,.09);
  --wx-shadow-card:0 0 0 1px rgba(255,255,255,.06);
  --wx-shadow-modal:0 0 0 1px rgba(255,255,255,.10), 0 24px 60px rgba(0,0,0,.6);
  --wx-ring:0 0 0 3px rgba(226,77,57,.28);
  --wx-ring-bad:0 0 0 3px rgba(240,99,122,.25);

  /* focus follows the dark accent */
  --wx-focus-color:var(--wx-brand-light);

  /* component — inputs are wells, not floodlights (S-001) */
  --wx-input-bg:#1E1E1E;
}

/* Reduced motion is a TOKEN-level concern: zeroing the duration tokens
   disables every transition in the system at once, so no component can
   forget to honour it. */
@media (prefers-reduced-motion:reduce){
  :root{
    --wx-dur-fast:0ms;
    --wx-dur-med:0ms;
    --wx-dur-slow:0ms;
  }
}