/**
 * SAM ANGELO PHOTOGRAPHY & FILMS
 * Design Tokens & Theme Variables
 */

:root {
  /* ==========================================================================
     Color System (Monochrome Warm-Neutral Luxury Palette)
     ========================================================================== */
  --canvas: #F7F4EE;
  --surface: #EFE9DF;
  --surface-soft: #E7E0D5;
  --paper: #FCFBF8;

  --ink: #1D2020;
  --ink-soft: #343938;
  --ink-muted: #6D7471;
  --ink-faint: #929793;

  --olive-grey: #7C857E;
  --stone: #B6AEA3;
  --warm-grey: #D4CEC5;

  --accent-warm: #B89568;
  --accent-soft: rgba(184, 149, 104, 0.12);
  --accent-glow: rgba(184, 149, 104, 0.25);

  --white: #FFFFFF;
  --black: #0B0C0C;
  --line: rgba(29, 32, 32, 0.12);
  --line-strong: rgba(29, 32, 32, 0.24);
  --line-faint: rgba(29, 32, 32, 0.06);

  /* Dark Cinema Overlay Palette */
  --cinema-bg: #0D0F0E;
  --cinema-surface: #151817;
  --cinema-ink: #F7F4EE;
  --cinema-ink-muted: #9DA3A0;
  --cinema-line: rgba(247, 244, 238, 0.12);

  /* ==========================================================================
     Typography Families & Sizes
     ========================================================================== */
  --font-display: 'Cormorant Garamond', 'Instrument Serif', 'DM Serif Display', Georgia, serif;
  --font-sans: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, Monaco, monospace;

  /* ==========================================================================
     Layout & Spacing
     ========================================================================== */
  --max-width: 1480px;
  --max-width-narrow: 1080px;
  --max-width-text: 740px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --section-pad: clamp(4.5rem, 9vw, 9rem);
  --section-pad-compact: clamp(3rem, 6vw, 6rem);

  /* Header heights */
  --header-height: 84px;
  --header-height-scrolled: 68px;
  --mobile-bar-height: 64px;

  /* ==========================================================================
     Transitions & Motion
     ========================================================================== */
  --ease-cinematic: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-editorial: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-quick: 200ms;
  --duration-normal: 400ms;
  --duration-slow: 750ms;
  --duration-cinematic: 1200ms;

  /* ==========================================================================
     Elevation & Film Ratios
     ========================================================================== */
  --shadow-subtle: 0 4px 20px rgba(29, 32, 32, 0.04);
  --shadow-medium: 0 12px 36px rgba(29, 32, 32, 0.08);
  --shadow-cinema: 0 24px 60px rgba(0, 0, 0, 0.45);

  --aspect-cinema: 2.39 / 1;
  --aspect-film: 16 / 9;
  --aspect-portrait: 4 / 5;
  --aspect-tall: 3 / 4;
  --aspect-square: 1 / 1;
  --aspect-classic: 3 / 2;

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-full: 9999px;
}