/* GENERATED from rebuild/kit/tokens.css by rebuild/tools/sync-kit.js. Edit the kit, then re-run; never edit this copy. */
/* AIMS rebuild — design tokens (v4 "Waterline").
   One file of variables. Every colour, size, radius, shadow and speed the components use comes from here,
   so a product switch or a theme switch is one attribute on <html>:
     <html data-product="ignite" data-theme="light">
   Products: apex · ignite · momentum · sentry. Themes: light (default) · dark.
   No component should hard-code a colour; if one needs a new value, add a token here. */

:root {
  color-scheme: light;     /* native controls follow the theme; dark sets its own below (design review 10/22) */
  /* ---------- type ---------- */
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-brand: 'Saira', 'Manrope', sans-serif;          /* product name under the logo only */
  --fs-xs: 11px; --fs-s: 12.5px; --fs-m: 13.5px; --fs-l: 15px; --fs-xl: 18px; --fs-h1: 26px;
  --fs-num: 24px;                                        /* headline numbers in strips */
  --fw-reg: 400; --fw-med: 500; --fw-semi: 600; --fw-bold: 700; --fw-x: 800;

  /* ---------- neutrals (light) ---------- */
  --ink: #0B1220;          /* text, primary buttons */
  --ink-2: #344054;        /* secondary text on glass */
  --muted: #475467;        /* labels — 4.5:1+ on glass */
  --faint: #5D6679;        /* hints, axis labels (≥ 12px only); 4.85–5.04:1 on every product's page (was #667085, 4.18–4.34 — review 10/22) */
  --hair: rgba(16,24,40,.08);   /* hairlines between cells/rows */
  --hair-2: rgba(16,24,40,.12); /* control borders */
  --well: rgba(16,24,40,.05);   /* inset tracks: pipes, segmented controls */
  --on-ink: #FFFFFF;

  /* ---------- status (text-safe on glass) ---------- */
  --ok: #166534;  --ok-bg: rgba(22,163,74,.12);  --ok-line: rgba(22,163,74,.28);   /* 5.5:1 on its own tint; #15803D was 3.8–4.4 (design review 10/22) */
  --warn: #92400E; --warn-bg: rgba(217,119,6,.12); --warn-line: rgba(217,119,6,.30);
  --bad: #B42318; --bad-bg: rgba(220,38,38,.08);  --bad-line: rgba(220,38,38,.25);
  --bad-ink: #B42318;   /* red words on their own red tint (a danger button): the same as --bad in light */
  --info: #1D4ED8; --info-bg: rgba(37,99,235,.09); --info-line: rgba(37,99,235,.26);
  --teal: #0F766E;   /* Ready to Invoice: a billing step, kept off the working statuses' colours (w9shell) */
  --navy: #1E3A8A;   /* Invoiced */
  --purple: #5B21B6;   /* the ticket's Awaiting holds (Jordan's CHANGE-LOG 9/29: purple, which is why Invoiced moved to navy); 9.4:1 on white */

  /* ---------- liquid (pipes, tubes, gauges) ---------- */
  --water-a: #60A5FA; --water-b: #1D4ED8;   /* default fill */
  --water-ok-a: #4ADE80; --water-ok-b: #15803D;
  --water-warn-a: #FCD34D; --water-warn-b: #D97706;
  --water-bad-a: #FCA5A5; --water-bad-b: #DC2626;

  /* ---------- glass ---------- */
  --glass-a: rgba(255,255,255,.80);
  --glass-b: rgba(255,255,255,.56);
  --glass-edge: rgba(255,255,255,.82);
  --glass-hi: rgba(255,255,255,.90);       /* active nav pill, selected rows */
  --surface: #FFFFFF; --surface-2: #F6F8FB;   /* solid sheets inside glass: wide-grid cells and their header band */
  --on-accent: #FFFFFF;                     /* text on a filled status or accent dot */
  --glass-blur: 20px;
  --glass-sat: 150%;
  /* the two round launchers (Aimsly bottom-right, the phone's menu circle bottom-left): the same frosted glass as the cards behind
     them, never a product colour (Jordan, 2026-11-03: "match the color of the circle to the glass color of the stuff behind it";
     was a grey glass of their own, 11/2). The menu icon takes the page's ink; her mark keeps its own colours and drop shadow. */
  --fab-glass: linear-gradient(150deg, var(--glass-a), var(--glass-b));
  --fab-edge: var(--glass-edge);
  --fab-ink: var(--ink);
  --shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(16,24,40,.04), 0 14px 32px -20px rgba(16,24,40,.24);
  --shadow-pop: 0 1px 2px rgba(16,24,40,.07), 0 10px 24px -10px rgba(16,24,40,.35);
  --shadow-btn: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 18px -10px rgba(11,18,32,.7);

  /* ---------- shape & space ---------- */
  --r-s: 8px; --r-m: 10px; --r-l: 14px; --r-xl: 18px; --r-2xl: 26px; --r-pill: 999px;
  --gap: 16px;             /* between top-level blocks — the one vertical rhythm, the house's 16 (2.x --stack) */
  --pad: 16px 18px;        /* inside a panel */
  --ctl: 36px;             /* desktop control height */
  --tap: 44px;             /* minimum touch target (phones, iPads) */
  --bar-h: calc(var(--ctl) + 10px);   /* one top-bar island's outer height: its control + padding + edge; every top-bar piece matches it */
  --sidebar: 236px; --rail: 72px;
  --logo-w: 150px;                                     /* the logo switcher at the top of the menu */
  --logo-ink: brightness(0); --logo-dim: .16; --logo-on: .78;   /* soft black letters; the open product strongest */
  --bp-touch: 1180px;      /* ≤ this: sidebar becomes a drawer (phones + touch iPads) */
  --bp-phone: 640px;       /* ≤ this: tables become cards */

  /* ---------- motion: five speeds, used everywhere ---------- */
  --t-quick: 160ms ease-out;                            /* hover, press, focus */
  --t-std: 240ms cubic-bezier(.2,.8,.2,1);              /* menus, fades, rows */
  --t-spring: 450ms cubic-bezier(.34,1.35,.5,1);        /* sliding markers, product switch, folding */
  --t-pour: 900ms cubic-bezier(.2,.8,.2,1);             /* pipes filling, saving */
  --t-wipe: 700ms cubic-bezier(.65,0,.35,1);            /* light <-> dark */

  /* ---------- charts (public/charts.js) ----------
     Categorical slots in a fixed order, never cycled: a 9th series folds into "Other". Checked with the dataviz validator on
     the glass in both themes (CVD ΔE ≥ 8 on adjacent slots, normal-vision ≥ 15); slots 3–5 sit under 3:1 on light glass,
     which every chart answers with its tooltips and the table beside it. Chrome is the kit's own ink and hairlines. */
  --chart-1: #2a78d6; --chart-2: #eb6834; --chart-3: #1baf7a; --chart-4: #eda100;
  --chart-5: #e87ba4; --chart-6: #008300; --chart-7: #4a3aa7; --chart-8: #e34948;
  --chart-ink: var(--ink-2); --chart-muted: var(--faint); --chart-grid: var(--hair); --chart-base: var(--hair-2); --chart-ring: var(--surface);

  /* ---------- product (overridden below) ---------- */
  --bg: #F2F3F6;
  --aura-1: #BAE6FD; --aura-2: #C7D2FE; --aura-3: #CCFBF1;
  --aura-o1: .6; --aura-o2: .5; --aura-o3: .5;
  --accent: #0284C7;       /* fills, focus, chart series */
  --accent-ink: #075985;   /* accent used as text — passes 4.5:1 */
}

