/* tokens.css — Acquiro360 design system (Tier 1 + Tier 2).
 *
 * This is the ONLY file allowed to contain raw colour literals
 * (hex / rgb / rgba / hsl). Enforced by TestCSS_NoRawValues:
 * base.css and components.css must reference var(--*) only.
 *
 * Token tiers (see RFC §4.1):
 *   Tier 1  Primitives   raw brand, theme-agnostic        --acq-*, scale, fonts
 *   Tier 2  Semantic     theme-scoped, the layer apps read --bg, --surface, --text, --accent…
 *   Tier 3  (deferred)   derived convenience tokens        introduced when components need them
 *
 * Iterability contract: changing any visible aspect of the UI globally
 * should be a single edit in this file. Components and base.css read
 * Tier 2 only; theme = remap Tier 2; adding a third theme = one new
 * selector block here, zero edits elsewhere.
 */

/* ---------- Tier 1 — Primitives (theme-agnostic) ---------- */
:root {
  /* Brand */
  --acq-ink:        #121212;
  --acq-lime:       #9ff465;
  --acq-paper:      #ffffff;
  --acq-paper-2:    #fafafa;
  --acq-paper-3:    #f3f3f3;

  /* Grey ramp (light surfaces → dark on-surface text) */
  --acq-grey-200:   #e2e2e2;
  --acq-grey-300:   #c8c8c8;
  --acq-grey-400:   #aaadb0;
  --acq-grey-500:   #758696;
  --acq-grey-600:   #5d6c7b;

  /* Status hues */
  --acq-red:        #ea384c;
  --acq-amber:      #f5c451;
  --acq-blue:       #7fd4ff;

  /* Categorical series palette (weekly-report charts, RFC §4.6).
     Per-theme shades — brand pinned to slot 0; competitors at 1..15 avoid green.
     Each value clears WCAG 2.1 SC 1.4.11 (≥3:1) vs the corresponding --bg
     (asserted by TestSeriesPalette_WCAGAA). */
  --acq-series-dark-0:  #9ff465;
  --acq-series-dark-1:  #5ecbf2;
  --acq-series-dark-2:  #ffa94d;
  --acq-series-dark-3:  #e672c4;
  --acq-series-dark-4:  #a78bfa;
  --acq-series-dark-5:  #ff8b73;
  --acq-series-dark-6:  #4dd2a6;
  --acq-series-dark-7:  #facc15;
  --acq-series-dark-8:  #c084fc;
  --acq-series-dark-9:  #60a5fa;
  --acq-series-dark-10: #fb7185;
  --acq-series-dark-11: #d4e85b;
  --acq-series-dark-12: #2dd4bf;
  --acq-series-dark-13: #fdba74;
  --acq-series-dark-14: #818cf8;
  --acq-series-dark-15: #4ade80;

  --acq-series-light-0: #4a8a26;
  --acq-series-light-1: #0891b2;
  --acq-series-light-2: #d97706;
  --acq-series-light-3: #be185d;
  --acq-series-light-4: #7c3aed;
  --acq-series-light-5: #dc2626;
  --acq-series-light-6: #047857;
  --acq-series-light-7: #a16207;
  --acq-series-light-8: #9333ea;
  --acq-series-light-9: #2563eb;
  --acq-series-light-10:#e11d48;
  --acq-series-light-11:#4d7c0f;
  --acq-series-light-12:#0f766e;
  --acq-series-light-13:#c2410c;
  --acq-series-light-14:#4f46e5;
  --acq-series-light-15:#15803d;

  /* Type stack — Geist self-hosted, see base.css @font-face */
  --font-sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Type scale (2xl/3xl fluid via clamp) */
  --fs-2xs: 11px;
  --fs-xs:  12px;
  --fs-sm:  13px;
  --fs-md:  14px;
  --fs-lg:  16px;
  --fs-xl:  20px;
  --fs-2xl: clamp(22px, 1.2rem + 1.4vw, 28px);
  --fs-3xl: clamp(28px, 1.6rem + 2.6vw, 40px);

  --lh-tight:   1.15;
  --lh-base:    1.45;
  --track-label: 0.07em;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    600;

  /* Spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-8: 48px;

  /* Radius / border / motion */
  --r-sm:    4px;
  --r-md:    6px;
  --r-lg:    10px;
  --r-pill:  999px;
  --bw:      1px;
  --ease:    cubic-bezier(.22, .61, .36, 1);
  --dur:     130ms;

  /* Breakpoint mirrors (read by JS only — media-query conditions can't
     read custom properties, so the same literals appear inside @media
     below; TestCSS_NoRawValues whitelists 480/768/1024 in @media lines.) */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;

  /* Component primitives (Rev 7) — each used in ≥2 places or carries a
     standard/semantic commitment. No one-off renamed magic numbers. */
  --dot:        6px;    /* indicator dot — pill led, toast led, nav-item dot */
  --bar:        3px;    /* emphasis bar — selected-row inset rail */
  --h-touch:   44px;    /* WCAG 2.5.5 interactive minimum (RFC §4.7) */
  --h-topbar:  48px;    /* shell topbar height; drawer offset derives from this */
  --w-sidebar:248px;    /* shell sidebar drawer width */
  --w-input:  200px;    /* text input min-width */
  --w-select: 130px;    /* select min-width */
  --h-chart-canvas: 280px; /* chart card canvas height */
}

