:root {
  /* ── Page background ───────────────────────────────────────── */
  --bg:        #040816;

  /* ── Solid card surfaces (clearly lighter than --bg) ───────── */
  --card:      #101e38;
  --card2:     #132240;
  --card3:     #172848;
  --sidebar-bg:#0b1630;

  /* ── Input/interactive surfaces ────────────────────────────── */
  --surface:   rgba(255,255,255,0.06);
  --surface2:  rgba(255,255,255,0.10);
  --surface3:  rgba(255,255,255,0.14);
  --surface4:  rgba(255,255,255,0.20);
  --surface5:  rgba(255,255,255,0.28);

  /* ── Glass (only for inputs/modals) ────────────────────────── */
  --glass:        rgba(255,255,255,0.08);
  --glass2:       rgba(255,255,255,0.12);
  --glass-border: rgba(255,255,255,0.18);

  /* ── Borders ────────────────────────────────────────────────── */
  --border:   rgba(255,255,255,0.14);
  --border2:  rgba(255,255,255,0.22);
  --border3:  rgba(255,255,255,0.32);
  --border4:  rgba(255,255,255,0.48);

  /* ── Text ───────────────────────────────────────────────────── */
  --text:    #edf2ff;
  --text2:   #c8d5f0;
  --muted:   #3a4660;
  --muted2:  #6878a0;
  --muted3:  #8a98c0;

  /* ── Smart (orange/gold) ────────────────────────────────────── */
  --smart:          #f5a623;
  --smart-dim:      #c47d08;
  --smart-soft:     rgba(245,166,35,0.12);
  --smart-soft2:    rgba(245,166,35,0.20);
  --smart-glow:     rgba(245,166,35,0.40);
  --smart-glow2:    rgba(245,166,35,0.65);
  --smart-border:   rgba(245,166,35,0.35);
  --smart-grad:     linear-gradient(135deg,#f5a623 0%,#ef7c00 100%);

  /* ── Metfone (blue) ─────────────────────────────────────────── */
  --metfone:        #4f94f8;
  --metfone-dim:    #2563d4;
  --metfone-soft:   rgba(79,148,248,0.12);
  --metfone-soft2:  rgba(79,148,248,0.20);
  --metfone-glow:   rgba(79,148,248,0.40);
  --metfone-glow2:  rgba(79,148,248,0.65);
  --metfone-border: rgba(79,148,248,0.35);
  --metfone-grad:   linear-gradient(135deg,#4f94f8 0%,#1d5fd4 100%);

  /* ── Cellcard (green) ───────────────────────────────────────── */
  --cellcard:        #14c98c;
  --cellcard-dim:    #0a9268;
  --cellcard-soft:   rgba(20,201,140,0.12);
  --cellcard-soft2:  rgba(20,201,140,0.20);
  --cellcard-glow:   rgba(20,201,140,0.40);
  --cellcard-glow2:  rgba(20,201,140,0.65);
  --cellcard-border: rgba(20,201,140,0.35);
  --cellcard-grad:   linear-gradient(135deg,#14c98c 0%,#059669 100%);

  /* ── Status ─────────────────────────────────────────────────── */
  --success:       #22d46a;
  --success-dim:   #16a34a;
  --success-soft:  rgba(34,212,106,0.12);
  --success-soft2: rgba(34,212,106,0.22);
  --success-glow:  rgba(34,212,106,0.45);

  --warning:       #f5a623;
  --warning-soft:  rgba(245,166,35,0.12);
  --warning-soft2: rgba(245,166,35,0.22);

  --danger:        #f05252;
  --danger-dim:    #dc2626;
  --danger-soft:   rgba(240,82,82,0.12);
  --danger-soft2:  rgba(240,82,82,0.22);
  --danger-glow:   rgba(240,82,82,0.45);

  --info:          #38bdf8;
  --info-soft:     rgba(56,189,248,0.12);
  --info-soft2:    rgba(56,189,248,0.22);

  /* ── Gradients ──────────────────────────────────────────────── */
  --grad-brand:   linear-gradient(135deg,#f5a623 0%,#f05252 100%);
  --grad-cool:    linear-gradient(135deg,#4f94f8 0%,#a855f7 100%);
  --grad-surface: linear-gradient(180deg,var(--surface3),var(--surface2));
  --grad-shine:   linear-gradient(105deg,transparent 38%,rgba(255,255,255,0.08) 50%,transparent 62%);
  --grad-top:     linear-gradient(90deg,transparent,rgba(255,255,255,0.18),transparent);

  /* ── Typography ─────────────────────────────────────────────── */
  --font-heading: 'Syne', 'DM Sans', sans-serif;
  --font-body:    'Noto Sans Khmer', 'DM Sans', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* ── Spacing ─────────────────────────────────────────────────── */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px;
  --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s12:48px;

  /* ── Radius ──────────────────────────────────────────────────── */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius:     14px;
  --radius-lg:  18px;
  --radius-xl:  24px;
  --radius-2xl: 32px;
  --radius-full:9999px;

  /* ── Shadows ─────────────────────────────────────────────────── */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.6);
  --shadow:    0 4px 24px rgba(0,0,0,0.7);
  --shadow-lg: 0 12px 48px rgba(0,0,0,0.75);
  --shadow-xl: 0 28px 80px rgba(0,0,0,0.85);

  /* ── Layout ──────────────────────────────────────────────────── */
  --sidebar-w: 252px;

  /* ── Transitions ─────────────────────────────────────────────── */
  --t:       all 0.18s ease;
  --t-slow:  all 0.32s cubic-bezier(0.4,0,0.2,1);
  --t-spring:all 0.28s cubic-bezier(0.34,1.56,0.64,1);
}