/*
 * VOID Dashboard — Design System CSS Variables
 * Source: panel.void.ltd/ref
 *
 * Usage:
 *   <html>                  → dark theme (default)
 *   <html data-theme="light"> → light theme
 *
 * To switch themes in JS:
 *   document.documentElement.setAttribute('data-theme', 'light')
 *   document.documentElement.removeAttribute('data-theme')  // back to dark
 */

/* ─────────────────────────────────────
   GLOBAL (theme-independent tokens)
───────────────────────────────────── */
:root {
  /* Fonts */
  --font-main: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, Consolas, monospace;

  /* Border Radius */
  --radius-sm:  8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* Layout */
  --sidebar-width: 248px;

  /* Transitions (smooth & refined) */
  --transition-fast: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-base: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─────────────────────────────────────
   DARK THEME (default)
───────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg-primary:       #0b0c0e;   /* page body */
  --bg-secondary:     #0f1013;   /* sidebar, icon buttons */
  --bg-tertiary:      #131417;   /* cards, main containers */
  --bg-card:          #131417;
  --bg-card-hover:    #181a1e;
  --bg-glass:         #17181c;   /* secondary surfaces */
  --bg-glass-strong:  #1c1e23;
  --bg-input:         #16171b;
  --bg-input-focus:   #1e2025;
  --bg-sidebar:       #0f1013;

  /* Borders */
  --border-color:        #22242a;   /* default separator */
  --border-color-light:  #2a2d35;   /* subtle dividers */
  --border-color-strong: #353941;   /* pronounced dividers */

  /* Text */
  --text-primary:   #eaeaec;   /* main text, values */
  --text-secondary: #949aa4;   /* labels, subtitles */
  --text-muted:     #6f757f;   /* disabled, hints */
  --text-accent:    #78a6ff;   /* links, active nav */

  /* Accent (Blue) */
  --accent:           #4c8dff;
  --accent-bg:        #4c8dff1f;   /* ~12% opacity bg */
  --accent-bg-hover:  #4c8dff2e;   /* ~18% opacity hover */
  --accent-light:     #78a6ff;     /* lighter accent */
  --accent-ink:       #04122a;     /* text on solid accent bg */

  /* Money / Values */
  --money:     #4c8dff;
  --value:     #4c8dff;
  --value-bg:  #4c8dff1f;

  /* Status Colors */
  --success:     #4ade80;
  --success-bg:  #4ade801f;
  --danger:      #f87171;
  --danger-bg:   #f871711f;
  --warning:     #f59e0b;
  --warning-bg:  #f59e0b1f;

  /* Shadows */
  --shadow-lg:  0 4px 16px rgba(0, 0, 0, 0.50);
  --shadow-md:  0 1px 2px  rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 8px 24px rgba(76, 141, 255, 0.16);
}

/* ─────────────────────────────────────
   LIGHT THEME
   Applied via: <html data-theme="light">
───────────────────────────────────── */
:root[data-theme="light"] {
  /* Backgrounds */
  --bg-primary:       #f6f7f9;
  --bg-secondary:     #ffffff;
  --bg-tertiary:      #ffffff;
  --bg-card:          #ffffff;
  --bg-card-hover:    #f2f4f8;
  --bg-glass:         #f3f5f8;
  --bg-glass-strong:  #e9edf2;
  --bg-input:         #ffffff;
  --bg-input-focus:   #f2f4f8;
  --bg-sidebar:       #ffffff;

  /* Borders */
  --border-color:        #d6dbe2;
  --border-color-light:  #c6cdd7;
  --border-color-strong: #aeb6c2;

  /* Text */
  --text-primary:   #181b20;
  --text-secondary: #5a626d;
  --text-muted:     #8b929c;
  --text-accent:    #2563eb;

  /* Accent (Blue — darker for light bg contrast) */
  --accent:           #3b82f6;
  --accent-bg:        #3b82f62b;
  --accent-bg-hover:  #3b82f63d;
  --accent-light:     #2563eb;
  --accent-ink:       #ffffff;

  /* Money / Values */
  --money:     #2563eb;
  --value:     #2563eb;
  --value-bg:  #3b82f61a;

  /* Status Colors */
  --success:     #15803d;
  --success-bg:  #15803d1a;
  --danger:      #dc2626;
  --danger-bg:   #dc26261a;
  --warning:     #b45309;
  --warning-bg:  #b453091a;

  /* Shadows */
  --shadow-lg:  0 8px 24px rgba(16, 24, 40, 0.10);
  --shadow-md:  0 1px 2px  rgba(16, 24, 40, 0.06);
  --shadow-glow: 0 8px 24px rgba(59, 130, 246, 0.12);
}