@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');

:root {
  /* Fonts */
  --font-display: 'Geist', sans-serif;
  --font-serif: 'Source Serif 4', serif;
  --font-body: 'Source Sans 3', sans-serif;

  /* Spacing */
  --space-xs: 0.25rem;
  /* 4px */
  --space-sm: 0.5rem;
  /* 8px */
  --space-md: 1rem;
  /* 16px */
  --space-lg: 1.5rem;
  /* 24px */
  --space-xl: 2rem;
  /* 32px */
  --space-2xl: 3rem;
  /* 48px */
  --space-3xl: 4.5rem;
  /* 72px */
  --space-4xl: 6rem;
  /* 96px */
  --space-5xl: 8rem;
  /* 128px */

  /* Border Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 33px;
  /* Pill card corner from Figma */
  --radius-xl: 70px;
  /* Extra round top-left corners from Figma */
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-smooth: 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.8s cubic-bezier(0.16, 1, 0.3, 1);

  /* Shadows */
  --shadow-sm: 0 2px 10px rgba(63, 55, 60, 0.05);
  --shadow-md: 0 10px 30px rgba(63, 55, 60, 0.1);
  --shadow-glow: 0 0 30px rgba(195, 68, 46, 0.15);

  /* Layout */
  --max-width: 1400px;
  --header-height: 90px;

  /* Light Theme Tokens (Figma Default) */
  --bg-primary: #ebd1b6;
  /* Warm cream background */
  --bg-secondary: #dbc6af;
  /* Value/Skill cards */
  --bg-tertiary: #c0af9a;
  /* Hover states */
  --bg-body-darker: #bfb3a2;
  --bg-avatar-orange: #dd987f;

  --text-primary: #3f373c;
  /* Slate-charcoal main text */
  --text-secondary: #463d41;
  /* Headings */
  --text-muted: #73676e;

  --color-border: #3f373c;
  --color-border-alpha: rgba(63, 55, 60, 0.2);
  --color-accent: #c3442e;
  /* Rust Orange-Red */

  /* Parallax and Image Adjustments in Light Mode */
  --img-filter: none;
  --img-opacity: 0.8;
}

/* Dark Theme Tokens (Warm Espresso / Cocoa theme) */
[data-theme="dark"] {
  --bg-primary: #181416;
  /* Deep warm dark espresso */
  --bg-secondary: #272124;
  /* Darker cocoa warm card */
  --bg-tertiary: #383034;
  /* Interactive highlights */
  --bg-body-darker: #42383c;
  --bg-avatar-orange: #a65842;

  --text-primary: #f5eae6;
  /* Soft warm off-white */
  --text-secondary: #faf7f5;
  --text-muted: #a08e94;

  --color-border: #f5eae6;
  --color-border-alpha: rgba(245, 234, 230, 0.2);
  --color-accent: #e55c45;
  /* Highlighted/Brightened Rust Red */

  /* Parallax and Image Adjustments in Dark Mode (Moody night scene) */
  --img-filter: brightness(0.28) contrast(1.15) saturate(0.65) hue-rotate(10deg);
  --img-opacity: 0.8;

  /* Logo stroke color — white in dark mode */
  --stroke-0: #faf7f5;
}