/* ---------- the four products: each gets its own background ---------- */
[data-product="apex"] {
  --bg: #E3F3E8; --aura-1: #86EFAC; --aura-2: #D9F99D; --aura-3: #5EEAD4;
  --aura-o1: .8; --aura-o2: .7; --aura-o3: .45;
  --accent: #16A34A; --accent-ink: #166534;   /* text-safe green: #15803D was 4.4:1 on Apex's light field */
}
[data-product="ignite"] {
  --bg: #FBEBE8; --aura-1: #FCA5A5; --aura-2: #FDBA74; --aura-3: #F9A8D4;
  --aura-o1: .8; --aura-o2: .6; --aura-o3: .5;
  --accent: #E5484D; --accent-ink: #C2262E;
}
[data-product="momentum"] {
  --bg: #E6F1FB; --aura-1: #7DD3FC; --aura-2: #A5B4FC; --aura-3: #67E8F9;
  --aura-o1: .8; --aura-o2: .6; --aura-o3: .45;
  --accent: #0284C7; --accent-ink: #0369A1;
}
[data-product="sentry"] {
  --bg: #F3EAE0; --aura-1: #E3B48C; --aura-2: #FCD34D; --aura-3: #D6BFA8;
  --aura-o1: .85; --aura-o2: .45; --aura-o3: .6;
  --accent: #A86B3D; --accent-ink: #8A5428;
}

