/* ================================================================
   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);

  /* ── Accent opacity scale (token-first: no raw rgba in main.css) ── */
  --accent-03: rgba(201, 169, 89, 0.03);
  --accent-04: rgba(201, 169, 89, 0.04);
  --accent-05: rgba(201, 169, 89, 0.05);
  --accent-06: rgba(201, 169, 89, 0.06);
  --accent-08: rgba(201, 169, 89, 0.08);
  --accent-10: rgba(201, 169, 89, 0.10);
  /* --accent-subtle = 0.12 (above) */
  --accent-14: rgba(201, 169, 89, 0.14);
  --accent-15: rgba(201, 169, 89, 0.15);
  --accent-18: rgba(201, 169, 89, 0.18);
  /* --accent-hover = 0.20 (above) */
  --accent-25: rgba(201, 169, 89, 0.25);
  --accent-30: rgba(201, 169, 89, 0.30);
  --accent-35: rgba(201, 169, 89, 0.35);
  --accent-40: rgba(201, 169, 89, 0.40);
  --accent-50: rgba(201, 169, 89, 0.50);
  --accent-55: rgba(201, 169, 89, 0.55);
  --accent-70: rgba(201, 169, 89, 0.70);
  --accent-90: rgba(201, 169, 89, 0.90);
  --accent-07: rgba(201, 169, 89, 0.07);
  --accent-22: rgba(201, 169, 89, 0.22);
  --accent-28: rgba(201, 169, 89, 0.28);
  --accent-38: rgba(201, 169, 89, 0.38);
  --accent-80: rgba(201, 169, 89, 0.80);

  /* ── Semantic ── */
  --success: #52b277;
  --danger: #e85d5d;
  --color-positive: #16825d;
  --color-positive-subtle: rgba(22, 130, 93, 0.12);
  --color-negative: #c5303f;
  --color-negative-subtle: rgba(197, 48, 63, 0.12);
  --color-teal: #00d4aa;
  --color-teal-dark: #007a60;
  --color-teal-03: rgba(0, 212, 170, 0.03);
  --color-teal-04: rgba(0, 212, 170, 0.04);
  --color-teal-05: rgba(0, 212, 170, 0.05);
  --color-teal-06: rgba(0, 212, 170, 0.06);
  --color-teal-10: rgba(0, 212, 170, 0.10);
  --color-teal-12: rgba(0, 212, 170, 0.12);
  --color-teal-15: rgba(0, 212, 170, 0.15);
  --color-teal-20: rgba(0, 212, 170, 0.20);
  --color-teal-30: rgba(0, 212, 170, 0.30);
  --color-teal-70: rgba(0, 212, 170, 0.70);

  /* ── Additional semantic colors for Nova project ── */
  --color-slate-blue: #6495ED;
  --color-amber: #FF9800;

  /* ── 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;

  /* ── Shadows (elevation) ── */
  /* Primary shadow colour carries a warm gold undertone — the same principle
     Stripe uses blue-tinted shadows. Here gold (201,169,89) at low opacity
     makes elevation feel on-brand rather than generic. */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.22), 0 1px 2px rgba(0,0,0,0.14);
  --shadow-md:   0 4px 20px rgba(0,0,0,0.32), 0 2px 6px rgba(0,0,0,0.16);
  --shadow-lg:   0 8px 40px rgba(0,0,0,0.42), 0 2px 8px rgba(201,169,89,0.06);
  --shadow-xl:   0 16px 60px rgba(0,0,0,0.52), 0 4px 16px rgba(201,169,89,0.08);
  /* Card: ring border-as-shadow + depth + subtle gold ambient */
  --shadow-card: 0 0 0 1px rgba(255,255,255,0.05), 0 4px 24px rgba(0,0,0,0.35), 0 1px 4px rgba(201,169,89,0.04);
  /* Card elevated: gold-tinted ring on hover — brand identity in elevation */
  --shadow-card-hover: 0 0 0 1px rgba(201,169,89,0.14), 0 8px 40px rgba(0,0,0,0.45), 0 2px 8px rgba(201,169,89,0.08);

  /* ── 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);
}