/* ═══════════════════════════════════════════════
   CARNOT.AI — DESIGN TOKENS
   Re-themed to match design-reference/dashboard-karnot-theme-preview.html
   (its [data-theme="light"] palette, since this app is light-only).
   Core brand colours are now split pairs: the bare token (--blue,
   --green, --red, --orange, --purple) is the SOFT/pastel value for
   backgrounds, dots, gradients; a new "-ink" token is the darker,
   contrast-safe value for text. Usage sites are corrected to the
   right one of the two in the base/components/features passes that
   follow this one — this file only defines the tokens.
   --teal and --pink have no equivalent in the reference (it only
   defines blue/red/green/amber/purple) — their pastel/ink pairs
   below are derived to sit visually within the same family rather
   than left on the old vivid iOS values.
═══════════════════════════════════════════════ */
:root {
  /* ── Reference-name aliases ──────────────────────────
     So CSS copied from the design reference (dashboard-karnot-
     theme-preview.html) can be pasted near-verbatim without a
     find/replace pass. These are pure aliases — the canonical
     values live on the tokens they point to. */
  --bg-soft: var(--surface2);
  --panel: var(--glass-card);
  --panel-solid: var(--surface);
  --panel-60: rgba(255,255,255,.5);
  --ink: var(--text);
  --ink-70: var(--text-sec);
  --muted: var(--text-muted);
  --line: var(--border);
  --glass-blur: 18px; /* raw px, for recipes written as blur(var(--glass-blur)) saturate(160%) */

  /* ── Gold accent identity (reference's --gold/--gold-soft/--gold-deep) ──
     Distinct from --accent: --accent stays the existing brand-blue-ink
     used for focus rings etc.; --gold is the reference's separate
     navigation/label accent (active nav, section-label bar, eyebrow
     text, metric-card hover border). */
  --gold:#d4a24d;
  --gold-soft:rgba(212,162,77,.16);
  --gold-deep:#b3843a;
  --gold-ink:#0b0d10; /* constant dark text-on-gold — not theme-flipped, since --gold itself doesn't flip either */

  /* ── Brand colours — soft (backgrounds/dots/gradients) ── */
  --blue:#83a2db;
  --green:#7fb893;
  --purple:#9c8fd6;
  --orange:#d4a24d;
  --red:#d97a7a;
  --teal:#6fa8a8;    /* derived — reference has no teal */
  --pink:#c98aa8;    /* derived — reference has no pink */

  /* ── Brand colours — soft tint (rgba, for tinted backgrounds) ── */
  --blue-soft:rgba(131,162,219,.16);
  --green-soft:rgba(127,184,147,.16);
  --purple-soft:rgba(156,143,214,.16);
  --orange-soft:rgba(212,162,77,.18);
  --red-soft:rgba(217,122,122,.16);
  --teal-soft:rgba(111,168,168,.16);
  --pink-soft:rgba(201,138,168,.16);

  /* ── Brand colours — ink (text-safe, darker) ── */
  --blue-ink:#2f4d82;
  --green-ink:#2c6b45;
  --purple-ink:#4c3f96;
  --orange-ink:#8a5a1f;
  --red-ink:#8a3232;
  --teal-ink:#2d5a5a;
  --pink-ink:#7a3a56;

  /* Action accent (New Order button, active segmented control, live
     switch) — near-black per the reference's light theme, distinct
     from --gold (the navigation/label identity accent). */
  --accent:#10141a; --accent-ink:#ffffff; --accent-d:#000000; --cyan:var(--teal); --cyan-d:var(--teal-ink);
  /* Ink-to-ink (not soft-to-soft): these gradients fill avatar/icon
     chips that carry white text/initials on top, so they need the
     darker, contrast-safe stops, not the pastel background tier. */
  --ga-purple:linear-gradient(135deg,var(--blue-ink),var(--purple-ink));
  --ga-cyan:linear-gradient(135deg,var(--teal-ink),#1f4040);
  --ga-pink:linear-gradient(135deg,var(--pink-ink),#5c2740);
  --ga-green:linear-gradient(135deg,var(--green-ink),#1c4a30);
  --ga-orange:linear-gradient(135deg,var(--orange-ink),#5e3c14);
  --ga-red:linear-gradient(135deg,var(--red-ink),#5c1f1f);
  --ga-blue:linear-gradient(135deg,var(--blue-ink),#1f3557);
  --ga-multi:linear-gradient(135deg,var(--blue-ink),var(--purple-ink),var(--green-ink));
  --ga-card:linear-gradient(135deg,#ffffff,#f9f9f9);

  /* ── Surfaces ── */
  --bg:#e7e8ed;
  --surface:#ffffff;
  --surface2:#eef0f4;

  /* kept for JS compatibility — now real glass values (was neutral/opaque placeholders) */
  --bg-gradient:#e7e8ed;
  --glass-dark:rgba(255,255,255,.68);
  --glass-dark-hover:rgba(255,255,255,.78);
  --glass-card:rgba(255,255,255,.68);
  --glass-card-hover:rgba(255,255,255,.78);
  --glass-card-bright:rgba(255,255,255,.85);
  --glass-input:rgba(255,255,255,.55);
  --blur:blur(18px) saturate(160%);
  --blur-sm:blur(10px) saturate(160%);
  --blur-lg:blur(18px) saturate(160%);

  /* ── Borders ── */
  --border:rgba(16,20,26,.09);
  --border2:rgba(16,20,26,.05);
  --glass-border:rgba(255,255,255,.55);
  --glass-border-card:rgba(255,255,255,.55);
  --glass-border-bright:rgba(255,255,255,.75);

  /* ── Text ── */
  --text:#10141a;
  --text-sec:rgba(16,20,26,.68);
  --text-muted:#8b8e98;
  --tx-primary:#10141a;
  --tx-secondary:rgba(16,20,26,.68);
  --tx-tertiary:#8b8e98;
  --tx-muted:#b5b8c0; /* derived — a 4th, lighter tier; reference only defines one --muted */

  /* ── Type scale (font family) ── */
  --font:'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --font-serif:'Playfair Display', Georgia, 'Times New Roman', serif; /* new token — page titles & logo only */
  --mono:'JetBrains Mono', monospace;

  /* ── Spacing / layout constants ── */
  --sw:236px; --sw-collapsed:70px; --th:58px; --r:20px; --rs:18px; --rx:14px;
  --t:0.15s ease;

  /* ── Shadows ── */
  --shadow-card:0 2px 14px rgba(16,20,26,.06);
  --shadow-card-hover:0 14px 34px -14px rgba(16,20,26,.18);
  --shadow-sm:0 2px 14px rgba(16,20,26,.06);

  /* ── Neutral ink-alpha scale (hairlines, dividers, hover tints) ──
     Color-hoisting pass: every literal rgba(0,0,0,X) found in
     base/components/features.css was a plain dark hairline/overlay —
     harmonized onto the reference's ink RGB (16,20,26) instead of
     pure black, same alpha, so it reads as "the same greyscale
     system" as --border/--border2/--text-sec below (which already
     used 16,20,26 at .09/.05/.68). Two of these alphas already had
     names (--border=.09, --border2=.05, --text-sec=.68); the rest
     are new. */
  --ink-a04:rgba(16,20,26,.04);
  --ink-a06:rgba(16,20,26,.06);
  --ink-a07:rgba(16,20,26,.07);
  --ink-a08:rgba(16,20,26,.08);
  --ink-a10:rgba(16,20,26,.10);
  --ink-a12:rgba(16,20,26,.12);
  --ink-a14:rgba(16,20,26,.14);
  --ink-a15:rgba(16,20,26,.15);
  --ink-a16:rgba(16,20,26,.16);
  --ink-a18:rgba(16,20,26,.18);
  --ink-a20:rgba(16,20,26,.20);
  --ink-a24:rgba(16,20,26,.24);
  --ink-a25:rgba(16,20,26,.25);
  --ink-a35:rgba(16,20,26,.35);
  --ink-a60:rgba(16,20,26,.60);

  /* ── Glass-state alpha scale (white-based hover/border overlays on
     translucent glass panels — distinct from the ink scale above,
     since these need to stay white to "brighten" glass, not darken
     a solid surface) ── */
  --glass-a04:rgba(255,255,255,.04);
  --glass-a05:rgba(255,255,255,.05);
  --glass-a06:rgba(255,255,255,.06);
  --glass-a08:rgba(255,255,255,.08);
  --glass-a10:rgba(255,255,255,.10);
  --glass-a12:rgba(255,255,255,.12);
  --glass-a14:rgba(255,255,255,.14);
  --glass-a16:rgba(255,255,255,.16);

  /* ── Glow shadows (brand-ink / gold, at the exact alphas already in use) ── */
  --blue-ink-glow-a28:rgba(47,77,130,.28);
  --blue-ink-glow-a30:rgba(47,77,130,.30);
  --blue-ink-glow-a35:rgba(47,77,130,.35);
  --blue-ink-glow-a40:rgba(47,77,130,.40);
  --purple-ink-glow-a30:rgba(76,63,150,.30);
  --purple-ink-glow-a50:rgba(76,63,150,.50);
  --gold-glow-a15:rgba(212,162,77,.15);

  /* ── One-off legacy surface tint (the #modalBg backdrop; kept at
     its exact original value, just tokenized) ── */
  --modal-scrim-legacy:rgba(229,229,234,.85);

  /* ═══════════════════════════════════════════════
     DESIGN TOKENS — source of truth (purpose-named)
     Additive only: every value below is copied exactly
     from existing usage in this file. Nothing that already
     worked was changed. Near-duplicate values are kept as
     separate tokens (see the "-alt" suffix below) rather
     than merged — that merge is a design call, not made here.
  ═══════════════════════════════════════════════ */

  /* ── Surfaces & text (iOS system palette, aliases of the vars above) ── */
  --color-surface: var(--surface);
  --color-surface-2: var(--surface2);
  --color-canvas: var(--bg);
  --color-border: var(--border);
  --color-border-soft: var(--border2);
  --color-text: var(--text);
  --color-text-secondary: var(--text-sec);
  --color-text-muted: var(--text-muted);

  /* ── Semantic colours (aliases) — soft/pastel role, same as the bare token ── */
  --color-brand: var(--blue);
  --color-success: var(--green);
  --color-danger: var(--red);
  --color-warning: var(--orange);
  --color-accent-purple: var(--purple);
  --color-accent-teal: var(--teal);
  --color-accent-pink: var(--pink);
  --color-white: #ffffff; /* #fff and #ffffff both used for this value throughout the file — flagged, not merged */

  /* ── Semantic colours — soft tint (rgba) aliases ── */
  --color-brand-soft: var(--blue-soft);
  --color-success-soft: var(--green-soft);
  --color-danger-soft: var(--red-soft);
  --color-warning-soft: var(--orange-soft);
  --color-accent-purple-soft: var(--purple-soft);
  --color-accent-teal-soft: var(--teal-soft);
  --color-accent-pink-soft: var(--pink-soft);

  /* ── Semantic colours — ink (text-safe) aliases ── */
  --color-brand-ink: var(--blue-ink);
  --color-success-ink: var(--green-ink);
  --color-danger-ink: var(--red-ink);
  --color-warning-ink: var(--orange-ink);
  --color-accent-purple-ink: var(--purple-ink);
  --color-accent-teal-ink: var(--teal-ink);
  --color-accent-pink-ink: var(--pink-ink);

  /* -- "Alt" palette: a second, Tailwind-style system used in the
     vendor-detail / vendor-comparison / pipeline-detail panels.
     Kept fully separate from the iOS tokens above — same purpose,
     different literal value, flagged for you to decide on merging. -- */
  --color-brand-alt: #2563eb;
  --color-brand-alt-2: #3b82f6;   /* also written #3B82F6 in some places — same value, different case */
  --color-brand-alt-3: #6366f1;
  --color-brand-alt-tint: #60a5fa;
  --color-brand-alt-tint-2: #dbeafe;
  --color-brand-alt-tint-3: #eff6ff;
  --color-success-alt: #22c55e;   /* also written #22C55E — same value, different case */
  --color-success-alt-strong: #16a34a;
  --color-success-alt-tint: #34d399;
  --color-success-alt-tint-2: #dcfce7;
  --color-danger-alt: #ef4444;    /* also written #EF4444 — same value, different case */
  --color-danger-alt-strong: #dc2626;
  --color-danger-alt-tint: #f87171;
  --color-danger-alt-tint-2: #fee2e2;
  --color-warning-alt: #f59e0b;   /* also written #F59E0B — same value, different case */
  --color-warning-alt-strong: #d97706;
  --color-warning-alt-tint: #fef3c7;
  --color-orange-alt: #fb923c;
  --color-orange-alt-2: #f97316;
  --color-amber-alt: #eab308;
  --color-purple-alt: #8b5cf6;    /* also written #8B5CF6 — same value, different case */
  --color-purple-alt-2: #a78bfa;
  --color-cyan-alt: #22d3ee;

  /* -- "Alt" grays / surfaces (same source as above) -- */
  --color-text-alt: #111827;
  --color-text-alt-2: #333333;
  --color-text-alt-3: #999999;
  --color-text-alt-secondary: #6b7280;
  --color-text-alt-tertiary: #9ca3af;
  --color-text-alt-body: #374151;
  --color-border-alt: #e5e7eb;
  --color-border-alt-2: #f3f4f6;
  --color-border-alt-3: #f0f0f0;
  --color-surface-alt: #f9fafb;
  --color-surface-alt-2: #fafafa;
  --color-surface-alt-3: #f5f5f5;
  --color-surface-alt-4: #f8f8fc;
  --color-surface-alt-5: #f9f9fb;
  --color-surface-alt-6: #f9f9f9;
  --color-text-ios-alt: #8e8e93; /* close to --text-sec/#6e6e73 but a distinct value — flagged */

  /* -- "Alt" palette wave 2: additional one-off colors found in JS-generated
     chart legends / status maps that were missed in the first audit pass -- */
  --color-brand-alt-strong: #1d4ed8;
  --color-blue-alt-light: #93c5fd;
  --color-slate-alt: #64748b;
  --color-slate-alt-light: #e2e8f0;
  --color-slate-alt-lighter: #f1f5f9;
  --color-sky-alt: #0ea5e9;
  --color-indigo-ios: #5856d6;
  --color-indigo-alt: #4f46e5;
  --color-indigo-alt-2: #818cf8;
  --color-green-ios-alt: #30d158;
  --color-green-alt-light: #86efac;
  --color-green-alt-strong: #1a7a35;
  --color-teal-alt: #14b8a6;
  --color-teal-alt-2: #2dd4bf;
  --color-teal-alt-strong: #0d9488;
  --color-teal-alt-tint: #ccfbf1;
  --color-red-alt-light: #fca5a5;
  --color-amber-alt-light: #fcd34d;
  --color-gray-alt-light: #d1d5db;
  --color-violet-alt-tint: #ede9fe;
  --color-pink-alt-tint: #fce7f3;
  --color-pink-alt-strong: #db2777;
  --color-orange-alt-3: #e55a2b;
  --color-orange-alt-4: #e8501a;
  --color-orange-alt-5: #ff6b00;
  --color-surface-alt-7: #fafaf8;
  --color-danger-tint-white: #fff8f8;
  --color-border-alt-4: #e8e8f0;
  --color-text-alt-4: #ccc;
  --color-text-alt-5: #bbb;
  --color-gray-fallback: #888;
  --color-white-a4: #fff4; /* 4-digit hex w/ alpha, used once for a box-shadow ring */
  --color-pink-alt: #f472b6;
  --color-brand-alt-a33: #2563eb33; /* 8-digit hex w/ alpha, chart fill */
  --color-brand-alt-a15: #2563eb15; /* 8-digit hex w/ alpha, chart fill */
  --color-success-a60: #34c75960; /* 8-digit hex w/ alpha */

  /* ── Type scale (exact px sizes already in use) ── */
  --text-8: 8px; --text-9: 9px; --text-10: 10px; --text-11: 11px;
  --text-12: 12px; --text-13: 13px; --text-14: 14px; --text-15: 15px;
  --text-16: 16px; --text-17: 17px; --text-18: 18px; --text-20: 20px;
  --text-22: 22px; --text-24: 24px; --text-26: 26px; --text-28: 28px;
  --text-32: 32px; --text-36: 36px; --text-42: 42px; --text-52: 52px;

  /* ── Spacing scale (exact px values already in use for padding/margin/gap) ── */
  --space-1: 1px; --space-2: 2px; --space-3: 3px; --space-4: 4px;
  --space-5: 5px; --space-6: 6px; --space-7: 7px; --space-8: 8px;
  --space-9: 9px; --space-10: 10px; --space-11: 11px; --space-12: 12px;
  --space-13: 13px; --space-14: 14px; --space-15: 15px; --space-16: 16px; --space-18: 18px;
  --space-20: 20px; --space-22: 22px; --space-24: 24px; --space-28: 28px;
  --space-30: 30px; --space-32: 32px; --space-40: 40px; --space-48: 48px;
  --space-60: 60px;

  /* ── Border radii (existing --r/--rs/--rx plus other exact values in use) ── */
  --radius-2: 2px; --radius-3: 3px; --radius-4: 4px; --radius-5: 5px;
  --radius-6: 6px; --radius-7: 7px; --radius-8: 8px; --radius-9: 9px;
  --radius-10: 10px; --radius-11: 11px; --radius-12: 12px; --radius-14: 14px;
  --radius-15: 15px; --radius-16: 16px; --radius-18: 18px; --radius-20: 20px;
  --radius-22: 22px; --radius-pill: 100px;

  /* -- Shadows (existing tokens are --shadow-card / --shadow-card-hover / --shadow-sm above) -- */
}

/* ═══════════════════════════════════════════════
   DARK MODE — the reference's own dark palette (its bare :root,
   before the [data-theme="light"] override — this app defaults to
   light, so dark is the override here instead).
   The "-ink" tokens flip meaning: in light mode they're the darker,
   text-safe variant; in dark mode the reference's own dark palette
   makes them the LIGHTER, text-safe-on-dark variant instead. That's
   correct for the majority of "-ink" usages (labels, links, colored
   values). A few places use an "-ink" token as a SOLID BUTTON FILL
   with white text on top (.ai-send, .chat-msg.user .chat-bubble) —
   those will read a bit washed-out in dark mode (light-blue fill,
   white text) since fixing them needs a per-component text-color
   swap, not just a token value. Flagging rather than silently
   leaving it — everything else here is a full pass.
═══════════════════════════════════════════════ */
:root[data-theme="dark"]{
  --bg:#0b0d10;
  --surface:#181b20;
  --surface2:#14171c;
  --bg-gradient:#0b0d10;

  --glass-dark:rgba(24,27,32,.66);
  --glass-dark-hover:rgba(24,27,32,.78);
  --glass-card:rgba(24,27,32,.66);
  --glass-card-hover:rgba(24,27,32,.78);
  --glass-card-bright:rgba(24,27,32,.85);
  --panel-60:rgba(24,27,32,.46);
  --glass-input:rgba(255,255,255,.08);

  --border:rgba(243,240,233,.10);
  --border2:rgba(243,240,233,.06);
  --glass-border:rgba(243,240,233,.10);
  --glass-border-card:rgba(243,240,233,.10);
  --glass-border-bright:rgba(243,240,233,.20);

  --text:#f3f0e9;
  --text-sec:rgba(243,240,233,.70);
  --text-muted:#8a8d95;
  --tx-primary:#f3f0e9;
  --tx-secondary:rgba(243,240,233,.70);
  --tx-tertiary:#8a8d95;
  --tx-muted:#6b6e76;

  --blue-ink:#a9c1ea;
  --red-ink:#f0a3a3;
  --green-ink:#a3d4b5;
  --orange-ink:#e8c07f;
  --purple-ink:#c2b8ea;
  --teal-ink:#8fc6c6;
  --pink-ink:#e0a8c2;

  --accent:#d4a24d;
  --accent-ink:#0b0d10;
  --accent-d:#e8bc72;

  --gold:#d4a24d;
  --gold-soft:rgba(212,162,77,.18);
  --gold-deep:#e8c07f;

  --shadow-card:0 2px 14px rgba(0,0,0,.35);
  --shadow-card-hover:0 14px 34px -14px rgba(0,0,0,.55);
  --shadow-sm:0 2px 14px rgba(0,0,0,.35);

  /* ── "Alt" palette, made theme-aware ──────────────────────
     This was a fixed hex palette (never touched in earlier passes,
     since it was scoped to the vendor-detail/comparison modals only)
     that turned out to be used pervasively across feature pages
     (tables, cards, KPI values) for ordinary text/surfaces/borders.
     With no dark override, --color-text-alt (#111827, near-black)
     stayed near-black in dark mode — that's the invisible-text bug.
     Chart/status alt colours (--color-brand-alt, --color-success-alt,
     etc.) are left alone; only the text/surface/border family below
     — the ones actually responsible for readability — get overrides. */
  --color-text-alt:#e8e8ec;
  --color-text-alt-2:#d4d4d8;
  --color-text-alt-3:#a1a1aa;
  --color-text-alt-secondary:#9ca3af;
  --color-text-alt-tertiary:#7d8590;
  --color-text-alt-body:#cbd0d8;
  --color-text-ios-alt:#9a9aa2;
  --color-text-alt-4:#6b7280;
  --color-text-alt-5:#71767f;
  --color-gray-fallback:#9ca3af;
  --color-border-alt:rgba(255,255,255,.12);
  --color-border-alt-2:rgba(255,255,255,.08);
  --color-border-alt-3:rgba(255,255,255,.08);
  --color-border-alt-4:rgba(255,255,255,.10);
  --color-surface-alt:#1c2027;
  --color-surface-alt-2:#1c2027;
  --color-surface-alt-3:#1c2027;
  --color-surface-alt-4:#1c2027;
  --color-surface-alt-5:#1c2027;
  --color-surface-alt-6:#1c2027;
  --color-surface-alt-7:#1c2027;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0b0d10; --surface:#181b20; --surface2:#14171c; --bg-gradient:#0b0d10;
    --glass-dark:rgba(24,27,32,.66); --glass-dark-hover:rgba(24,27,32,.78);
    --glass-card:rgba(24,27,32,.66); --glass-card-hover:rgba(24,27,32,.78); --glass-card-bright:rgba(24,27,32,.85);
    --panel-60:rgba(24,27,32,.46);
    --glass-input:rgba(255,255,255,.08);
    --border:rgba(243,240,233,.10); --border2:rgba(243,240,233,.06);
    --glass-border:rgba(243,240,233,.10); --glass-border-card:rgba(243,240,233,.10); --glass-border-bright:rgba(243,240,233,.20);
    --text:#f3f0e9; --text-sec:rgba(243,240,233,.70); --text-muted:#8a8d95;
    --tx-primary:#f3f0e9; --tx-secondary:rgba(243,240,233,.70); --tx-tertiary:#8a8d95; --tx-muted:#6b6e76;
    --blue-ink:#a9c1ea; --red-ink:#f0a3a3; --green-ink:#a3d4b5; --orange-ink:#e8c07f; --purple-ink:#c2b8ea;
    --teal-ink:#8fc6c6; --pink-ink:#e0a8c2;
    --accent:#d4a24d; --accent-ink:#0b0d10; --accent-d:#e8bc72;
    --gold:#d4a24d; --gold-soft:rgba(212,162,77,.18); --gold-deep:#e8c07f;
    --shadow-card:0 2px 14px rgba(0,0,0,.35); --shadow-card-hover:0 14px 34px -14px rgba(0,0,0,.55); --shadow-sm:0 2px 14px rgba(0,0,0,.35);
    --color-text-alt:#e8e8ec; --color-text-alt-2:#d4d4d8; --color-text-alt-3:#a1a1aa;
    --color-text-alt-secondary:#9ca3af; --color-text-alt-tertiary:#7d8590; --color-text-alt-body:#cbd0d8;
    --color-text-ios-alt:#9a9aa2; --color-text-alt-4:#6b7280; --color-text-alt-5:#71767f; --color-gray-fallback:#9ca3af;
    --color-border-alt:rgba(255,255,255,.12); --color-border-alt-2:rgba(255,255,255,.08);
    --color-border-alt-3:rgba(255,255,255,.08); --color-border-alt-4:rgba(255,255,255,.10);
    --color-surface-alt:#1c2027; --color-surface-alt-2:#1c2027; --color-surface-alt-3:#1c2027;
    --color-surface-alt-4:#1c2027; --color-surface-alt-5:#1c2027; --color-surface-alt-6:#1c2027; --color-surface-alt-7:#1c2027;
  }
}