/* ---------- dark: same structure, deep tinted ground, smoked glass ---------- */
:root[data-theme="dark"] {   /* :root so it outranks 2.x's own :root[data-theme="dark"] block while the two load together */
  color-scheme: dark;      /* native controls (tick boxes, scrollbars, date pickers) follow the theme */
  --ink: #EEF2F7; --ink-2: #C9D2DF; --muted: #A3ADBD; --faint: #8B95A7;
  --hair: rgba(255,255,255,.08); --hair-2: rgba(255,255,255,.14); --well: rgba(255,255,255,.06);
  --on-ink: #0B1220;
  --logo-ink: brightness(0) invert(1); --logo-dim: .25; --logo-on: .92;   /* white logo on dark surfaces (brand rule) */
  --ok: #4ADE80; --ok-bg: rgba(74,222,128,.12); --ok-line: rgba(74,222,128,.35);
  --warn: #FBBF24; --warn-bg: rgba(251,191,36,.12); --warn-line: rgba(251,191,36,.35);
  --bad: #F87171; --bad-bg: rgba(248,113,113,.12); --bad-line: rgba(248,113,113,.35);
  --bad-ink: #FCA5A5;   /* …a step lighter in dark: --bad on its tint was 4.44:1 in a pop-up (B30, w11design S8); this is 7+ */
  --info: #93C5FD; --info-bg: rgba(147,197,253,.12); --info-line: rgba(147,197,253,.35);
  --teal: #5EEAD4; --navy: #A5B4FC; --purple: #C4B5FD;
  --glass-a: rgba(22,27,38,.78); --glass-b: rgba(14,18,26,.62); --glass-edge: rgba(255,255,255,.09);
  --glass-hi: rgba(255,255,255,.12);
  --surface: #161B26; --surface-2: #1B2130;
  --shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 40px -22px rgba(0,0,0,.8);
  --shadow-pop: 0 10px 28px -10px rgba(0,0,0,.7);
  --shadow-btn: inset 0 1px 0 rgba(0,0,0,.08), 0 8px 18px -10px rgba(0,0,0,.6);
  --bg: #0A0D13; --aura-o1: .22; --aura-o2: .16; --aura-o3: .14;
  --chart-1: #3987e5; --chart-2: #d95926; --chart-3: #199e70; --chart-4: #c98500;   /* the dark steps of the same hues */
  --chart-5: #d55181; --chart-6: #008300; --chart-7: #9085e9; --chart-8: #e66767;
}
[data-theme="dark"][data-product="apex"]     { --bg: #08110C; --accent-ink: #4ADE80; }
[data-theme="dark"][data-product="ignite"]   { --bg: #130A0B; --accent-ink: #FF8F8F; }
[data-theme="dark"][data-product="momentum"] { --bg: #08101A; --accent-ink: #7DD3FC; }
[data-theme="dark"][data-product="sentry"]   { --bg: #120E0A; --accent-ink: #E3B48C; }

/* ---------- print is paper: a dark screen prints on the light tokens (the frame's print rules make the page white) ---------- */
@media print {
  :root[data-theme="dark"] {
    color-scheme: light;
    --ink: #0B1220; --ink-2: #344054; --muted: #475467; --faint: #5D6679;
    --hair: rgba(16,24,40,.08); --hair-2: rgba(16,24,40,.12); --well: rgba(16,24,40,.05); --on-ink: #FFFFFF;
    --logo-ink: brightness(0); --logo-dim: .16; --logo-on: .78;
    --ok: #166534; --ok-bg: rgba(22,163,74,.12); --ok-line: rgba(22,163,74,.28);
    --warn: #92400E; --warn-bg: rgba(217,119,6,.12); --warn-line: rgba(217,119,6,.30);
    --bad: #B42318; --bad-bg: rgba(220,38,38,.08); --bad-line: rgba(220,38,38,.25);
    --bad-ink: #B42318;
    --info: #1D4ED8; --info-bg: rgba(37,99,235,.09); --info-line: rgba(37,99,235,.26);
    --teal: #0F766E; --navy: #1E3A8A; --purple: #5B21B6;
    --glass-a: rgba(255,255,255,.80); --glass-b: rgba(255,255,255,.56); --glass-edge: rgba(255,255,255,.82); --glass-hi: rgba(255,255,255,.90);
    --surface: #FFFFFF; --surface-2: #F6F8FB; --bg: #FFFFFF;
    --chart-1: #2a78d6; --chart-2: #eb6834; --chart-3: #1baf7a; --chart-4: #eda100;
    --chart-5: #e87ba4; --chart-6: #008300; --chart-7: #4a3aa7; --chart-8: #e34948;
  }
  :root[data-theme="dark"][data-product="apex"] { --accent-ink: #166534; }
  :root[data-theme="dark"][data-product="ignite"] { --accent-ink: #C2262E; }
  :root[data-theme="dark"][data-product="momentum"] { --accent-ink: #0369A1; }
  :root[data-theme="dark"][data-product="sentry"] { --accent-ink: #8A5428; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-quick: 1ms linear; --t-std: 1ms linear; --t-spring: 1ms linear; --t-pour: 1ms linear; --t-wipe: 1ms linear; }
}