/**
 * Nexus Design System — CSS Custom Properties (SINGLE source of truth)
 * ==================================================================
 * Mọi CSS variable được định nghĩa ĐÚNG MỘT LẦN ở đây.
 * Các file khác CHỈ DÙNG, không định nghĩa lại :root.
 *
 * Theme per role: file trong public/css/themes/ ghi đè --accent / --accent-hover
 *                 / --accent-rgb / --accent-dim — không ghi đè biến khác.
 *
 * Load FIRST — trước reset.css và mọi file khác.
 * ==================================================================
 */

:root {
    /* ══════════════════════════════════════════════════════════════
       COLOR SYSTEM (HSL TOKENS + BACKWARD COMPATIBLE HEX/RGB)
       ══════════════════════════════════════════════════════════════ */
    /* HSL Core Components */
    --hsl-bg-h:       240;
    --hsl-bg-s:       20%;
    --hsl-bg-l:       5%;

    --hsl-accent-h:   187;
    --hsl-accent-s:   95%;
    --hsl-accent-l:   43%;

    /* BACKGROUNDS — Navy-tinted console palette (B≥G≥R) */
    --bg-primary:     hsl(var(--hsl-bg-h), var(--hsl-bg-s), var(--hsl-bg-l));              /* #0a0a0f */
    --bg-secondary:   hsl(var(--hsl-bg-h), 17%, 8%);                                       /* #111118 */
    --bg-tertiary:    hsl(var(--hsl-bg-h), 12%, 12%);                                      /* #1b1b22 */
    --bg-elevated:    hsl(var(--hsl-bg-h), 10%, 17%);                                      /* #26262e */
    --bg-hover:       hsl(var(--hsl-bg-h), 10%, 17%);                                      /* #26262e */

    /* SURFACES — Panel variants */
    --panel:          hsl(var(--hsl-bg-h), 14%, 6%);                                       /* #0f0f14 */
    --panel-2:        hsl(var(--hsl-bg-h), 14%, 10%);                                      /* #16161d */

    /* BORDERS — Hairline philosophy (1px solid / subtle hsla) */
    --border:         hsl(240, 9%, 19%);                                                  /* #2d2d36 */
    --border-soft:    hsl(240, 11%, 14%);                                                 /* #202028 */
    --border-subtle:  hsla(0, 0%, 100%, 0.06);
    --border-medium:  hsla(0, 0%, 100%, 0.12);

    /* TEXT — Cool off-white hierarchy */
    --text-primary:   hsl(240, 27%, 92%);                                                 /* #e5e5ef */
    --text-secondary: hsl(218, 11%, 65%);                                                 /* #9ca3af */
    --text-muted:     hsl(220, 9%, 46%);                                                  /* #6b7280 */

    /* ACCENT — Theme-able (overridden by themes/theme-*.css) */
    --accent:         hsl(var(--hsl-accent-h), var(--hsl-accent-s), var(--hsl-accent-l));/* #06b6d4 */
    --accent-hover:   hsl(var(--hsl-accent-h), 92%, 53%);                                 /* #22d3ee */
    --accent-rgb:     6, 182, 212;
    --accent-dim:     hsla(var(--hsl-accent-h), var(--hsl-accent-s), var(--hsl-accent-l), 0.12);
    --accent-line:    hsla(var(--hsl-accent-h), var(--hsl-accent-s), var(--hsl-accent-l), 0.30);

    /* SEMANTIC STATUS — Consistent across all themes */
    --green:          hsl(142, 71%, 45%);                                                 /* #22c55e */
    --green-bg:       hsla(142, 71%, 45%, 0.10);
    --red:            hsl(var(--hsl-accent-h), var(--hsl-accent-s), var(--hsl-accent-l));/* NO red per color-law; cyan */
    --red-bg:         hsla(var(--hsl-accent-h), var(--hsl-accent-s), var(--hsl-accent-l), 0.10);
    --yellow:         hsl(38, 92%, 50%);                                                 /* warning — neutral grey */
    --yellow-bg:      hsla(38, 92%, 50%, 0.12);

    /* Mode/surface tokens */
    --live:           hsl(217, 91%, 60%);                                                 /* #3b82f6 */
    --live-bg:        hsla(217, 91%, 60%, 0.12);
    --dry:            hsl(218, 11%, 65%);                                                 /* neutral grey */
    --dry-bg:         hsla(0, 0%, 100%, 0.06);
    --gold:           hsl(var(--hsl-accent-h), var(--hsl-accent-s), var(--hsl-accent-l));/* CYAN per color-law */
    --gold-bg:        hsla(var(--hsl-accent-h), var(--hsl-accent-s), var(--hsl-accent-l), 0.10);
    --gold-light:     hsl(187, 92%, 53%);
    --gold-primary:   hsl(var(--hsl-accent-h), var(--hsl-accent-s), var(--hsl-accent-l));
    --gold-secondary: hsl(191, 78%, 31%);
    --accent-gold:    hsl(var(--hsl-accent-h), var(--hsl-accent-s), var(--hsl-accent-l));
    --border-light:   hsla(0, 0%, 100%, 0.12);

    /* ══════════════════════════════════════════════════════════════
       TYPOGRAPHY
       ══════════════════════════════════════════════════════════════ */
    --font-body:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono:      "JetBrains Mono", "SF Mono", "Monaco", "Inconsolata", "Roboto Mono", monospace;
    --font-display:   "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --text-xs:   0.62rem;
    --text-sm:   0.74rem;
    --text-base: 0.85rem;
    --text-md:   1rem;
    --text-lg:   1.25rem;
    --text-xl:   1.6rem;

    /* ══════════════════════════════════════════════════════════════
       SPACING — 8px rhythm
       ══════════════════════════════════════════════════════════════ */
    --space-1: 0.25rem;   /*  4px */
    --space-2: 0.5rem;    /*  8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.5rem;    /* 24px */
    --space-6: 2rem;      /* 32px */
    --space-7: 3rem;      /* 48px */

    /* ══════════════════════════════════════════════════════════════
       BORDERS & EFFECTS — Hairline 1px & smooth transitions
       ══════════════════════════════════════════════════════════════ */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;
    --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
    --transition-fast: 0.15s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-smooth: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    --glass-blur: blur(16px) saturate(180%);
}