/*
Copyright (c) 2025-2026, RTE (https://www.rte-france.com)
This Source Code Form is subject to the terms of the Mozilla Public License, version 2.0.
If a copy of the Mozilla Public License, version 2.0 was not distributed with this file,
you can obtain one at http://mozilla.org/MPL/2.0/.
SPDX-License-Identifier: MPL-2.0

Design tokens — single source of truth for color, spacing, type, radius.

Why this file exists: docs/proposals/ui-design-critique.md flagged 273
hex literals across 24 files (three competing palettes: Flat UI,
Bootstrap, Tailwind). All blues consolidate onto the Tailwind blue
ramp (closest fit to existing values — #1e40af and #dbeafe are
already on it).

How to consume:
  - Inside .css files:    color: var(--color-brand);
  - Inside inline styles: color: 'var(--color-brand)'
                          (or import { colors } from 'styles/tokens')

How to extend: add a NEW token here before introducing a new hex
in a component. The check_code_quality.py gate ratchets down the
remaining hex-literal count after each migration.
*/

:root {
  /* ----- Color: surfaces ----- */
  --color-surface: #ffffff;
  --color-surface-muted: #f8f9fa;
  --color-surface-raised: #fcfcfc;

  /* Backdrop behind the pypowsybl NAD/SLD diagram. White in light
     mode; flipped dark by [data-theme="dark"] below. The diagram SVG
     itself is transparent, so this token IS the diagram background. */
  --color-diagram-surface: #ffffff;
  /* Semi-opaque veil painted over the diagram while a new one loads
     (dims the stale diagram). Translucent so the old SVG shows through. */
  --color-diagram-veil: rgba(255, 255, 255, 0.85);

  /* ----- Color: borders ----- */
  --color-border: #cccccc;
  --color-border-subtle: #eeeeee;
  --color-border-strong: #999999;

  /* ----- Color: text ----- */
  --color-text-primary: #1f2937;
  --color-text-secondary: #555555;
  --color-text-tertiary: #888888;
  --color-text-on-brand: #ffffff;
  /* Dark ink for text sitting on a bright, solid fill (warning yellow,
     notice badge, etc.). Stays dark in BOTH themes because those fills
     are bright in both — unlike the *-text tokens which are tuned for
     the matching *-soft background and flip light in dark mode. */
  --color-text-on-bright: #1f2937;

  /* ----- Color: brand (Tailwind blue ramp) ----- */
  --color-brand: #1e40af;          /* blue-800 — primary links + active CTAs */
  --color-brand-strong: #1d4ed8;   /* blue-700 — hover / pressed */
  --color-brand-soft: #dbeafe;     /* blue-100 — selection bg, hint pills */
  --color-brand-mid: #3b82f6;      /* blue-500 — fills (slider, range bar) */

  /* ----- Color: state — success ----- */
  --color-success: #28a745;
  --color-success-strong: #2e7d32;
  --color-success-soft: #d1fae5;
  --color-success-text: #065f46;

  /* ----- Color: state — warning ----- */
  --color-warning: #ffc107;
  --color-warning-strong: #f0ad4e;
  --color-warning-soft: #fff3cd;
  --color-warning-border: #ffeeba;
  --color-warning-text: #856404;

  /* ----- Color: state — danger ----- */
  --color-danger: #dc3545;
  --color-danger-strong: #b91c1c;
  --color-danger-soft: #f8d7da;
  --color-danger-text: #c62828;

  /* ----- Color: accent + chrome ----- */
  --color-accent: #8e44ad;         /* save/secondary action */
  --color-accent-soft: #f3e8ff;    /* PST tap-edit row bg */
  --color-accent-border: #c084fc;  /* PST tap-edit row border */
  --color-accent-text: #6b21a8;    /* PST tap-edit row text */
  --color-chrome: #2c3e50;         /* header / dark backgrounds */
  --color-chrome-soft: #7f8c8d;    /* settings cog, neutral chrome */
  --color-disabled: #95a5a6;       /* disabled buttons */

  /* ----- Color: info (cyan — distinct from brand blue) -----
     Used by curtailment edit rows and metric badges where the
     intent is "informational" rather than "primary action". */
  --color-info: #0284c7;
  --color-info-soft: #e0f2fe;
  --color-info-border: #7dd3fc;
  --color-info-text: #075985;

  /* ----- Spacing (4 / 8 grid) ----- */
  --space-0: 0;
  --space-half: 2px;               /* tight cases (badge padding, inline gaps) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;

  /* ----- Type sizes ----- */
  --text-xs: 11px;
  --text-sm: 12px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-xxl: 24px;

  /* ----- Radii ----- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  /* ----- Diagram-signal colors (domain-specific, not semantic state) -----
     Used by NAD/SLD highlight CSS in App.css. These are visual signals
     for grid concepts (contingency, action target, overload, breaker)
     and intentionally bright/saturated to read on top of the diagram. */
  --signal-overload: #ff8c00;
  --signal-contingency: #ffe033;
  --signal-action-target: #ff4081;
  --signal-action-target-strong: #ec407a;
  --signal-action-target-darker: #ad1457;
  --signal-action-target-soft: #fce4ec;
  --signal-breaker: #ce93d8;
  --signal-delta-positive: #ff9800;
  --signal-delta-negative: #2196f3;
  --signal-delta-neutral: #999999;

  /* ----- SLD interactive topology-edit highlight -----
     The interactive SLD-edit feature (useSldTopologyEdit + SldEditPanel)
     stages switch toggles + injection (load / generator) active-power
     retunes in the frontend and visually marks the pending element.
     Distinct hues from action / contingency / overload so a toggled
     switch on an overloaded line still reads as both. */
  --signal-edit-open: #d81b60;
  --signal-edit-closed: #1976d2;
  --signal-edit-injection: #00897b;

  /* ----- Action-overview pin palette -----
     Severity buckets for Remedial Action overview pins
     (utils/svg/actionPin{Data,Render}.ts + ActionOverviewDiagram.tsx).
     Three triplets per bucket: base, dimmed (rejected / filtered-out),
     highlighted (selected on hover). The TS mirror in tokens.ts is the
     runtime source of truth because pin fills are written to raw SVG
     `fill="…"` attributes via setAttribute, which doesn't reliably
     resolve var() across older browsers. CSS variables here are kept
     in sync for any future CSS-only consumers. */
  --pin-green: #28a745;
  --pin-orange: #f0ad4e;
  --pin-red: #dc3545;
  --pin-grey: #9ca3af;
  --pin-green-dimmed: #a3c9ab;
  --pin-orange-dimmed: #dcd0b8;
  --pin-red-dimmed: #d4a5ab;
  --pin-grey-dimmed: #c8cdd2;
  --pin-green-highlighted: #1e9e3a;
  --pin-orange-highlighted: #e89e20;
  --pin-red-highlighted: #c82333;
  --pin-grey-highlighted: #7b8a96;
  --pin-glyph-bg: #ffffff;            /* white inner circle behind label */
  --pin-glyph-text: #1f2937;          /* label text (= text-primary) */
  --pin-stroke-neutral: #6b7280;      /* unsimulated pin outline */
  --pin-gold: #eab308;                /* selected-pin star fill + outline */
  --pin-gold-dark: #a16207;           /* selected-pin star stroke */
  --pin-cross-fill: #ef4444;          /* rejected-pin cross fill */
  --pin-cross-stroke: #b91c1c;        /* rejected-pin cross stroke */

  /* Vite template carryover — visible only during the first paint
     before body { background-color: var(--color-surface) } takes over.
     Kept as a token so the dark-mode initial-paint color has a name. */
  --color-surface-dark: #242424;
}

