/* ============================================
   VARIABLES & DESIGN TOKENS — Claude UI Style
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  /* Colors — 4 palette: black, white, gray, orange */
  --bg-primary: #ffffff;
  --bg-secondary: #f7f7f5;
  --bg-dark: #111111;
  --bg-darker: #080808;

  /* Orange — only accent */
  --accent: #f5600a;
  --accent-hover: #d94e06;
  --accent-subtle: rgba(245, 96, 10, 0.08);
  --accent-border: rgba(245, 96, 10, 0.2);

  /* Text */
  --text-primary: #0d0d0d;
  --text-secondary: #4a4a4a;
  --text-muted: #888888;
  --text-light: #ffffff;

  /* Borders */
  --border-light: #e5e5e5;
  --border-medium: #cccccc;
  --border-dark: rgba(255,255,255,0.1);

  /* Shadows */
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08), 0 8px 32px rgba(0,0,0,0.04);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.12);
  --shadow-accent: 0 4px 20px rgba(245, 96, 10, 0.3);

  /* Typography — Plus Jakarta Sans: distinctive, modern */
  --font-primary: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Spacing */
  --nav-height: 64px;
  --section-pad: 96px;
  --container-max: 1200px;

  /* Radius — Claude uses gentle radius */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 100px;

  /* Transitions — fast for integrated GPU performance */
  --ease: ease;
  --transition: 0.13s ease;
  --transition-med: 0.18s ease;

  /* Keep these for JS compatibility */
  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --accent-pink: var(--accent);
  --accent-blue: var(--accent);
  --bg-dark: #111111;
}