/* =====================================================================
   SIMPLEWIRE DESIGN SYSTEM — TOKENS
   Version 1.6.0 · Website-ready layer (Flex+ / Core)
   Single source of truth. Three layers:
     Layer 1 PRIMITIVES  — raw values. Never use directly in UI.
     Layer 2 SEMANTIC    — what you design with (action, surface, text…).
     Layer 3 COMPONENT   — per-component knobs (button, card, input…).
   Change values in Layer 1; meaning flows up. Re-theme by re-pointing Layer 2.
   ===================================================================== */

:root{

/* ============ LAYER 1 · PRIMITIVES ============ */

/* Blue — brand / action */
--sw-blue-50:#EAF2FF;  --sw-blue-100:#E4EFFF; --sw-blue-200:#B7D4FF; --sw-blue-300:#7FB2FF;
--sw-blue-400:#4D95FF; --sw-blue-500:#2382FF; --sw-blue-600:#1466CC; --sw-blue-700:#0F4F9E;
--sw-blue-800:#0B3B75; --sw-blue-900:#082A54;

/* Cyan — signal (scan / live) */
--sw-cyan-200:#C7F2FF; --sw-cyan-300:#9BEAFF; --sw-cyan-400:#6CE2FF; --sw-cyan-500:#34CFF5;
--sw-cyan-soft:#E2F8FF;

/* Slate — neutral / hardware-commerce base */
--sw-slate-0:#FFFFFF;  --sw-slate-50:#F3F6FA; --sw-slate-100:#EAF0F6; --sw-slate-200:#DDE5EE;
--sw-slate-300:#C4D0DC; --sw-slate-400:#9AAABA; --sw-slate-500:#5C6E7D; --sw-slate-600:#36485A;
--sw-slate-700:#1E2E3C; --sw-slate-900:#0A1B28; --sw-navy:#06192A;

/* Status */
--sw-green-500:#1B9E6B; --sw-green-700:#0F6B4B; --sw-green-soft:#E2F3EC;
--sw-amber-500:#B5821E; --sw-amber-700:#725111; --sw-amber-soft:#F4ECD9;
--sw-red-500:#DB5347;   --sw-red-700:#A33830;   --sw-red-soft:#F8E5E3;

/* Product identity */
--sw-core-500:#0B3B75; --sw-core-700:#082A54; --sw-core-soft:#E8F1FA; --sw-core-line:#B7D4FF;
--sw-flexplus-500:#00AD90; --sw-flexplus-600:#007F6B; --sw-flexplus-700:#005548;
--sw-flexplus-soft:#E0F7F3; --sw-flexplus-line:#A7E8DD;

/* Type — families */
--sw-font-exo:"Exo","Exo 2",ui-sans-serif,system-ui,sans-serif;
--sw-font-inter:"neue-haas-unica","Inter","Helvetica Neue",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

/* Type — weights */
--sw-fw-regular:400; --sw-fw-medium:500; --sw-fw-semi:600; --sw-fw-bold:700; --sw-fw-black:800;

/* Type — size steps (fluid where it earns it) */
--sw-fs-12:12px; --sw-fs-13:13px; --sw-fs-14:14px; --sw-fs-15:15px; --sw-fs-17:17px;
--sw-fs-19:19px; --sw-fs-22:22px;
--sw-fs-h3:22px;
--sw-fs-quote:clamp(24px,3vw,30px);
--sw-fs-h2:clamp(30px,4.2vw,44px);
--sw-fs-h1:clamp(40px,5.5vw,64px);

/* Type — line-height & tracking */
--sw-lh-tight:1.05; --sw-lh-snug:1.2; --sw-lh-base:1.55;
--sw-track-tight:-0.02em; --sw-track-label:0.14em;

/* Spacing — 4px base */
--sw-space-1:4px;  --sw-space-2:8px;  --sw-space-3:12px; --sw-space-4:16px;
--sw-space-5:24px; --sw-space-6:32px; --sw-space-7:48px; --sw-space-8:64px;
--sw-space-9:96px; --sw-space-10:128px;

/* Radius */
--sw-radius-xs:5px; --sw-radius-sm:8px; --sw-radius-md:12px; --sw-radius-lg:16px;
--sw-radius-xl:24px; --sw-radius-pill:999px;

/* Elevation (single soft layer — calm, premium) */
--sw-elev-0:none;
--sw-elev-1:0 1px 2px rgba(10,27,40,.06);
--sw-elev-2:0 2px 12px rgba(10,27,40,.08);
--sw-elev-3:0 16px 40px rgba(10,27,40,.12);
--sw-glow:0 10px 26px rgba(35,130,255,.30);

/* Motion */
--sw-dur-fast:120ms; --sw-dur-base:200ms; --sw-dur-slow:400ms;
--sw-ease-standard:cubic-bezier(.2,.7,.2,1); --sw-ease-out:cubic-bezier(0,0,.2,1);

/* Breakpoints (reference — use the px values in @media) */
--sw-bp-sm:560px; --sw-bp-md:820px; --sw-bp-lg:1024px;


/* ============ LAYER 2 · SEMANTIC ============ */

/* Brand blue (primary visual engine; not a normal text background) */
--color-brand-blue:var(--sw-blue-500);
--color-brand-blue-soft:var(--sw-blue-50);
--color-brand-blue-line:var(--sw-blue-200);
/* Compat aliases only: do not use for normal copy directly on #2382FF. */
--color-brand-blue-ink:var(--sw-navy);
--color-brand-blue-text:var(--sw-slate-900);
--color-brand-blue-strong:var(--sw-blue-600);
--color-brand-blue-strong-hover:var(--sw-blue-700);
--color-brand-blue-on-strong:#ffffff;
--color-brand-blue-quiet-surface:var(--sw-slate-0);
--color-brand-blue-quiet-text:var(--sw-slate-900);

/* Action (blue = the only action colour; 600 is AA-safe for white text/buttons) */
--color-action:var(--color-brand-blue-strong);
--color-action-hover:var(--color-brand-blue-strong-hover);
--color-action-accent:var(--color-brand-blue);
--color-action-soft:var(--color-brand-blue-soft);
--color-action-border:var(--color-brand-blue-line);

/* Signal (cyan = scan / live ONLY — never decoration) */
--color-signal:var(--sw-cyan-400);
--color-signal-soft:var(--sw-cyan-soft);
--color-signal-text:#0A6E86;

/* AI (assistive suggestions, source disclosure, confidence) */
--color-ai-surface:var(--sw-blue-50);
--color-ai-border:var(--sw-blue-200);
--color-ai-text:var(--sw-blue-800);
--color-ai-accent:var(--color-action);
--color-source-chip-bg:var(--sw-slate-0);
--color-source-chip-border:var(--color-ai-border);
--color-confidence-high-text:var(--color-success-text);
--color-confidence-medium-text:var(--color-warning-text);
--color-confidence-low-text:var(--color-danger-text);

/* Surfaces */
--color-bg:var(--sw-slate-50);
--color-surface:var(--sw-slate-0);
--color-surface-soft:var(--sw-slate-100);
--color-surface-inverse:var(--sw-navy);

/* Text */
--color-text:var(--sw-slate-900);
--color-text-soft:var(--sw-slate-600);
--color-text-muted:var(--sw-slate-500);
--color-text-on-action:#ffffff;
--color-text-inverse:#ffffff;

/* Borders */
--color-border:var(--sw-slate-200);
--color-border-strong:var(--sw-slate-300);

/* Status */
--color-success:var(--sw-green-500); --color-success-text:var(--sw-green-700); --color-success-soft:var(--sw-green-soft);
--color-warning:var(--sw-amber-500); --color-warning-text:var(--sw-amber-700); --color-warning-soft:var(--sw-amber-soft);
--color-danger:var(--sw-red-500);    --color-danger-text:var(--sw-red-700);    --color-danger-soft:var(--sw-red-soft);
--color-success-bg:var(--color-success-soft); --color-success-border:var(--color-success);
--color-warning-bg:var(--color-warning-soft); --color-warning-border:var(--color-warning);
--color-danger-bg:var(--color-danger-soft);   --color-danger-border:var(--color-danger);

/* Product identity (never action colours) */
--color-product-core:var(--sw-core-500);
--color-product-core-text:var(--sw-core-500);
--color-product-core-soft:var(--sw-core-soft);
--color-product-core-border:var(--sw-core-line);
--color-product-flexplus:var(--sw-flexplus-500);
--color-product-flexplus-mark:var(--sw-flexplus-500);
--color-product-flexplus-text:var(--sw-flexplus-700);
--color-product-flexplus-soft:var(--sw-flexplus-soft);
--color-product-flexplus-border:var(--sw-flexplus-line);

/* Type roles */
--font-display:var(--sw-font-exo);   /* headings, prices, labels */
--font-text:var(--sw-font-inter);    /* body, UI */

/* Elevation roles */
--elevation-flat:var(--sw-elev-0);
--elevation-card:var(--sw-elev-1);
--elevation-raised:var(--sw-elev-2);
--elevation-overlay:var(--sw-elev-3);

/* Radius roles */
--radius-control:var(--sw-radius-md);  /* buttons, inputs */
--radius-card:var(--sw-radius-lg);
--radius-panel:var(--sw-radius-xl);
--radius-pill:var(--sw-radius-pill);

/* Layout */
--container-max:1180px;
--gutter:clamp(20px,5vw,40px);
--measure-body:65ch;
--measure-lead:58ch;
--measure-compact:50ch;
--target-min:44px;
--target-gap-min:8px;
--media-ratio-wide:16 / 10;
--media-ratio-golden:1.618 / 1;

/* Print layout (HTML/CSS -> PDF preview; final production follows printer specs) */
--print-page-a4-width:210mm;
--print-page-a4-height:297mm;
--print-page-a5-width:148mm;
--print-page-a5-height:210mm;
--print-bleed:3mm;
--print-safe-area:10mm;
--print-safe-area-a5:8mm;
--print-margin:14mm;
--print-gutter:5mm;
--print-grid-columns:6;
--print-rule-hairline:0.25pt;
--print-body-size:9.5pt;
--print-small-size:7.5pt;
--print-h1-size:28pt;
--print-h2-size:16pt;
--print-line-height:1.35;
--print-qr-min-size:24mm;
--print-qr-quiet-zone-modules:4;
--section-y-normal:clamp(64px,8vw,104px);
--section-y-compact:clamp(40px,5vw,64px);
--section-hero-top:clamp(40px,6vw,80px);
--section-hero-bottom:clamp(48px,6vw,84px);
--section-head-gap:clamp(32px,4vw,52px);

/* Layering */
--z-sticky:20;
--z-overlay:40;
--z-modal:80;
--z-toast:120;

/* Icons */
--icon-size-sm:16px;
--icon-size-md:20px;
--icon-size-lg:24px;
--icon-stroke:2;

/* Motion roles */
--motion-fast:var(--sw-dur-fast);
--motion-base:var(--sw-dur-base);
--ease:var(--sw-ease-standard);


/* ============ LAYER 3 · COMPONENT ============ */

/* Button */
--btn-radius:var(--radius-control);
--btn-pad-y:12px; --btn-pad-x:20px;
--btn-font:var(--font-text); --btn-weight:var(--sw-fw-semi);
--btn-primary-bg:var(--color-action);
--btn-primary-bg-hover:var(--color-action-hover);
--btn-primary-text:var(--color-text-on-action);
--btn-ghost-border:var(--color-border-strong);

/* Card */
--card-bg:var(--color-surface);
--card-border:var(--color-border);
--card-radius:var(--radius-card);
--card-shadow:var(--elevation-card);
--card-pad:var(--sw-space-5);

/* Input */
--input-bg:var(--color-surface);
--input-border:var(--color-border-strong);
--input-radius:var(--radius-control);
--input-focus:var(--color-action);

/* Badge / pill */
--badge-radius:var(--radius-pill);

/* Brand pattern components */
--brand-panel-bg:var(--color-brand-blue);
--brand-panel-content-bg:var(--color-brand-blue-quiet-surface);
--brand-panel-content-text:var(--color-brand-blue-quiet-text);
/* Compat alias: text belongs on --brand-panel-content-bg, not directly on --brand-panel-bg. */
--brand-panel-text:var(--brand-panel-content-text);
--brand-panel-border:var(--color-brand-blue-line);
--brand-panel-strong-bg:var(--color-brand-blue-strong);
--brand-panel-strong-text:var(--color-brand-blue-on-strong);

/* AI pattern components */
--ai-card-bg:var(--color-ai-surface);
--ai-card-border:var(--color-ai-border);
--ai-card-text:var(--color-ai-text);
--ai-label-bg:var(--color-surface);
--ai-label-border:var(--color-ai-border);
--ai-label-text:var(--color-ai-text);
--source-chip-bg:var(--color-source-chip-bg);
--source-chip-border:var(--color-source-chip-border);

/* Focus ring (accessibility) */
--focus-ring:0 0 0 3px var(--color-surface),0 0 0 6px var(--color-action);


/* ============ COMPAT — keeps existing sections working ============
   The first sections were built on --sw-accent / --sw-ink etc.
   These aliases map the old names onto the new semantic layer so
   nothing breaks while we migrate to semantic tokens. */
--sw-accent:var(--color-action);          --sw-accent-strong:var(--color-action-hover);
--sw-accent-brand:var(--color-action-accent);
--sw-accent-soft:var(--color-action-soft);--sw-accent-line:var(--color-action-border);
--sw-cyan:var(--color-signal);
--sw-cyan-text:var(--color-signal-text);
--sw-bg:var(--color-bg);                  --sw-surface:var(--color-surface);
--sw-surface-soft:var(--color-surface-soft);
--sw-ink:var(--color-text);               --sw-ink-soft:var(--color-text-soft);
--sw-muted:var(--color-text-muted);
--sw-line:var(--color-border);            --sw-line-strong:var(--color-border-strong);
--sw-success:var(--color-success);        --sw-success-text:var(--color-success-text); --sw-success-soft:var(--color-success-soft);
--sw-warning:var(--color-warning);        --sw-warning-text:var(--color-warning-text); --sw-warning-soft:var(--color-warning-soft);
--sw-danger:var(--color-danger);          --sw-danger-text:var(--color-danger-text);   --sw-danger-soft:var(--color-danger-soft);
--sw-product-core:var(--color-product-core); --sw-product-core-text:var(--color-product-core-text); --sw-product-core-soft:var(--color-product-core-soft);
--sw-product-flexplus:var(--color-product-flexplus); --sw-product-flexplus-mark:var(--color-product-flexplus-mark); --sw-product-flexplus-text:var(--color-product-flexplus-text);
--sw-shadow-sm:var(--elevation-card);     --sw-shadow-md:var(--elevation-raised);
--sw-shadow-lg:var(--elevation-overlay);
--sw-font-display:var(--font-display);    --sw-font-sans:var(--font-text);
}