:root,
:root[data-theme="dark"] {
  --bg-main: #07111f;
  --bg-panel: #0d1b2a;
  --bg-card: #13263a;
  --border-color: #294158;
  --border-strong: #3c5b75;
  --text-primary: #eaf2f8;
  --text-secondary: #93a4b7;
  --accent-blue: #37b6e9;
  --accent-blue-hover: #63c9ef;
  --accent-green: #42d392;
  --accent-yellow: #f5b942;
  --accent-red: #f06464;
  --accent-purple: #a78bfa;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --font-main: -apple-system, 'Segoe UI', Roboto, sans-serif;

  --shadow-card: 0 1px 0 rgba(255,255,255,0.025);

  /* ── DESAIN TAMBAHAN: gradient, glow, glass ── */
  --gradient-primary: linear-gradient(135deg, #1595ca 0%, #37b6e9 100%);
  --gradient-success: linear-gradient(135deg, #247f5a 0%, #42d392 100%);
  --gradient-danger: linear-gradient(135deg, #c94e58 0%, #f06464 100%);
  --gradient-panel: linear-gradient(145deg, #13263a 0%, #0f2031 100%);
  --gradient-radial-glow: radial-gradient(circle at 100% 0%, rgba(55,182,233,0.075), transparent 42%);

  --glow-blue: 0 0 0 3px rgba(55,182,233,0.16);
  --glow-green: 0 0 0 3px rgba(66,211,146,0.14);
  --glow-red: 0 0 0 3px rgba(240,100,100,0.16);

  --shadow-elevated: 0 18px 40px rgba(0, 8, 18, 0.28);
  --shadow-elevated-hover: 0 20px 44px rgba(0, 8, 18, 0.34);

  --glass-bg: rgba(7, 17, 31, 0.88);
  --glass-border: rgba(147,164,183,0.16);

  /* ── LAYOUT: tinggi elemen sticky (dipakai untuk offset posisi sticky child) ── */
  --topbar-height: 65px;
}

:root[data-theme="light"] {
  --bg-main: #edf4f7;
  --bg-panel: #f8fbfc;
  --bg-card: #ffffff;
  --border-color: #d5e1e8;
  --border-strong: #b8cad6;
  --text-primary: #102a3c;
  --text-secondary: #597184;
  --accent-blue: #087fab;
  --accent-blue-hover: #05688e;
  --accent-green: #18865b;
  --accent-yellow: #b87808;
  --accent-red: #c83e4b;
  --accent-purple: #7c3aed;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --font-main: -apple-system, 'Segoe UI', Roboto, sans-serif;

  --shadow-card: 0 1px 3px rgba(0,0,0,0.08);

  /* ── DESAIN TAMBAHAN: gradient, glow, glass ── */
  --gradient-primary: linear-gradient(135deg, #087fab 0%, #149dcc 100%);
  --gradient-success: linear-gradient(135deg, #18865b 0%, #32b879 100%);
  --gradient-danger: linear-gradient(135deg, #c83e4b 0%, #e6606d 100%);
  --gradient-panel: linear-gradient(145deg, #ffffff 0%, #f7fafb 100%);
  --gradient-radial-glow: radial-gradient(circle at 100% 0%, rgba(8,127,171,0.055), transparent 42%);

  --glow-blue: 0 0 0 3px rgba(8,127,171,0.14);
  --glow-green: 0 0 0 3px rgba(24,134,91,0.13);
  --glow-red: 0 0 0 3px rgba(200,62,75,0.13);

  --shadow-elevated: 0 16px 36px rgba(28,54,72,0.12);
  --shadow-elevated-hover: 0 18px 40px rgba(28,54,72,0.16);

  --glass-bg: rgba(248,251,252,0.9);
  --glass-border: rgba(184,202,214,0.6);

  /* ── LAYOUT: tinggi elemen sticky (dipakai untuk offset posisi sticky child) ── */
  --topbar-height: 65px;
}