/*
 * THREEGLAU DESIGN TOKENS
 * Canonical design system — all products import this file.
 * Last updated: 2026-03-18
 *
 * Palette: Blue-shifted dark
 * Typography: Cormorant Garamond (display) + Darker Grotesque (body) + JetBrains Mono (code)
 */

:root {
  /* ─── Backgrounds ─── */
  --bg-void: #0a0e27;
  --bg-surface: #12192d;
  --bg-card: #1a2540;
  --bg-elevated: #222c4a;

  /* ─── Text ─── */
  --text-primary: #f5f7fa;
  --text-secondary: #b0b8c8;
  --text-tertiary: #7d8a9d;

  /* ─── Accent palette ─── */
  --accent-orange: #e87a2e;
  --accent-blue: #3d7cf5;
  --accent-green: #2dd4a8;

  /* ─── Accent dims (for subtle backgrounds) ─── */
  --accent-orange-dim: rgba(232, 122, 46, 0.10);
  --accent-blue-dim: rgba(61, 124, 245, 0.08);
  --accent-green-dim: rgba(45, 212, 168, 0.08);

  /* ─── Borders ─── */
  --border-subtle: rgba(176, 184, 200, 0.08);
  --border-hover: rgba(176, 184, 200, 0.15);
  --border-active: rgba(176, 184, 200, 0.25);

  /* ─── Semantic ─── */
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #3d7cf5;

  /* ─── Typography ─── */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Darker Grotesque', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* ─── Type scale ─── */
  --text-xs: 0.65rem;   /* 10.4px — mono labels */
  --text-sm: 0.7rem;    /* 11.2px — small labels */
  --text-base: 1rem;    /* 16px — body */
  --text-lg: 1.1rem;    /* 17.6px — card body */
  --text-xl: 1.3rem;    /* 20.8px — lead text */
  --text-2xl: 1.5rem;   /* 24px — section headers */
  --text-3xl: clamp(1.8rem, 3.5vw, 2.5rem);  /* section display */
  --text-4xl: clamp(2.8rem, 5.5vw, 4.2rem);  /* hero display */

  /* ─── Spacing (4px base) ─── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  --space-4xl: 64px;
  --space-section: 7rem;

  /* ─── Layout ─── */
  --max-width: 1200px;
  --border-radius: 0px;    /* sharp corners — institutional */
  --border-radius-sm: 2px;
  --border-radius-md: 4px;
  --border-radius-lg: 8px;

  /* ─── Motion ─── */
  --transition-fast: 150ms ease-out;
  --transition-base: 300ms ease;
  --transition-slow: 400ms ease;
  --transition-reveal: 800ms ease;

  /* ─── Shadows ─── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
}