/* MuscleDaddies fonts */
@font-face {
  font-family: 'Kabel';
  src: url('../assets/fonts/kabel.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PressStart2P';
  src: url('../assets/fonts/PressStart2P-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gondens';
  src: url('../assets/fonts/Gondens.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Core palette */
  --bg-primary: #1a1a1e;
  --bg-secondary: #222226;
  --bg-surface: #2a2a2f;

  /* Text */
  --text-primary: #f0ede6;
  --text-secondary: #8a8a8e;
  --text-tertiary: #5c5c60;

  /* Accents */
  --accent-teal: #7eb8d4;
  --accent-orange: #fa5d29;

  /* Brand palette (from whale logo) */
  --brand-blue: #7eb8d4;
  --brand-rose: #e8a0b4;
  --brand-navy: #2c3e50;
  --brand-blush: #fce4ec;

  /* Per-scene colors */
  --scene-about: #7eb8d4;
  --scene-about-accent: #e8a0b4;
  --scene-muscledaddies: #D9B34D;
  --scene-muscledaddies-accent: #E63333;
  --scene-musicboy: #7a8a5a;
  --scene-musicboy-accent: #b0b898;
  --scene-atlas: #f59e0b;
  --scene-atlas-accent: #a855f7;
  --scene-mixt: #06b6d4;
  --scene-mixt-accent: #f472b6;
  --scene-tonebar: #4a9eff;
  --scene-tonebar-accent: #e040d0;
  --scene-conear: #F2E2C8;
  --scene-conear-accent: #F75B8A;
  --scene-soundpower: #0a0a0e;
  --scene-soundpower-accent: #FF1493;
  --scene-locked: #666666;
  --scene-locked-accent: #444444;

  /* Dial */
  --dial-ring: #333338;
  --dial-segment-active: var(--accent-teal);
  --dial-segment-inactive: #444448;
  --dial-glow-color: rgba(126, 184, 212, 0.3);

  /* Typography */
  --font-display: 'Inter Tight', 'Syne', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --text-hero: clamp(1.5rem, 3vw, 2.5rem);
  --text-project-title: clamp(1.5rem, 3vw, 2.5rem);
  --text-body: clamp(0.875rem, 1.2vw, 1rem);
  --text-label: clamp(0.7rem, 0.9vw, 0.8rem);
  --text-splash: clamp(1.2rem, 3vw, 2rem);

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;

  /* Timing */
  --t-fast: 0.2s;
  --t-normal: 0.4s;
  --t-slow: 0.7s;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-index layers */
  --z-canvas: 0;
  --z-overlay: 1;
  --z-ui: 10;
  --z-dial: 20;
  --z-panel: 30;
  --z-nav: 40;
  --z-modal: 50;
  --z-splash: 100;
}