/* ============================================================
   Design Tokens — diturunkan dari tema folder /presentation
   ============================================================ */
:root {
  /* Surfaces */
  --bg:         #080c18;
  --panel:      #0f1722;
  --panel-2:    #131e2e;

  /* Accent */
  --accent:     #f97316;
  --accent-dim: rgba(249,115,22,0.14);
  --gold:       #fbbf24;
  --gold-dim:   rgba(251,191,36,0.12);

  /* Status */
  --green:      #22c55e;
  --blue:       #60a5fa;
  --purple:     #a855f7;
  --red:        #ef4444;

  /* Text */
  --ink:        #f8fafc;
  --muted:      #94a3b8;

  /* Lines & radius */
  --line:       rgba(255,255,255,0.08);
  --line-hot:   rgba(249,115,22,0.38);
  --r:          14px;
  --r-lg:       20px;
  --r-sm:       9px;

  /* Gradients */
  --grad-hot:   linear-gradient(90deg, var(--accent), var(--gold));
  --grad-card:  linear-gradient(160deg, rgba(249,115,22,.07), var(--panel));

  /* Glow */
  --glow-accent: 0 20px 60px rgba(249,115,22,.10);
  --glow-green:  0 20px 60px rgba(34,197,94,.08);

  /* Spacing */
  --s-1: 6px;  --s-2: 10px; --s-3: 14px; --s-4: 20px;
  --s-5: 28px; --s-6: 36px; --s-7: 56px; --s-8: 80px;

  /* Motion */
  --ease:   cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 0.18s;
  --t-base: 0.28s;
  --t-slow: 0.5s;

  /* Layout */
  --maxw: 1200px;
  --nav-h: 68px;

  /* Fonts */
  --font-head: 'Sora', 'Segoe UI', 'Trebuchet MS', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, Arial, sans-serif;
}

/* Light mode — accent & gold dipertahankan agar brand konsisten */
[data-theme="light"] {
  --bg:      #f4f6fb;
  --panel:   #ffffff;
  --panel-2: #eef1f7;
  --ink:     #0f1722;
  --muted:   #5a6577;
  --line:    rgba(8,12,24,0.10);
  --line-hot:rgba(249,115,22,0.45);
  --grad-card: linear-gradient(160deg, rgba(249,115,22,.06), var(--panel));
  --glow-accent: 0 18px 50px rgba(249,115,22,.14);
}