/* Connect+ Dashboard Editor - design tokens.
   Source of truth: design handoff README theme table + prototype THEMES/PALETTES
   constants ("Connect+ Dashboard Editor.dc.html" ~line 1250-1290).
   NOTE: these values are duplicated (deliberately, kept in sync manually) in
   js/theme.js - if you change a hex here, change it there too. */

/* ---- Shared scale (theme-independent) ------------------------------------
   Mirrors the Service Delivery Platform design system: 13px base, 12px
   controls, 11px sentence-case labels, hairline borders, flat surfaces. Components
   take sizes/radii from here so a screen never invents its own. */
:root {
  --fs-2xs: 10.5px; --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px;
  --fs-lg: 15px; --fs-xl: 18px; --fs-2xl: 22px;
  --r-sm: 6px; --r-md: 8px; --r-lg: 8px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
  --ctl-h: 28px;            /* every button / input / select */
  --rail-w: 48px;
  --rail-w-open: 208px;
  --shadow-pop: 0 12px 40px rgba(0, 0, 0, .55);
  /* Shell: the frame is the page colour, the canvas is an inset rounded surface. */
  --frame: var(--bg);
  --r-canvas: 12px;
  --canvas-gap: 8px;
  --r-pill: 9999px;
  --indigo: #5e69d1;        /* selection and primary focus */
  --row-hover: color-mix(in srgb, var(--tx) 5%, transparent);
  --pill-active: var(--sf2);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --t-out: .15s;
  /* Status tones: tint + line + ink derived from the live theme colours, so a
     tone is a single decision per status and follows every theme. */
  /* Text-safe variants of accent/amber/red; theme.js recomputes these per theme
     and palette to clear 4.7:1. Use for text, keep --ac/--amb/--red for fills. */
  --ac-on: var(--acFg);  /* text on an --ac fill; theme.js picks the better of dark/white */
  --ac-ink: var(--ac);
  --amb-ink: var(--amb);
  --red-ink: var(--red);
  /* Healthy/on is a status, not a brand colour: it stays green whatever the accent is,
     so a red or blue brand never makes a healthy number look like an alarm. */
  --ok: #22C55E;
  --ok-ink: var(--ok);
  --ok-bg: color-mix(in srgb, var(--ok) 13%, transparent);
  --ok-ln: color-mix(in srgb, var(--ok) 38%, transparent);
  --warn-bg: color-mix(in srgb, var(--amb) 13%, transparent);
  --warn-ln: color-mix(in srgb, var(--amb) 40%, transparent);
  --bad-bg: color-mix(in srgb, var(--red) 13%, transparent);
  --bad-ln: color-mix(in srgb, var(--red) 40%, transparent);
}

/* Default (no attribute) = Dark, the Centra look, so the page is never unthemed.
   The built-in themes are Dark, Light and High contrast; anything else a client
   wants is their own custom theme (js/theme.js), set inline from their tenant. */
:root,
:root[data-theme="centra"] {
  --bg: #0E0F10;
  --sf: #141516;
  --sf2: #1D1F21;
  --ln: rgba(255, 255, 255, .1);
  --tx: #F2F4F5;
  --tx2: #A9B0B5;
  --ac: #22C55E;
  --acT: rgba(34, 197, 94, .14);
  --acFg: #04140A;
  --amb: #FFB224;
  --red: #FF5757;
}

:root[data-theme="light"] {
  --bg: #F1F4F3;
  --sf: #FFFFFF;
  --sf2: #EAF0ED;
  --ln: rgba(12, 24, 18, .12);
  --tx: #101D17;
  --tx2: #5C6E67;
  --ac: #17A303;
  --acT: rgba(23, 163, 3, .11);
  --acFg: #FFFFFF;
  --ok: #17A303;
  --amb: #B77400;
  --red: #C92A2A;
}

:root[data-theme="contrast"] {
  --bg: #000000;
  --sf: #000000;
  --sf2: #141414;
  --ln: rgba(255, 255, 255, .35);
  --tx: #FFFFFF;
  --tx2: #CFDAD4;
  --ac: #52FF24;
  --ok: #52FF24;
  --acT: rgba(82, 255, 36, .18);
  --acFg: #000000;
  --amb: #FFC933;
  --red: #FF6B6B;
}