/* ---------- Typed registration for non-CSS consumers ----------
 * `@property` declares the type of a custom property so the browser
 * resolves `var()` chains when JS reads via `getPropertyValue`.
 *
 * Without this, an unregistered custom property's computed value is its
 * specified value verbatim — so `--text: var(--acq-ink)` in light theme
 * returns the literal string "var(--acq-ink)" instead of "#121212",
 * which Chart.js (canvas) cannot parse. See
 * prompts/claude/web-app/20260526-brainstorm-design-tokens-cross-medium-consumers.md
 * for the full rationale and the path to a build-time generator if/when
 * non-browser consumers (PDF, email) join.
 *
 * Only tokens read from JS need a `@property` block; CSS-only tokens
 * don't require typing.
 */
@property --text         { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --text-muted   { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --text-faint   { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --bg           { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --chart-axis   { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --chart-grid   { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --series-0     { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --series-1     { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --series-2     { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --series-3     { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --series-4     { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --series-5     { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --series-6     { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --series-7     { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --series-8     { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --series-9     { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --series-10    { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --series-11    { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --series-12    { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --series-13    { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --series-14    { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --series-15    { syntax: '<color>'; inherits: true; initial-value: transparent; }

/* ---------- Tier 2 — Semantic (dark is the default) ---------- */
:root,
[data-theme="dark"] {
  /* color-scheme drives the UA-painted chrome (date/time picker indicators,
     scrollbars, autofill) — without it, native form controls render in light
     variant on a dark surface and the date picker icon goes invisible. */
  color-scheme: dark;
  --bg:            #0d0d0d;
  --bg-grid:       rgba(255, 255, 255, .022);
  --surface:       #141414;
  --surface-2:     #1a1a1a;
  --surface-hover: #1f1f1f;
  --border:        #262626;
  --border-strong: #353535;
  --text:          #f4f4f5;
  --text-muted:    #8a8f98;
  --text-faint:    #5c6066;
  --accent:        var(--acq-lime);
  --accent-ink:    #0d0d0d;
  --accent-dim:    rgba(159, 244, 101, .13);
  --accent-line:   rgba(159, 244, 101, .40);
  --positive:      #9ff465;
  --positive-ink:  #0d0d0d;
  --negative:      #ff5c5c;
  --negative-dim:  rgba(255, 92, 92, .14);
  --warning:       var(--acq-amber);
  --info:          var(--acq-blue);
  --shadow:        0 1px 0 rgba(0, 0, 0, .6);
  --shadow-pop:    0 8px 28px rgba(0, 0, 0, .55);
  --scrollbar:     #2c2c2c;
  --accent-glow:   rgba(159, 244, 101, .50);  /* live-pill ping start frame */
  --overlay:       rgba(0, 0, 0, .50);        /* drawer backdrop */
  --series-0:      var(--acq-series-dark-0);
  --series-1:      var(--acq-series-dark-1);
  --series-2:      var(--acq-series-dark-2);
  --series-3:      var(--acq-series-dark-3);
  --series-4:      var(--acq-series-dark-4);
  --series-5:      var(--acq-series-dark-5);
  --series-6:      var(--acq-series-dark-6);
  --series-7:      var(--acq-series-dark-7);
  --series-8:      var(--acq-series-dark-8);
  --series-9:      var(--acq-series-dark-9);
  --series-10:     var(--acq-series-dark-10);
  --series-11:     var(--acq-series-dark-11);
  --series-12:     var(--acq-series-dark-12);
  --series-13:     var(--acq-series-dark-13);
  --series-14:     var(--acq-series-dark-14);
  --series-15:     var(--acq-series-dark-15);
  --chart-grid:    var(--acq-grey-600);
  --chart-axis:    var(--text-faint);
}

[data-theme="light"] {
  color-scheme: light;
  --bg:            var(--acq-paper-2);
  --bg-grid:       rgba(18, 18, 18, .025);
  --surface:       #ffffff;
  --surface-2:     #ffffff;
  --surface-hover: #f6f7f5;
  --border:        #e7e7e4;
  --border-strong: #d6d6d2;
  --text:          var(--acq-ink);
  --text-muted:    #5d6c7b;
  --text-faint:    #aaadb0;
  --accent:        var(--acq-lime);
  --accent-ink:    #102a05;
  --accent-dim:    rgba(159, 244, 101, .24);
  --accent-line:   #6fae3f;
  --positive:      #2f9e44;
  --positive-ink:  #ffffff;
  --negative:      #e03131;
  --negative-dim:  rgba(224, 49, 49, .10);
  --warning:       #b8860b;
  --info:          #1c7ed6;
  --shadow:        0 1px 2px rgba(18, 18, 18, .05);
  --shadow-pop:    0 10px 30px rgba(18, 18, 18, .13);
  --scrollbar:     #cfcfcf;
  --accent-glow:   rgba(159, 244, 101, .35);
  --overlay:       rgba(18, 18, 18, .40);
  --series-0:      var(--acq-series-light-0);
  --series-1:      var(--acq-series-light-1);
  --series-2:      var(--acq-series-light-2);
  --series-3:      var(--acq-series-light-3);
  --series-4:      var(--acq-series-light-4);
  --series-5:      var(--acq-series-light-5);
  --series-6:      var(--acq-series-light-6);
  --series-7:      var(--acq-series-light-7);
  --series-8:      var(--acq-series-light-8);
  --series-9:      var(--acq-series-light-9);
  --series-10:     var(--acq-series-light-10);
  --series-11:     var(--acq-series-light-11);
  --series-12:     var(--acq-series-light-12);
  --series-13:     var(--acq-series-light-13);
  --series-14:     var(--acq-series-light-14);
  --series-15:     var(--acq-series-light-15);
  --chart-grid:    var(--acq-grey-300);
  --chart-axis:    var(--text-faint);
}

/* ---------- Touch-sizing Tier-2 remap (≤ md) ----------
 * Same mechanism as the deferred data-density axis (RFC §4.7) —
 * a viewport breakpoint relaxing the spacing scale so component
 * rules (added in C2) hit the WCAG 2.5.5 44px target automatically. */
@media (max-width: 768px) {
  :root {
    --sp-2: 10px;
    --sp-3: 14px;
  }
}