/* ============================================================
   DESIGN TOKENS
   ============================================================ */

:root {
  /* ---- Surface ---- */
  --bg-page:       #fafafa;
  --bg-surface:    #ffffff;
  --bg-elevated:   #ffffff;
  --bg-subtle:     #f4f4f5;

  /* ---- Text ---- */
  --text-primary:  #18181b;
  --text-secondary:#52525b;
  --text-tertiary: #a1a1aa;
  --text-inverse:  #fafafa;

  /* ---- Accent ---- */
  --accent:        #2563eb;
  --accent-hover:  #1d4ed8;
  --accent-subtle: #eff6ff;

  /* ---- Border ---- */
  --border:        #e4e4e7;
  --border-subtle: #f4f4f5;

  /* ---- Semantic ---- */
  --success:       #16a34a;
  --error:         #dc2626;

  /* ---- Typography ---- */
  --font-heading:  'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:     'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  /* ---- Layout ---- */
  --nav-h:         64px;
  --radius:        8px;
  --radius-sm:     6px;
  --radius-lg:     12px;
  --container:     1120px;
  --container-sm:  720px;

  /* ---- Spacing ---- */
  --section-y:     clamp(5rem, 10vw, 8rem);
  --section-x:     clamp(1.25rem, 4vw, 2rem);

  /* ---- Shadows ---- */
  --shadow-xs:     0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:     0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:     0 4px 6px -1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(0,0,0,0.04);
  --shadow-lg:     0 10px 15px -3px rgba(0,0,0,0.06), 0 4px 6px -4px rgba(0,0,0,0.04);

  /* ---- Transition ---- */
  --ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --duration:      0.2s;
  --transition:    var(--duration) var(--ease);
}

/* ---- Dark Theme ---- */
[data-theme="dark"] {
  --bg-page:       #09090b;
  --bg-surface:    #18181b;
  --bg-elevated:   #27272a;
  --bg-subtle:     #18181b;

  --text-primary:  #fafafa;
  --text-secondary:#a1a1aa;
  --text-tertiary: #71717a;
  --text-inverse:  #18181b;

  --accent:        #3b82f6;
  --accent-hover:  #60a5fa;
  --accent-subtle: rgba(59, 130, 246, 0.08);

  --border:        #27272a;
  --border-subtle: #1f1f23;

  --shadow-xs:     0 1px 2px rgba(0,0,0,0.2);
  --shadow-sm:     0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --shadow-md:     0 4px 6px -1px rgba(0,0,0,0.3), 0 2px 4px -2px rgba(0,0,0,0.2);
  --shadow-lg:     0 10px 15px -3px rgba(0,0,0,0.3), 0 4px 6px -4px rgba(0,0,0,0.2);
}