/* ---- Accent palettes ------------------------------------------------------
   Applied via data-palette on <html>; overrides the theme's --ac/--acT/--acFg.

   All 20, generated from `frontend/data/widget_catalog.json`'s
   `accent_palettes` - that file is design-owned and is the source of truth for
   these hex values. Keep this block and theme.js's PALETTES in step with it:
   the e2e test `every_catalog_palette_has_a_css_rule` fails when one is
   missing, which is what a hand-maintained copy of a 20-entry table needs. */

:root[data-palette="centra"] {
  --ac: #22C55E;
  --acT: rgba(34,197,94,.14);
  --acFg: #04140A;
}

:root[data-palette="green"] {
  --ac: #35D40E;
  --acT: rgba(53,212,14,.13);
  --acFg: #07120A;
}

:root[data-palette="emerald"] {
  --ac: #10B981;
  --acT: rgba(16,185,129,.14);
  --acFg: #04140D;
}

:root[data-palette="teal"] {
  --ac: #14B8A6;
  --acT: rgba(20,184,166,.14);
  --acFg: #04120F;
}

:root[data-palette="cyan"] {
  --ac: #06B6D4;
  --acT: rgba(6,182,212,.14);
  --acFg: #041619;
}

:root[data-palette="sky"] {
  --ac: #0EA5E9;
  --acT: rgba(14,165,233,.14);
  --acFg: #04131C;
}

:root[data-palette="blue"] {
  --ac: #3B82F6;
  --acT: rgba(59,130,246,.14);
  --acFg: #06101F;
}

:root[data-palette="indigo"] {
  --ac: #6366F1;
  --acT: rgba(99,102,241,.15);
  --acFg: #0A0B1E;
}

:root[data-palette="violet"] {
  --ac: #8B5CF6;
  --acT: rgba(139,92,246,.14);
  --acFg: #100A1F;
}

:root[data-palette="purple"] {
  --ac: #A855F7;
  --acT: rgba(168,85,247,.15);
  --acFg: #140A1F;
}

:root[data-palette="fuchsia"] {
  --ac: #D946EF;
  --acT: rgba(217,70,239,.15);
  --acFg: #1A0620;
}

:root[data-palette="pink"] {
  --ac: #EC4899;
  --acT: rgba(236,72,153,.15);
  --acFg: #1E0512;
}

:root[data-palette="rose"] {
  --ac: #F43F5E;
  --acT: rgba(244,63,94,.15);
  --acFg: #1E060B;
}

:root[data-palette="red"] {
  --ac: #EF4444;
  --acT: rgba(239,68,68,.15);
  --acFg: #1E0606;
}

:root[data-palette="orange"] {
  --ac: #F97316;
  --acT: rgba(249,115,22,.15);
  --acFg: #1C0C02;
}

:root[data-palette="amber"] {
  --ac: #F5A524;
  --acT: rgba(245,165,36,.15);
  --acFg: #1A1002;
}

:root[data-palette="yellow"] {
  --ac: #EAB308;
  --acT: rgba(234,179,8,.16);
  --acFg: #181203;
}

:root[data-palette="lime"] {
  --ac: #84CC16;
  --acT: rgba(132,204,22,.16);
  --acFg: #0E1503;
}

:root[data-palette="slate"] {
  --ac: #64748B;
  --acT: rgba(100,116,139,.16);
  --acFg: #0B0F16;
}

/* Light theme keeps the frame (header, rail, toolbar) dark with a white canvas
   on it, as in the Centra shell. Chrome re-scopes the text and surface tokens to
   their dark values so everything drawn on the frame stays legible. */
:root[data-theme="light"] { --frame: #0E0F10; }
:root[data-theme="light"] .rail,
:root[data-theme="light"] .subbar {
  --bg: #0E0F10; --sf: #1D1F21; --sf2: #26282B;
  --ln: rgba(255, 255, 255, .1);
  --tx: #F2F4F5; --tx2: #A9B0B5;
  --ac-ink: var(--ac); --ok: #22C55E; --ok-ink: #22C55E; --amb-ink: #FFB224; --red-ink: #FF7A7A;
  --acT: color-mix(in srgb, var(--ac) 16%, transparent);
  --row-hover: rgba(255, 255, 255, .06);
  color: var(--tx);
}