/* ================================================================
   DESIGN TOKENS — Ed Chen Portfolio
   Two fonts. One accent. Four text levels. 8px grid.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Inter:wght@200;300;400;500;600&display=swap');

:root {
  /* ── Backgrounds ── */
  --bg-void: #060810;
  --bg-deep: #0c0f1a;
  --bg-surface: #131720;
  --bg-elevated: rgba(255, 255, 255, 0.03);

  /* ── Text ── */
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.72);
  --text-tertiary: rgba(255, 255, 255, 0.45);
  --text-muted: rgba(255, 255, 255, 0.28);

  /* ── Accent (one only) ── */
  --accent: #c9a959;
  --accent-subtle: rgba(201, 169, 89, 0.12);
  --accent-hover: rgba(201, 169, 89, 0.20);

  /* ── Semantic ── */
  --success: #52b277;
  --danger: #e85d5d;

  /* ── Borders ── */
  --border: rgba(255, 255, 255, 0.06);
  --border-hover: rgba(255, 255, 255, 0.12);

  /* ── Typography ── */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Inter', -apple-system, 'Helvetica Neue', sans-serif;

  /* ── Spacing (8px grid) ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 80px;
  --space-11: 96px;
  --space-12: 128px;

  /* ── Radius ── */
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 12px;

  /* ── Motion ── */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: cubic-bezier(0, 0, 0.25, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;

  /* ── Legacy compatibility (v1 variable names) ── */
  --void: var(--bg-void);
  --deep: var(--bg-deep);
  --star-primary: var(--text-primary);
  --star-secondary: var(--text-secondary);
  --star-tertiary: var(--text-tertiary);
  --stardust-gold: var(--accent);
  --accent-nebula: var(--accent);
  --font-mono: var(--font-body);
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 12px;
  --duration-standard: 300ms;
  --duration-quick: 150ms;
  --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);

  /* ── Layout ── */
  --container-max: 1200px;
  --container-narrow: 800px;
  --container-wide: 1400px;
  --gutter: clamp(1rem, 4vw, 3rem);
}