/**
 * ============================================================================
 * DESIGN TOKENS - Professional UI System
 * ============================================================================
 * Non-negotiable token system for consistent, professional UI
 */

:root {
  /* ========== COLORS ========== */

  /* Background System - Refined for Clear Card Separation */
  --color-bg: #f5f6f9;                    /* Subtle cool gray/lavender tint - visible but not harsh */
  --color-bg-subtle: #f0f2f5;             /* Deeper tint for variation */
  --color-surface: #fafbfc;               /* Near-white cards - clearly pop from background */
  --color-surface-2: #f7f8fa;             /* Secondary surface */
  --color-surface-hover: #f4f5f8;         /* Surface hover state */

  /* Border System */
  --color-border: #e5e7eb;                /* Default borders */
  --color-border-subtle: #f0f1f3;         /* Subtle borders/dividers */
  --color-border-strong: #d1d5db;         /* Strong borders */

  /* Text System */
  --color-text: #111827;                  /* Primary text */
  --color-text-strong: #000000;           /* Strong emphasis */
  --color-text-muted: #6b7280;            /* Secondary text */
  --color-text-subtle: #9ca3af;           /* Tertiary/helper text */
  --color-text-disabled: #d1d5db;         /* Disabled text */

  /* Purple Accent Scale (Calmer, Less Saturated) */
  --color-accent-50: #faf7fe;
  --color-accent-100: #f4effe;
  --color-accent-200: #e9ddfd;
  --color-accent-300: #d6bffb;
  --color-accent-400: #b895f7;
  --color-accent-500: #9b6ff0;            /* Primary accent - calmer, less saturated */
  --color-accent-600: #8b5ce8;            /* Active/hover accent - gentler */
  --color-accent-700: #7645d6;            /* Pressed accent */
  --color-accent-800: #6535b8;            /* Dark accent - reserve for strongest CTAs */

  /* Focus Ring */
  --color-focus-ring: var(--color-accent-500);
  --color-focus-ring-offset: #ffffff;

  /* Severity Colors (Data Visualization ONLY) */
  --color-severity-critical: #7f1d1d;
  --color-severity-critical-bg: #fef2f2;
  --color-severity-high: #dc2626;
  --color-severity-high-bg: #fef2f2;
  --color-severity-medium: #f59e0b;
  --color-severity-medium-bg: #fffbeb;
  --color-severity-low: #16a34a;
  --color-severity-low-bg: #f0fdf4;
  --color-severity-info: #3b82f6;
  --color-severity-info-bg: #eff6ff;

  /* Status Colors */
  --color-success: #16a34a;
  --color-success-bg: #f0fdf4;
  --color-warning: #f59e0b;
  --color-warning-bg: #fffbeb;
  --color-danger: #dc2626;
  --color-danger-bg: #fef2f2;

  /* ========== APP CHROME (Sidebar + Header) ========== */
  /* The sidebar and the header paint the SAME surface treatment, just rotated
     (180deg down the sidebar, 90deg across the header) so the two read as one
     continuous plane meeting at the seam. Both reference these four tokens
     rather than repeating literals, so the chrome can be re-themed in one
     place and the two surfaces can never drift out of sync. */
  --chrome-stop-1: #ffffff;               /* At the seam corner both share */
  --chrome-stop-2: #fdfcff;
  --chrome-stop-3: var(--color-accent-50);
  --chrome-glow: rgba(155, 111, 240, 0.10);
  --chrome-border: var(--color-border);
  --chrome-shadow: rgba(76, 43, 157, 0.05);

  /* Dark Surfaces (tooltips, code blocks, OTP panel) */
  --color-dark-surface: #1e293b;
  --color-dark-surface-2: #0f172a;
  --color-dark-text: #ffffff;
  --color-dark-text-muted: #cbd5e1;
  --color-dark-border: rgba(255, 255, 255, 0.1);

  /* ========== SHADOWS (2-Level Elevation System) ========== */

  /* Clean 2-Level System: default + hover */
  --shadow-default: 0 1px 3px 0 rgba(0, 0, 0, 0.06), 0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --shadow-hover: 0 4px 14px 0 rgba(0, 0, 0, 0.10), 0 2px 6px 0 rgba(0, 0, 0, 0.06);

  /* Legacy aliases */
  --shadow-sm: var(--shadow-default);
  --shadow-md: var(--shadow-hover);
  --shadow-lg: var(--shadow-hover);
  --shadow-xl: 0 20px 40px -12px rgba(0, 0, 0, 0.12);
  --shadow-card: var(--shadow-default);
  --shadow-card-hover: var(--shadow-hover);
  --shadow-popover: var(--shadow-xl);

  /* Focus Shadow */
  --shadow-focus: 0 0 0 3px rgba(155, 111, 240, 0.12);

  /* ========== BORDER RADIUS (Unified Scale) ========== */

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Component-Specific Radius (Standardized) */
  --radius-card: 14px;        /* Cards, major surfaces */
  --radius-button: 10px;      /* Buttons, inputs */
  --radius-input: 8px;        /* Form inputs */
  --radius-badge: 6px;        /* Small badges */
  --radius-pill: 9999px;      /* Pills, fully rounded */

  /* ========== SPACING RHYTHM ========== */

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;
  --space-3xl: 32px;
  --space-4xl: 48px;

  /* Card Padding - Standardized to 20px everywhere */
  --card-padding: 20px;
  --card-padding-sm: 16px;
  --card-header-padding: 20px; /* Same as body - consistent */

  /* ========== TYPOGRAPHY ========== */

  /* Font Families */
  --font-sans: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Fira Code", "Consolas", "Monaco", monospace;

  /* Font Sizes */
  --text-xs: 0.75rem;      /* 12px */
  --text-sm: 0.813rem;     /* 13px */
  --text-base: 0.875rem;   /* 14px */
  --text-lg: 1rem;         /* 16px */
  --text-xl: 1.125rem;     /* 18px */
  --text-2xl: 1.5rem;      /* 24px */
  --text-3xl: 1.875rem;    /* 30px */
  --text-4xl: 2.25rem;     /* 36px */

  /* Font Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Line Heights */
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;

  /* Typography Scale for Components */
  --text-page-title: 1.625rem;          /* 26px */
  --text-card-title: 0.875rem;          /* 14px */
  --text-card-title-uppercase: 0.813rem; /* 13px */
  --text-kpi-number: 2rem;              /* 32px */
  --text-kpi-label: 0.688rem;           /* 11px */
  --text-helper: 0.75rem;               /* 12px */

  /* ========== TRANSITIONS ========== */

  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ========== Z-INDEX SCALE ========== */

  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;

  /* ========== OPACITY SCALE ========== */

  --opacity-disabled: 0.5;
  --opacity-subtle: 0.6;
  --opacity-muted: 0.8;
}

