/* Datanomics — Color tokens
   Source: Datanomics_Color_Palette_Analysis.md (brochure-derived brand palette).
   Blue-family primary (navy → blue → bright blue → cyan), teal secondary,
   gold/orange CTA accent, dedicated neutral + semantic scales. */
:root {
  /* ── Brand accents ── */
  --navy: #042358;          /* Primary-900 — headings, sidebar, dark hero, CTA base */
  --navy-deep: #021634;     /* Deeper navy — canvas behind hero */
  --blue: #165089;          /* Primary-800 — PRIMARY accent (buttons, card header) */
  --blue-bright: #1982CA;   /* Primary-700 — highlight, dashboard */
  --cyan: #6BB2E9;          /* Cyan — hover, gradient */
  --cyan-bright: #59D6E6;   /* Logo cyan */
  --teal: #1C9AA5;          /* Brand Teal — secondary accent (logo, keyword) */
  --gold: #F6B43A;          /* Gold — value accent / highlight */
  --yellow: #F6B43A;        /* alias of gold (value accent, underline) */
  --crimson: #B64533;       /* Danger red (brochure) */
  --silver: #C9D1D9;

  /* Primary blue scale */
  --blue-900: #042358;
  --blue-800: #165089;
  --blue-700: #1982CA;
  --blue-600: #2F9DE2;
  --blue-500: #59BDF0;
  --blue-100: #C3DBF0;
  --blue-50:  #DCE9F6;      /* Light Blue — card background / soft fill */
  --blue-hover: #124470;
  --blue-active: #0D3459;
  --navy-hover: #0C1D3A;    /* dark-variant button hover (reference Button.jsx) */
  --gold-hover: #E0A815;    /* value-variant button hover */
  --danger-hover: #A82929;  /* danger button hover */

  /* Teal scale */
  --teal-700: #0F7D8D;
  --teal-600: #1C9AA5;
  --teal-500: #32B9C4;
  --teal-400: #6FD6DD;
  --teal-100: #C6E9EC;
  --teal-50:  #E4F5F6;
  --teal-bright: var(--teal-400);

  /* Accent tints */
  --cyan-50:  #E7F3FB;
  --gold-50:  #FEF3E0;
  --yellow-50: #FEF3E0;
  --crimson-50: #F7E9E6;

  /* ── Neutrals (brochure gray scale) ── */
  --ink: #1B2333;           /* Gray-900 — body/strong text */
  --grey: #516174;          /* Gray-700 — secondary text */
  --grey-muted: #8A97A8;    /* Gray-500 — muted / placeholder */
  --grey-line: #B9CCE2;     /* Border, divider */
  --paper: #F8FAFC;         /* Gray-100 — page / surface canvas */
  --soft-white: #F8FAFC;    /* Text on dark */
  --white: #FFFFFF;

  --slate-50:  #F8FAFC;
  --slate-100: #EDF2F8;
  --slate-200: #DCE9F6;
  --slate-300: #B9CCE2;
  --slate-400: #8A97A8;
  --slate-500: #6E7D90;
  --slate-600: #516174;
  --slate-700: #34404F;
  --slate-800: #1B2333;
  --slate-900: #0E1520;

  /* ── Semantic — light surfaces ── */
  --bg-canvas: var(--paper);
  --bg-surface: var(--white);
  --bg-subtle: var(--slate-100);
  --bg-inset: rgba(4, 35, 88, 0.04);
  --bg-hover: #EDF2F8;

  --text-strong: var(--navy);
  --text-body: var(--ink);
  --text-muted: var(--grey);
  --text-subtle: var(--grey-muted);
  --text-inverse: var(--white);
  --text-link: var(--blue);
  --text-link-hover: var(--blue-active);

  --border-subtle: var(--grey-line);
  --border-strong: #9DB4D0;
  /* Border of an unchecked control glyph (tick box, radio). --border-strong #9DB4D0 measures
     2.14:1 on --bg-surface, below the WCAG 1.4.11 non-text minimum of 3:1; --slate-500 measures
     4.22:1 light / 4.07:1 dark. Use this token — not --border-strong — for control outlines. */
  --border-control: var(--slate-500);
  --border-focus: var(--blue);

  --accent: var(--blue);              /* PRIMARY = brand blue #165089 */
  --accent-contrast: var(--white);
  --accent-hover: var(--blue-hover);
  --accent-active: var(--blue-active);
  --accent-soft: var(--blue-50);

  --accent-2: var(--teal);            /* SECONDARY = teal */
  --accent-2-soft: var(--teal-50);
  --accent-3: var(--blue-bright);     /* TERTIARY = bright blue (highlight) */

  /* ── Context colors ─────────────────────────────────────────────
     Project-wide semantic contract mirrored from the DATA UI Figma
     Context collection. Components consume these role-based tokens; the
     legacy --success/--dp-status/--chart aliases are compatibility shims.
     Theme palettes override the values, never the consuming selectors. */
  --color-text-primary: var(--text-body);
  --color-text-secondary: var(--text-muted);
  --color-text-tertiary: var(--text-subtle);
  --color-text-brand: var(--accent);
  --color-text-brand-active: var(--accent-active);
  --color-text-success: #25A75C;
  --color-text-success-active: #146B39;
  --color-text-warning: #F3A833;
  --color-text-warning-active: #9A650C;
  --color-text-danger: #B64533;
  --color-text-danger-hover: #A82929;
  --color-text-danger-active: #B64533;
  --color-text-additional-1: var(--teal);
  --color-text-additional-1-active: var(--teal-700);
  --color-text-additional-2: var(--blue-bright);
  --color-text-additional-2-active: var(--blue);

  --color-border-solid: var(--slate-500);
  --color-border-brand-solid: var(--accent);
  --color-border-success-primary: #83C79E;
  --color-border-warning-primary: #EBC46E;
  --color-border-danger-primary: #D99487;
  --color-border-additional-1-primary: var(--teal-100);
  --color-border-additional-2-primary: var(--blue-100);
  --color-border-success-solid: #25A75C;
  --color-border-warning-solid: #F3A833;
  --color-border-danger-solid: #B64533;
  --color-border-additional-1-solid: var(--teal);
  --color-border-additional-2-solid: var(--blue-bright);

  --color-bg-surface-base-primary: var(--bg-surface);
  --color-bg-surface-base-secondary: var(--bg-subtle);
  --color-bg-surface-base-tertiary: var(--slate-100);
  --color-bg-fill-success-primary: #25A75C;
  --color-bg-fill-success-primary-active: #146B39;
  --color-bg-fill-success-tertiary: #D7F0E1;
  --color-bg-fill-warning-primary: #F3A833;
  --color-bg-fill-danger-primary: #B64533;
  --color-bg-fill-additional-1-primary: var(--teal);
  --color-bg-fill-additional-2-primary: var(--blue-bright);
  --color-bg-surface-success-secondary: #F2FBF6;
  --color-bg-surface-success-tertiary: #E4F6EC;
  --color-bg-surface-warning-secondary: var(--gold-50);
  --color-bg-surface-danger-secondary: var(--crimson-50);
  --color-bg-fill-danger-tertiary: #F1D7D2;
  --color-bg-surface-additional-1-secondary: var(--teal-50);
  --color-bg-surface-additional-1-tertiary: var(--teal-100);
  --color-bg-surface-additional-2-secondary: var(--cyan-50);
  --color-bg-surface-additional-2-tertiary: var(--blue-50);

  /* Named Figma gradient styles are reusable presentation tokens rather
     than dashboard-local colors. Consumers may use them on bars, rules,
     illustrations, or any other element described by the same style. */
  --gradient-blue-skies: linear-gradient(180deg, #56CCF2 0%, #2F80ED 100%);
  --gradient-cinnamint: linear-gradient(180deg, #4AC29A 0%, #BDFFF3 100%);
  --gradient-light-orange: linear-gradient(180deg, #FFB75E 0%, #ED8F03 100%);
  --gradient-lawrencium: linear-gradient(180deg, #0F0C29 0%, #302B63 50%, #24243E 100%);
  --gradient-neutral-grey: linear-gradient(180deg, #BDC3C7 0%, #2C3E50 100%);
  --gradient-bloody-mary: linear-gradient(180deg, #FF512F 0%, #DD2476 100%);
  --gradient-green-beach: linear-gradient(180deg, #02AAB0 0%, #00CDAC 100%);
  --gradient-easy-med: linear-gradient(180deg, #DCE35B 0%, #45B649 100%);
  --gradient-disco: linear-gradient(180deg, #4ECDC4 0%, #556270 100%);

  /* ── Semantic status (brochure) ── */
  /* Governed adjustment: brochure #27AE60 measures 2.87:1 on white — below the
     3:1 WCAG 1.4.11 non-text minimum. #25A75C is the nearest same-hue value
     that passes (3.1:1). Gate: tools/scripts/validate-ds-contrast.py */
  --success: var(--color-text-success);
  /* Governed addition: --success #25A75C on --success-soft #E4F6EC measures
     2.76:1 — below the 4.5:1 text minimum for badge labels. #146B39 (same hue
     family) passes at 5.86:1. Mirrors the --warning-strong precedent. */
  --success-strong: var(--color-text-success-active);
  --success-soft: var(--color-bg-surface-success-tertiary);
  --warning: var(--color-text-warning);
  /* Governed adjustment: #B4790B measures 3.70:1 on white — below the 4.5:1
     text minimum this token exists for. #9A650C (same hue family, matches the
     product's audited legacy warning text) passes at 4.95:1. */
  --warning-strong: var(--color-text-warning-active);   /* @kind color */
  --warning-soft: var(--color-bg-surface-warning-secondary);
  --danger: var(--color-text-danger-active);
  --danger-soft: var(--color-bg-surface-danger-secondary);
  --info: var(--color-text-additional-2-active);
  --info-soft: var(--color-bg-surface-additional-2-tertiary);

  /* Risk levels (pair with icon + label) */
  --risk-low: #25A75C;  /* synced with --success governed adjustment */
  --risk-medium: #B4790B;
  --risk-high: #C4622E;
  --risk-critical: #B64533;

  /* Data-viz palette (brochure blues + teal + gold) */
  --chart-1: #165089;  /* primary blue */
  --chart-2: #1982CA;  /* bright blue */
  --chart-3: #1C9AA5;  /* teal */
  --chart-4: #6BB2E9;  /* cyan */
  --chart-5: #F6B43A;  /* gold */
  --chart-6: #B64533;  /* danger red */
  --chart-7: #042358;  /* navy */
  --chart-8: #516174;  /* slate */

  /* ── Loading placeholders (ADR-066 D1) ──
     Decorative only: the rows that use them carry aria-hidden="true", so WCAG 1.4.11 (3:1 for
     meaningful non-text content) does not apply — these must read as "content is on its way", not
     compete with the real rows that replace them. Aliases of the neutral ramp rather than new hex
     values, so nothing new enters the palette. */
  --ds-skeleton-base: var(--slate-200);
  --ds-skeleton-sheen: var(--slate-50);

  /* ── Semantic — dark surfaces (navy hero / brand) ── */
  --bg-dark: var(--navy);
  --bg-dark-deep: var(--navy-deep);
  --text-on-dark: var(--soft-white);
  --text-on-dark-muted: rgba(248, 250, 252, 0.70);
  --border-on-dark: rgba(185, 204, 226, 0.22);
}

/* ── Dark theme ──────────────────────────────────────────────
   Toggled by [data-pp-theme="dark"] on the app root. Redefines the
   neutral ramp (inverted) + brand base tokens the components read
   directly (--white, --ink, --slate-*), so every semantic alias that
   references them cascades to dark with no per-component overrides. */
[data-pp-theme="dark"] {
  /* Base neutrals the components consume directly */
  --white: #131b2e;         /* component "surface" base → dark panel */
  --ink: #dbe4f0;           /* body/strong text → light */
  --grey: #aab8cc;
  --grey-muted: #8494ab;
  --grey-line: #2b3850;
  --paper: #0b1220;         /* canvas */
  --soft-white: #f1f5fb;

  /* Inverted slate ramp: low = dark, high = light */
  --slate-50:  #0e1626;
  --slate-100: #151f33;
  --slate-200: #1c2740;
  --slate-300: #25324a;
  --slate-400: #6b7c96;
  --slate-500: #8494ab;
  --slate-600: #aab8cc;
  --slate-700: #cdd8e6;
  --slate-800: #e0e8f2;
  --slate-900: #f1f5fb;

  /* Navy is used as heading/label text on light — flip to light on dark */
  --navy: #eaf1fb;
  --navy-deep: #0b1220;

  /* Semantic surfaces */
  --bg-canvas: #0b1220;
  --bg-surface: #131b2e;
  --bg-subtle: #151f33;
  --bg-inset: rgba(255, 255, 255, 0.04);
  --bg-hover: #1c2740;

  --text-strong: #f1f5fb;
  --text-body: #dbe4f0;
  --text-muted: #aab8cc;
  --text-subtle: #8494ab;
  --text-inverse: #0b1220;

  --border-subtle: #2b3850;
  --border-strong: #3a4a66;
  /* Dark counterpart of --border-control: --slate-400 #6b7c96 measures 4.07:1 on #131b2e
     (the dark --slate-500 #8494ab would be brighter still, but 400 keeps the glyph from
     out-shouting the row text while staying well above the 3:1 minimum). */
  --border-control: var(--slate-400);
  /* Governed addition: the light value (--blue #165089) is a navy-on-navy 2.08:1 against the dark
     surface #131b2e, so both consumers of this token — the --ring focus indicator (spacing.css)
     and the DsInput focus border — were below the 3:1 WCAG 1.4.11 minimum in dark mode. The dark
     --accent is the token that already carries brand blue at dark-surface contrast (4.98–6.28:1
     across the dark surfaces and tints). */
  --border-focus: var(--accent);
  --border-default: 1px solid #2b3850;   /* @kind other */
  --border-separator: 1px solid #1f2a42; /* @kind other */

  /* Brighter accents for contrast on dark */
  --accent: #2f9de2;
  --accent-hover: #59bdf0;
  --accent-active: #6bb2e9;
  --accent-soft: #16243a;
  --accent-2-soft: #0f2a2e;
  --text-link: var(--accent);
  --text-link-hover: var(--accent-hover);

  /* Dark counterparts of the project-wide Context contract. Individual
     palettes may replace these as a unit without changing components. */
  --color-text-primary: #dbe4f0;
  --color-text-secondary: #aab8cc;
  --color-text-tertiary: #8494ab;
  --color-text-brand: #2f9de2;
  --color-text-brand-active: #6bb2e9;
  --color-text-success: #3BC272;
  --color-text-success-active: #3BC272;
  --color-text-warning: #D99B2B;
  --color-text-warning-active: #D99B2B;
  --color-text-danger: #D9705B;
  --color-text-danger-hover: #E68A78;
  --color-text-danger-active: #D9705B;
  --color-text-additional-1: #6FD6DD;
  --color-text-additional-1-active: #8CE3E8;
  --color-text-additional-2: #59BDF0;
  --color-text-additional-2-active: #6BB2E9;
  --color-border-solid: #8494ab;
  --color-border-brand-solid: #2f9de2;
  --color-border-success-primary: #356842;
  --color-border-warning-primary: #6B5B34;
  --color-border-danger-primary: #70423F;
  --color-border-additional-1-primary: #5E4770;
  --color-border-additional-2-primary: #365C73;
  --color-border-success-solid: #3BC272;
  --color-border-warning-solid: #D99B2B;
  --color-border-danger-solid: #D9705B;
  --color-border-additional-1-solid: #6FD6DD;
  --color-border-additional-2-solid: #59BDF0;
  --color-bg-surface-base-primary: #131b2e;
  --color-bg-surface-base-secondary: #151f33;
  --color-bg-surface-base-tertiary: #1c2740;
  --color-bg-fill-success-primary: #3BC272;
  --color-bg-fill-success-primary-active: #2F9F5D;
  --color-bg-fill-success-tertiary: #183825;
  --color-bg-fill-warning-primary: #D99B2B;
  --color-bg-fill-danger-primary: #D9705B;
  --color-bg-fill-additional-1-primary: #6FD6DD;
  --color-bg-fill-additional-2-primary: #59BDF0;
  --color-bg-surface-success-secondary: #10261a;
  --color-bg-surface-success-tertiary: #10261a;
  --color-bg-surface-warning-secondary: #2a1f08;
  --color-bg-surface-danger-secondary: #2a1512;
  --color-bg-fill-danger-tertiary: #4A211A;
  --color-bg-surface-additional-1-secondary: #0f2a2e;
  --color-bg-surface-additional-1-tertiary: #15383d;
  --color-bg-surface-additional-2-secondary: #13283b;
  --color-bg-surface-additional-2-tertiary: #16243a;
  --success-soft: #10261a;
  --warning-soft: #2a1f08;
  --danger-soft: #2a1512;
  --info-soft: #16243a;

  /* Governed addition: the source design system ships no dark variants for the
     status base hues, leaving danger/warning below WCAG AA on dark surfaces
     (#B64533 = 2.85:1, #B4790B = 2.99:1 on #131b2e). Same-hue lightened values,
     verified ≥4.5:1 by tools/scripts/validate-ds-contrast.py. */
  --success: #3BC272;
  /* No dark adjustment needed: #3BC272 on --success-soft #10261a already
     measures 6.96:1, above the 4.5:1 text minimum. Kept at the current dark
     success value rather than darkened for symmetry with light. */
  --success-strong: #3BC272;
  --warning-strong: #D99B2B;
  --danger: #D9705B;
  --risk-low: #3BC272;

  /* Only the SHEEN needs a dark value. --ds-skeleton-base aliases --slate-200, which the inverted
     ramp above already redefines to #1c2740 — lighter than the #131b2e surface, so the bar still
     reads as a raised placeholder. The sheen aliases --slate-50, which inverts to #0e1626 — DARKER
     than the base, which would run the shimmer backwards. --slate-300 is the next step up. */
  --ds-skeleton-sheen: var(--slate-300);
}