/* ===== Dark theme =====
   Engaged via `<html data-theme="dark">`, set by useTheme + the
   pre-mount script in index.html. Only chrome tokens flip — domain
   signals (overload / contingency / action-target / pin palette)
   stay identical because pypowsybl SVGs render on a light backdrop
   and the colors encode semantic state. The diagram <svg> container
   keeps `colors.surface` here = light grey-blue so flow arrows /
   delta colors keep their meaning. */
[data-theme="dark"] {
  /* Surfaces — app shell is dark; the diagram backdrop goes near-black
     (see --color-diagram-surface) so voltage-coded lines pop. */
  --color-surface: #1b1f24;            /* base app background */
  --color-surface-muted: #232830;      /* sidebar / cards */
  --color-surface-raised: #2a3038;     /* hover / raised tiles */
  --color-diagram-surface: #0c0f13;    /* near-black diagram backdrop */
  --color-diagram-veil: rgba(12, 15, 19, 0.78);

  /* Borders */
  --color-border: #3a4049;
  --color-border-subtle: #2d333b;
  --color-border-strong: #555c66;

  /* Text — high-contrast on the dark surfaces above. */
  --color-text-primary: #e6e8eb;
  --color-text-secondary: #b5bac1;
  --color-text-tertiary: #8b9098;
  --color-text-on-brand: #ffffff;

  /* Brand — lift the Tailwind blue one step so it stays vivid on dark. */
  --color-brand: #3b82f6;              /* blue-500 — primary CTAs */
  --color-brand-strong: #60a5fa;       /* blue-400 — hover */
  --color-brand-soft: #1e3a8a;         /* blue-900 — selection bg */
  --color-brand-mid: #60a5fa;          /* slider / range fills */

  /* Success / Warning / Danger / Info — keep hue, deepen the soft
     backgrounds so badge text stays readable on dark cards. */
  --color-success: #22c55e;
  --color-success-strong: #16a34a;
  --color-success-soft: #14532d;
  --color-success-text: #bbf7d0;

  --color-warning: #facc15;
  --color-warning-strong: #eab308;
  --color-warning-soft: #422006;
  --color-warning-border: #713f12;
  --color-warning-text: #fde68a;

  --color-danger: #ef4444;
  --color-danger-strong: #dc2626;
  --color-danger-soft: #4c1d1d;
  --color-danger-text: #fecaca;

  --color-accent: #c084fc;             /* save/secondary action */
  --color-accent-soft: #3b1f5c;
  --color-accent-border: #7e22ce;
  --color-accent-text: #e9d5ff;
  --color-chrome: #0f1419;             /* header background */
  --color-chrome-soft: #4a5159;        /* settings cog */
  --color-disabled: #4b5563;

  --color-info: #38bdf8;
  --color-info-soft: #0c3445;
  --color-info-border: #075985;
  --color-info-text: #bae6fd;
}