/* ================================================================
   LetterForge AI — Design Tokens
   Dark editorial-industrial · Amber accent · Syne/DM Mono/Lora
   ================================================================ */

:root {
  /* ── Base Palette ─────────────────────────────────────────── */
  --bg:          #0c0c0e;
  --bg-2:        #111114;
  --surface:     #16161a;
  --surface-2:   #1e1e24;
  --surface-3:   #26262e;
  --border:      #2a2a34;
  --border-soft: #22222a;

  /* ── Accent: Amber/Gold ───────────────────────────────────── */
  --accent:       #f5a623;
  --accent-dim:   #c47d10;
  --accent-glow:  rgba(245, 166, 35, 0.18);
  --accent-text:  #ffc04d;

  /* ── Semantic Colors ──────────────────────────────────────── */
  --emerald:      #34d399;
  --emerald-dim:  rgba(52, 211, 153, 0.15);
  --sky:          #38bdf8;
  --sky-dim:      rgba(56, 189, 248, 0.15);
  --violet:       #a78bfa;
  --violet-dim:   rgba(167, 139, 250, 0.15);
  --rose:         #fb7185;
  --rose-dim:     rgba(251, 113, 133, 0.15);
  --amber:        #fbbf24;
  --amber-dim:    rgba(251, 191, 36, 0.15);

  /* ── Typography ───────────────────────────────────────────── */
  --font-display: 'Inter', sans-serif;
  --font-mono:    'Fira Code', monospace;
  --font-body:    'Inter', sans-serif;

  /* ── Text ─────────────────────────────────────────────────── */
  --text-primary:   #f0f0f4;
  --text-secondary: #9090a8;
  --text-muted:     #5a5a72;
  --text-accent:    var(--accent-text);

  /* ── Spacing ──────────────────────────────────────────────── */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* ── Radii ────────────────────────────────────────────────── */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-full: 9999px;

  /* ── Shadows ──────────────────────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.4);
  --shadow-md:  0 4px 16px rgba(0,0,0,.5);
  --shadow-lg:  0 8px 32px rgba(0,0,0,.6);
  --shadow-accent: 0 0 24px var(--accent-glow);

  /* ── Layout ───────────────────────────────────────────────── */
  --sidebar-width:        248px;
  --sidebar-collapsed:    64px;
  --topbar-height:        56px;
  --page-padding:         28px;

  /* ── Transitions ──────────────────────────────────────────── */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:  150ms;
  --dur-med:   280ms;
  --dur-slow:  450ms;
}