/* ServerDeck — design tokens
   Themes: light (primary), dark (neon), clay (warm)
   Accent is overridable via [data-accent]; density via [data-density] */

:root {
  /* type */
  --font-ui: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* radii */
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 13px;
  --r-lg: 18px;
  --r-xl: 26px;

  /* density (comfortable default) */
  --pad-card: 18px;
  --gap: 18px;
  --row-h: 46px;
  --tile-pad: 20px;

  /* motion */
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* fixed status hues (shared across themes, tuned per theme below) */
  --shadow-sm: 0 1px 2px rgba(16, 18, 32, .04), 0 1px 3px rgba(16, 18, 32, .06);
  --shadow-md: 0 4px 14px rgba(16, 18, 32, .07), 0 1px 3px rgba(16, 18, 32, .05);
  --shadow-lg: 0 18px 50px rgba(16, 18, 32, .14), 0 4px 12px rgba(16, 18, 32, .08);
  --shadow-pop: 0 24px 64px rgba(16, 18, 32, .22);
}

[data-density="compact"] {
  --pad-card: 13px;
  --gap: 12px;
  --row-h: 38px;
  --tile-pad: 14px;
}

/* ---------- LIGHT (primary) ---------- */
[data-theme="light"] {
  --bg: #D7DCE9;
  --bg-grad: radial-gradient(1200px 700px at 80% -10%, #D2D8EE 0%, transparent 60%),
             radial-gradient(900px 600px at -5% 110%, #CDE4EF 0%, transparent 55%);
  --surface: #FFFFFF;
  --surface-2: #EEF1F8;
  --surface-3: #E4E8F2;
  --line: #DDE2EF;
  --line-strong: #CBD2E3;
  --text: #1A1D29;
  --text-2: #565E76;
  --text-3: #8A92A9;

  --accent: #2DAAE1;
  --accent-press: #1E90C7;
  --accent-soft: #E8F6FC;
  --accent-on: #FFFFFF;
  --accent-2: #1B5F82;

  --success: #15A34A;  --success-soft: #E2F6EA;
  --warning: #D97706;  --warning-soft: #FBF0DE;
  --danger:  #DC2626;  --danger-soft:  #FBE5E5;
  --neutral: #64748B;  --neutral-soft: #EDF0F6;

  --meter-track: #ECEFF6;
  --glow: transparent;
  color-scheme: light;
}

/* ---------- DARK (neon) ---------- */
[data-theme="dark"] {
  --bg: #050608;
  --bg-grad: radial-gradient(1100px 680px at 82% -12%, rgba(139,92,246,.18) 0%, transparent 58%),
             radial-gradient(820px 560px at -6% 112%, rgba(199,245,66,.11) 0%, transparent 55%),
             radial-gradient(1400px 900px at 50% 50%, rgba(20,24,34,.5) 0%, transparent 75%);
  --surface: #0E1015;
  --surface-2: #161922;
  --surface-3: #1F232E;
  --line: #20242D;
  --line-strong: #2C313C;
  --text: #EAEDF4;
  --text-2: #9AA3B5;
  --text-3: #646D80;

  --accent: #C7F542;
  --accent-press: #B4E22E;
  --accent-soft: rgba(199,245,66,.13);
  --accent-on: #11160A;
  --accent-2: #8B5CF6;

  --success: #34D27B;  --success-soft: rgba(52,210,123,.14);
  --warning: #F2B23E;  --warning-soft: rgba(242,178,62,.15);
  --danger:  #FF5C5C;  --danger-soft:  rgba(255,92,92,.14);
  --neutral: #8A93A6;  --neutral-soft: rgba(138,147,166,.14);

  --meter-track: #20242F;
  --glow: 0 0 0 1px rgba(199,245,66,.0);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow-md: 0 6px 20px rgba(0,0,0,.45);
  --shadow-lg: 0 22px 60px rgba(0,0,0,.6);
  --shadow-pop: 0 28px 70px rgba(0,0,0,.7);
  color-scheme: dark;
}

/* ---------- CLAY (warm) ---------- */
[data-theme="clay"] {
  --bg: #F2EFE7;
  --bg-grad: radial-gradient(1100px 680px at 82% -12%, rgba(184,72,45,.10) 0%, transparent 58%),
             radial-gradient(820px 560px at -6% 112%, rgba(74,103,65,.10) 0%, transparent 55%);
  --surface: #FBFAF4;
  --surface-2: #F0ECE0;
  --surface-3: #E7E1D2;
  --line: #E2DCCC;
  --line-strong: #D2C9B4;
  --text: #2C271E;
  --text-2: #6A6353;
  --text-3: #968D79;

  --accent: #B8482D;
  --accent-press: #9E3B22;
  --accent-soft: #F3E2DA;
  --accent-on: #FFFFFF;
  --accent-2: #4A6741;

  --success: #4A6741;  --success-soft: #E5EBDF;
  --warning: #C07B1E;  --warning-soft: #F6E9D2;
  --danger:  #B8482D;  --danger-soft:  #F3E0D9;
  --neutral: #8A7F6B;  --neutral-soft: #EDE7DA;

  --meter-track: #E7E1D2;
  --glow: transparent;
  color-scheme: light;
}

/* accent overrides (Appearance > accent) */
[data-accent="cleartwo"]{ --accent:#2DAAE1; --accent-press:#1E90C7; --accent-soft:#E8F6FC; --accent-on:#fff; }
[data-accent="indigo"] { --accent: #4F46E5; --accent-press:#4138C4; --accent-soft:#EEF0FF; --accent-on:#fff; }
[data-accent="cyan"]   { --accent: #0891B2; --accent-press:#0E7490; --accent-soft:#E0F5FA; --accent-on:#fff; }
[data-accent="violet"] { --accent: #7C3AED; --accent-press:#6D28D9; --accent-soft:#F0E9FE; --accent-on:#fff; }
[data-accent="emerald"]{ --accent: #059669; --accent-press:#047857; --accent-soft:#DEF5EC; --accent-on:#fff; }
/* in dark theme keep the neon accent unless explicitly themed; accent attr still applies if set */