/*
 * public/assets/css/tokens.css
 *
 * Single source of truth for every design token.
 * Loaded by the shared layout — every module inherits these variables.
 * Modules should NOT redefine colours; use these tokens instead.
 */

/* ── Dark theme (default) ── */
[data-theme="dark"], :root {
  /* Backgrounds */
  --bg:     #0f1113;
  --bg-2:   #161a1e;
  --bg-3:   #1d2227;
  --bg-4:   #242b31;

  /* Cards / surfaces */
  --card:   #1a1f24;
  --card-2: #20262c;

  /* Borders */
  --line:   #2a3038;
  --line-2: #36404a;
  --wire:   #4a5668;

  /* Text */
  --dim:    #5a6a7a;
  --muted:  #7a8ea0;
  --text-2: #9fb0c0;
  --text:   #c8d6e2;
  --white:  #e8f0f6;

  /* Shadows */
  --shadow-sm: 0 1px 4px rgba(0,0,0,.4);
  --shadow:    0 4px 16px rgba(0,0,0,.5);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.6);
}

/* ── Light theme ── */
[data-theme="light"] {
  --bg:     #f0f2f5;
  --bg-2:   #ffffff;
  --bg-3:   #eaecf0;
  --bg-4:   #e0e3e8;

  --card:   #ffffff;
  --card-2: #f7f9fc;

  --line:   #dde2e8;
  --line-2: #cdd4db;
  --wire:   #b0bcc8;

  --dim:    #8090a0;
  --muted:  #5a6a7a;
  --text-2: #3a4a58;
  --text:   #1e2a34;
  --white:  #0d1822;

  --shadow-sm: 0 1px 4px rgba(0,0,0,.08);
  --shadow:    0 4px 16px rgba(0,0,0,.10);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.14);
}

/* ── Semantic / accent colours (theme-independent) ── */
:root {
  /* Amber / brand */
  --amber:    #f5a623;
  --amber-2:  #fbbf24;
  --amber-dk: #c47d0a;
  --amber-bg: rgba(245,166,35,.10);
  --amber-bd: rgba(245,166,35,.25);

  /* Green / success */
  --good:     #22c55e;
  --good-bg:  rgba(34,197,94,.10);
  --good-bd:  rgba(34,197,94,.25);

  /* Red / danger */
  --bad:      #ef4444;
  --bad-bg:   rgba(239,68,68,.10);
  --bad-bd:   rgba(239,68,68,.25);

  /* Orange / warning */
  --warn:     #f59e0b;
  --warn-bg:  rgba(245,158,11,.10);
  --warn-bd:  rgba(245,158,11,.25);

  /* Blue / info */
  --blue:     #3b82f6;
  --blue-bg:  rgba(59,130,246,.10);
  --blue-bd:  rgba(59,130,246,.25);

  /* Purple */
  --purple:   #8b5cf6;
  --purple-bg:rgba(139,92,246,.10);
  --purple-bd:rgba(139,92,246,.25);

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

  /* ── Border radii ── */
  --r1: 4px;
  --r2: 8px;
  --r3: 12px;
  --r4: 16px;
  --r5: 24px;

  /* ── Spacing scale ── */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;

  /* ── Transitions ── */
  --trans: 0.15s cubic-bezier(.4,0,.2,1);
}