/* Revara — Design Tokens: Premium Dark Theme
   All CSS custom properties live here. Loaded before style.css.
   Google Fonts are loaded via <link> tags in layout.php head.    */

:root {

  /* ══════════════════════════════════════════════════════════════
     NEW CANONICAL TOKENS (v2)
     All component code should use these going forward.
  ══════════════════════════════════════════════════════════════ */

  /* ── Backgrounds ─────────────────────────────────────────── */
  --bg-base:         #070B0F;
  --bg-surface:      #0E1419;
  --bg-surface-high: #141C24;

  /* ── Borders ─────────────────────────────────────────────── */
  --border:      #1C2A38;
  --border-high: #243344;

  /* ── Accent (blue) ───────────────────────────────────────── */
  --accent:      #3B82F6;
  --accent-glow: rgba(59,130,246,.15);
  --accent-dim:  rgba(59,130,246,.08);

  /* ── Semantic colours ────────────────────────────────────── */
  --green:        #10B981;
  --green-glow:   rgba(16,185,129,.12);
  --amber:        #F59E0B;
  --amber-glow:   rgba(245,158,11,.12);
  --red:          #EF4444;
  --red-glow:     rgba(239,68,68,.10);
  --purple:       #8B5CF6;
  --purple-glow:  rgba(139,92,246,.12);
  --teal:         #14B8A6;
  --teal-glow:    rgba(20,184,166,.12);

  /* ── Text ────────────────────────────────────────────────── */
  --text:        #CBD5E1;
  --text-mid:    #64748B;
  --text-bright: #F1F5F9;

  /* ── Typography ──────────────────────────────────────────── */
  --font-ui:   'Inter', system-ui, sans-serif;
  --font-mono: 'Space Mono', 'Courier New', monospace;

  /* ── Shape ───────────────────────────────────────────────── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  /* ── Motion ──────────────────────────────────────────────── */
  --transition: 150ms ease;

  /* ── Elevation ───────────────────────────────────────────── */
  --shadow-sm:        0 1px 3px rgba(0,0,0,.4);
  --shadow-md:        0 4px 16px rgba(0,0,0,.5);
  --shadow-glow-blue: 0 0 20px rgba(59,130,246,.2);

  /* ── Spacing scale ───────────────────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;


  /* ══════════════════════════════════════════════════════════════
     LEGACY ALIASES — kept so existing style.css selectors
     continue to work without any changes.
  ══════════════════════════════════════════════════════════════ */

  /* Backgrounds */
  --bg:        var(--bg-base);
  --surface:   var(--bg-surface);
  --surface-2: var(--bg-surface-high);

  /* Brand / Accent */
  --brand:       var(--accent);
  --brand-dark:  #2563EB;
  --brand-light: #93C5FD;
  --brand-pale:  var(--accent-glow);

  /* Semantic — yellow mapped to amber */
  --yellow: var(--amber);
  --blue:   var(--accent);

  /* Border alias */
  --border-dark: var(--border-high);

  /* Text aliases */
  --text-2: var(--text);
  --text-3: var(--text-mid);

  /* Font alias (old name) */
  --font: var(--font-ui);

  /* Radius alias */
  --radius: var(--radius-sm);

  /* Shadow aliases */
  --shadow:    var(--shadow-sm);
  --shadow-lg: 0 10px 15px rgba(0,0,0,.6), 0 4px 6px rgba(0,0,0,.4);

  /* Sidebar */
  --sidebar-bg:      var(--bg-base);
  --sidebar-text:    var(--text-mid);
  --sidebar-hover:   var(--bg-surface);
  --sidebar-active:  var(--accent);
  --sidebar-divider: rgba(255,255,255,.07);

  /* Badge tokens */
  --badge-green-bg:    var(--green-glow);
  --badge-green-text:  var(--green);
  --badge-red-bg:      var(--red-glow);
  --badge-red-text:    var(--red);
  --badge-yellow-bg:   var(--amber-glow);
  --badge-yellow-text: var(--amber);
  --badge-blue-bg:     var(--accent-glow);
  --badge-blue-text:   var(--accent);
  --badge-purple-bg:   var(--purple-glow);
  --badge-purple-text: var(--purple);

  /* Alert tokens */
  --alert-success-bg:     rgba(16,185,129,.10);
  --alert-success-border: rgba(16,185,129,.28);
  --alert-success-text:   var(--green);
  --alert-error-bg:       rgba(239,68,68,.10);
  --alert-error-border:   rgba(239,68,68,.28);
  --alert-error-text:     var(--red);
  --alert-warning-bg:     rgba(245,158,11,.10);
  --alert-warning-border: rgba(245,158,11,.28);
  --alert-warning-text:   var(--amber);
  --alert-info-bg:        rgba(59,130,246,.10);
  --alert-info-border:    rgba(59,130,246,.28);
  --alert-info-text:      var(--accent);

  /* Component tokens */
  --btn-danger-hover: #DC2626;
  --focus-ring:       0 0 0 3px var(--accent-dim);

  /* Layout */
  --sidebar-w: 240px;
  --header-h:  60px;
}