/* ============================================================
   Classie — Color tokens
   Dark-mode-first security & compliance console.
   Grounded in:
     • Brand logo assets — Cyan #00ADFF, deep navy #081943, periwinkle #D7E2FF
     • Real Figma component tokens (partial export) — neutral ramp is
       Tailwind-Zinc-based (Dialog #17171C, Panel #25252D/#2E2E38,
       Toggle track #27272A/#3F3F46/#A1A1AA/#D4D4D8), cyan hover BRIGHTENS
       to #26BAFF, and status/severity hues come from the Tags/Icons tables.
   Full Semantic/Core/primitive alias chain was not exported, so a few
   values (severity-low, exact surface-elevation steps) are still
   reasoned extensions of the real palette — flagged inline below.
   ============================================================ */

:root {
  /* ---- Brand core ---- */
  --brand-cyan: #00adff;
  --brand-navy: #081943;
  --brand-periwinkle: #d7e2ff;

  /* ---- Cyan / primary ramp (real: Toggle Switch on.track tokens) ---- */
  --cyan-300: #7dd3fc;
  --cyan-400: #38c0ff;
  --cyan-450: #30bdff; /* console-extracted interactive cyan (same value as --text-brand); used for active-state indicators */
  --cyan-500: #00adff; /* primary — Semantic.accent.primary */
  --cyan-600: #26baff; /* hover — accent.primaryHover brightens, does not darken */
  --cyan-700: #008fd4; /* active/error-adjacent — accent.primaryHover(error ctx) */
  --cyan-900: #06263b; /* tinted fill on dark (inferred) */

  /* ---- Neutral ramp — real: Tailwind-Zinc-based (Dialog/Panel/Toggle track tokens) ---- */
  --navy-1000: #09090b; /* zinc-950 */
  --navy-950: #101013;
  --navy-900: #17171c; /* Dialog.background (real) */
  --navy-850: #1c1c22;
  --navy-800: #1d1d23; /* Panel.background / Chip.background — updated from System Design */
  --navy-750: #292930;
  --navy-700: #26262e; /* Panel.border — updated from System Design */
  /* Console-extracted steps (live product, July 2026). Monotonic: higher = darker. */
  --navy-720: #25252d; /* Level-2 surface — policy/rule cards, active segment fill */
  --navy-690: #2e2e38; /* Level-1 (elevated) card border */
  --navy-660: #373743; /* Level-2 card border, dropdown border */
  --navy-600: #3f3f46; /* Toggle off.track.hover (real, zinc-700) */
  --navy-500: #52525b; /* zinc-600 */
  --navy-400: #71717a; /* zinc-500 */
  --navy-300: #a1a1aa; /* Toggle off.thumb.default (real, zinc-400) */
  --navy-200: #d4d4d8; /* Toggle off.thumb.hover (real, zinc-300) */
  --navy-100: #e4e4e7; /* zinc-200 */
  --navy-050: #f4f4f5; /* zinc-100 */
  --white: #ffffff;

  /* ---- Semantic status (real: Toggles / Icons / Tags tokens) ---- */
  --success-500: #1f9f75; /* Toggles.sanctionedHandle (real) */
  --success-600: #16a34a; /* icon-succes-color (real) */
  --success-900: #0c2b21;
  --warning-500: #f59e0b; /* icon-orange-color / tag_high (real) */
  --warning-600: #d97706;
  --warning-900: #2e2109;
  --danger-500: #f87171; /* icon-red-color / tag_error (real) */
  --danger-600: #ef4444;
  --danger-900: #331016;
  --info-500: #22d3ee; /* icon-cyan-color / tag_info (real) */
  --info-900: #0b2138;
  --rose-500: #f43f5e; /* Toggles.unsanctionedHandle (real) — use for "unsanctioned/revoked" states specifically */

  /* ---- Severity ramp (security findings) — aligned to real Tag palette ---- */
  --severity-critical: #f87171; /* tag_error */
  --severity-high: #f59e0b; /* tag_high */
  --severity-medium: #facc15; /* tag_medium */
  --severity-low: #60a5fa; /* inferred — no direct "low" tag token in the export */
  --severity-info: #22d3ee; /* tag_info */

  /* ---- Extra data-viz hues (Avatar multi-user color coding) — oklch,
     same lightness/chroma as the brand cyan, hue rotated. Additive: for
     telling apart users/entities in avatar stacks, not for status/semantic
     meaning (those stay on the ramps above). ---- */
  --violet-500: oklch(64% 0.19 300);
  --violet-subtle: oklch(64% 0.19 300 / 14%);
  --pink-500: oklch(64% 0.2 350);
  --pink-subtle: oklch(64% 0.2 350 / 14%);

  /* ============================================================
     SEMANTIC ALIASES — reference these in product UI
     ============================================================ */

  /* Backgrounds */
  --bg-app: var(--navy-1000); /* page background — darker than elevated surfaces (toolbar/sidemenu/cards) */
  --bg-sunken: #08080a;
  --surface-card: var(--navy-900); /* matches Toolbar/SideMenu background */
  /* Two-level card system (Console). L1 = elevated (stat/KPI cards) on top of
     the app field; L2 = base surface (list/policy cards), lighter, no shadow. */
  --surface-card-elevated: var(--navy-900); /* #17171C */
  --surface-card-base: var(--navy-720); /* #25252D */
  --surface-raised: var(--navy-700);
  --surface-overlay: var(--navy-600);
  /* Floating overlay panel (Menu, notifications, dropdown popovers) — one
     recipe shared by every panel: surface + border + radius + shadow. */
  --surface-panel: var(--surface-card-elevated); /* #17171C */
  --surface-panel-hover: var(--surface-card-base); /* #25252D — row hover inside a panel */
  --surface-inset: var(--navy-950);
  --surface-hover: rgba(255, 255, 255, 0.04);
  --surface-active: rgba(255, 255, 255, 0.07);
  --surface-selected: var(--accent-tint);

  /* Tinted (text-button) fills — 10% at rest, 20% on hover */
  --accent-tint: rgba(0, 173, 255, 0.1);
  --accent-tint-hover: rgba(0, 173, 255, 0.2);
  --danger-tint: rgba(244, 63, 94, 0.1);
  --danger-tint-hover: rgba(244, 63, 94, 0.2);
  --success-tint: rgba(34, 197, 94, 0.1);
  --success-tint-hover: rgba(34, 197, 94, 0.2);

  /* Enforcement-action hues — the semantic color a segmented control adopts
     when its active segment IS the action (Block / Warn / Off). Deeper than
     the status ramp because they sit on a dark filled segment. */
  --action-block: #d72544;
  --action-warn: #dd732a;

  /* ---- Text — extracted from Classie Console app ---- */
  /* Primarios */
  --text-primary: #b1c0d2; /* rgb 177,192,210 — encabezados, navegación, cuerpo */
  --text-brand: #30bdff; /* rgb 48,189,255 — elementos interactivos: botones, links, avatar initials */
  
  /* Secundarios */
  --text-secondary: #798495; /* rgb 121,132,149 — subtítulos, descripciones, labels */
  --text-tertiary: #6b7688; /* — metadatos de baja jerarquía, celdas vacías, captions */
  --text-muted: #86868b; /* rgb 134,134,139 — texto auxiliar, paginación, metadatos */
  
  /* Terciarios / Acento (semánticos y estado) */
  --text-success: #22c55e; /* rgb 34,197,94 — positivo, badges estado positivo */
  --text-danger: #f43f5e; /* rgb 244,63,94 — negativo */
  --text-warning-light: #fca5a5; /* rgb 252,165,165 — badges tipo "Trial" */
  --text-danger-dark: #450a0a; /* rgb 69,10,10 — texto sobre fondos rojos */
  --text-success-light: #86efac; /* rgb 134,239,172 — etiquetas de categoría */
  --text-accent-teal: #14b8a6; /* rgb 20,184,166 — contadores/labels secundarios */
  --text-accent-blue: #00adff; /* rgb 0,173,255 — contadores/labels secundarios */
  --text-accent-blue-medium: #2783bd; /* rgb 39,131,189 — valores numéricos gráficas */
  --text-accent-slate: #5c6f88; /* rgb 92,111,136 — valores numéricos secundarios */
  
  /* Neutros */
  --text-on-dark: #ffffff; /* rgb 255,255,255 — texto sobre fondos oscuros */
  --text-on-dark-87: rgba(255, 255, 255, 0.87); /* — tooltips/gráficas */
  --text-on-light: #141413; /* rgb 20,20,19 — texto oscuro sobre claros/chips */

  /* Borders */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-default: var(--navy-700); /* Panel.border (real) */
  --border-strong: var(--navy-600); /* Toggle off.track.hover (real) */
  --border-elevated: var(--navy-690); /* #2E2E38 — L1 card hairline (1.5px) */
  --border-base: var(--navy-660); /* #373743 — L2 card + dropdown hairline (1.5px) */
  --border-accent: var(--cyan-500);
  --border-indicator-active: var(--cyan-450); /* #30BDFF — active tab underline bar */
  --border-focus: var(--cyan-400);
  --border-panel: var(--border-elevated); /* #2E2E38 — overlay panel hairline + row separator (1.5px) */

  /* ============================================================
     TAG / BADGE TONES — single base hue per tone; the fill is derived
     from that hue with an alpha step, never a separate hard-coded hex.
     Consumed by <Tag>. Reconciled from production code:
       • "Sanctioned" used #22C55E and "Low" used #11B981 — UNIFIED here on
         --success-500 (#1F9F75, the real Toggles.sanctionedHandle token).
       • "Medium" olive #BCB731 replaced by --severity-medium (#FACC15) so
         severity tags share one ramp with icons and charts.
     ============================================================ */
  --tag-alpha-fill: 16%; /* default soft fill */
  --tag-alpha-fill-strong: 24%; /* hover / emphasis */
  --tag-alpha-border: 28%; /* outline variant */

  --tag-neutral: #8a8a90; /* secondary metadata (version, revision) */
  --tag-neutral-fill: var(--navy-800); /* neutral is the one opaque fill: #1D1D23 */
  --tag-accent: var(--brand-cyan);
  --tag-info: var(--info-500);
  --tag-teal: #14b8a6;
  --tag-success: var(--success-500); /* Sanctioned · Low */
  --tag-warning: var(--severity-high); /* High */
  --tag-caution: var(--severity-medium); /* Medium */
  --tag-danger: var(--severity-critical); /* Critical */
  --tag-revoked: var(--rose-500); /* Unsanctioned · revoked */
  /* "Revision"-style badges (table version/revision column) — text and fill
     hues diverge from the standard single-hue Tag tones, so this pair is
     hard-coded rather than derived via color-mix off one base var. */
  --tag-revision-fg: var(--cyan-300); /* #7DD3FC */
  --tag-revision-bg: color-mix(in srgb, #0ea5e9 var(--tag-alpha-fill), transparent); /* ~rgba(14,165,233,0.16) */

  /* Accents */
  --accent: var(--cyan-500);
  --accent-hover: var(--cyan-600);
  --accent-active: var(--cyan-700);
  --accent-subtle: rgba(0, 173, 255, 0.12);
  --focus-ring: rgba(0, 173, 255, 0.45);
}