/* ============================================================================
 * DARK MODE TOKENS
 * ============================================================================
 * Activated by `data-theme="dark"` on <html>, set before first paint by the
 * inline theme bootstrap in layouts/base.html (and persisted in localStorage
 * under `vx-theme`). Every value below is an override of a token declared in
 * :root above — nothing new is introduced here, so any rule already written
 * against var(--color-*) flips automatically with zero extra CSS.
 *
 * Palette intent: a GENTLE dark, not an OLED black. The neutral ramp is built
 * on a desaturated blue-violet (hue ~230) rather than pure gray so it sits
 * under the purple accent without looking muddy, and the darkest surface in
 * the app is #191c26 — deep enough to read as dark mode, light enough that
 * long sessions stay comfortable.
 * ========================================================================= */
html[data-theme="dark"] {
  /* Tells the UA to render native widgets (scrollbars, form controls, the
     canvas behind the page) dark — otherwise <select> popups and the
     overscroll area flash white. */
  color-scheme: dark;

  /* Background System — page sits BELOW cards, same relationship as light */
  --color-bg: #1c1f2b;
  --color-bg-subtle: #191c26;
  --color-surface: #242836;               /* Cards — clearly lift off the bg */
  --color-surface-2: #2a2e3d;
  --color-surface-hover: #303546;

  /* Border System */
  --color-border: #363b4d;
  --color-border-subtle: #2c3040;
  --color-border-strong: #474d63;

  /* Text System */
  --color-text: #e6e8ee;
  --color-text-strong: #ffffff;
  --color-text-muted: #a3a9bd;
  --color-text-subtle: #7d8397;
  --color-text-disabled: #565c70;

  /* Purple Accent Scale.
     50–300 are TINT steps: in light mode they are near-white washes used as
     subtle fills, so in dark mode they invert into dark purple-tinted fills.
     500/600 are FILL steps (button backgrounds carrying white text) and stay
     close to their light values so that contrast holds. 700/800 are TEXT
     steps — they must get LIGHTER, not darker, to be legible on a dark
     surface, which is the opposite direction from the light ramp. */
  --color-accent-50: #262032;
  --color-accent-100: #2e2740;
  --color-accent-200: #3a3153;
  --color-accent-300: #57497e;
  --color-accent-400: #8f6ee0;
  --color-accent-500: #9b6ff0;
  --color-accent-600: #8f61ec;
  --color-accent-700: #bda3f9;
  --color-accent-800: #d3c0fc;

  /* Focus Ring */
  --color-focus-ring: var(--color-accent-400);
  --color-focus-ring-offset: #1c1f2b;

  /* Severity Colors — lightened so they read as text/icons on dark, and the
     `-bg` washes flipped from pale tints to deep tinted fills. */
  --color-severity-critical: #fb7185;
  --color-severity-critical-bg: #3a2028;
  --color-severity-high: #f87171;
  --color-severity-high-bg: #382124;
  --color-severity-medium: #fbbf24;
  --color-severity-medium-bg: #382d19;
  --color-severity-low: #4ade80;
  --color-severity-low-bg: #1b3125;
  --color-severity-info: #60a5fa;
  --color-severity-info-bg: #1c2a3f;

  /* Status Colors */
  --color-success: #4ade80;
  --color-success-bg: #1b3125;
  --color-warning: #fbbf24;
  --color-warning-bg: #382d19;
  --color-danger: #f87171;
  --color-danger-bg: #382124;

  /* App Chrome — sidebar + header.
     In light mode the chrome is the LIGHTEST surface in the app (white,
     warming to a purple wash). Inverting that literally would make it the
     darkest thing on screen, which reads as a void rather than as chrome, so
     in dark mode the relationship flips: the chrome sits slightly ABOVE the
     page background (#1c1f2b) as a gently elevated slate-violet, and the
     purple glow is strengthened because a 10% bloom is invisible on dark. */
  --chrome-stop-1: #272b3a;
  --chrome-stop-2: #232734;
  --chrome-stop-3: #1f2330;
  --chrome-glow: rgba(155, 111, 240, 0.22);
  --chrome-border: #343949;
  --chrome-shadow: rgba(0, 0, 0, 0.35);

  /* Dark Surfaces (tooltips, OTP panel header, code blocks).
     In light mode these are the app's only dark chrome. In dark mode they
     must invert their RELATIONSHIP rather than their value: they need to sit
     ABOVE the page, so they become the lightest neutrals in the ramp. */
  --color-dark-surface: #2e3342;
  --color-dark-surface-2: #363c4d;
  --color-dark-text: #f3f4f8;
  --color-dark-text-muted: #a3a9bd;
  --color-dark-border: rgba(255, 255, 255, 0.12);

  /* ── DARK-ONLY OVERRIDE TOKENS (--dm-*) ────────────────────────────────
     These are deliberately NOT declared in :root, and that is the whole
     point of them.

     The app contains ~40 near-duplicate literals for the same few semantic
     roles (#dc2626 / #ef4444 / #dc3545 all meaning "danger"; #fef2f2 /
     #fee2e2 both meaning "danger wash"). Rewriting those to the ordinary
     --color-* tokens would have quietly RE-COLORED light mode, snapping
     every near-duplicate onto one canonical value — a change nobody asked
     for and one that would be noticed as drift.

     So call sites are written as `var(--dm-text-danger, #ef4444)`. In light
     mode the token is undefined, the fallback wins, and the pixel is
     byte-identical to before. In dark mode the token below resolves and the
     whole family flips together. Light mode is untouched by construction,
     not by careful auditing.

     Split into text vs fill because the two invert in opposite directions:
     status TEXT must get lighter on dark, while its background WASH must go
     from a pale tint to a deep one. */
  --dm-text-danger:  #f87171;
  --dm-text-warning: #fbbf24;
  --dm-text-success: #4ade80;
  --dm-text-info:    #60a5fa;
  --dm-text-accent:  #bda3f9;

  --dm-fill-danger:  #3a2226;
  --dm-fill-warning: #382d19;
  --dm-fill-success: #1b3125;
  --dm-fill-info:    #1c2a3f;
  --dm-fill-accent:  #2e2740;

  /* Neutral counterparts, for the second family of light literals that the
     token migration did not cover (#fafafa, #f1f3f5, #eef0f3, #e8ecf0 …) —
     the hairline rules and panel fills that were reading as "white lines"
     and "white backgrounds" on dark pages. */
  --dm-surface:        #242836;
  --dm-surface-2:      #2a2e3d;
  --dm-border-subtle:  #2c3040;
  --dm-border-strong:  #474d63;

  /* Frosted/floating overlays. A translucent WHITE veil is what makes these
     read as glass over a light page — and a bright slab over a dark one. */
  --dm-glass:          rgba(28, 31, 43, 0.72);
  --dm-glass-solid:    rgba(36, 40, 54, 0.97);
  /* Skeleton shimmer highlight — must stay translucent so the sweep still
     fades at both ends. */
  --dm-shimmer:        rgba(255, 255, 255, 0.10);

  /* Node-card outlines in the application workspace graph. The --dm-fill-*
     tints give those cards their body color; these are the matching 1.5px
     edges. They need their own step rather than reusing --dm-text-*: a card
     outline drawn in the full text color rings every node in bright purple /
     amber and turns the graph into noise, so these sit roughly halfway
     between the fill and the text. */
  --dm-edge-accent:    #4a3d6b;
  --dm-edge-warning:   #5a4520;
  --dm-edge-info:      #2b3f5e;
  --dm-edge-success:   #2a4a35;
  --dm-edge-danger:    #5a2f35;

  /* Shadows — the light theme's soft black shadows are invisible against a
     dark background, so elevation is carried by deeper, tighter shadows. */
  --shadow-default: 0 1px 3px 0 rgba(0, 0, 0, 0.40), 0 1px 2px 0 rgba(0, 0, 0, 0.30);
  --shadow-hover: 0 4px 14px 0 rgba(0, 0, 0, 0.50), 0 2px 6px 0 rgba(0, 0, 0, 0.35);
  --shadow-xl: 0 20px 40px -12px rgba(0, 0, 0, 0.60);
  --shadow-focus: 0 0 0 3px rgba(155, 111, 240, 0.30);
}