/* === Design Tokens — Amalienborg Brygge === */
:root {
  /* Brand Colors */
  --brand-green: #1B4D2E;
  --brand-green-light: #2A6B42;
  --brand-green-dark: #0F2E1A;
  --brand-green-muted: #3D7A55;

  /* Neutrals */
  --cream: #F7F3ED;
  --cream-warm: #F3EDE4;
  --sand: #E8E0D4;
  --sand-light: #EDE7DD;
  --stone: #C4B9A8;
  --stone-dark: #9E9384;
  --warm-white: #FDFCFA;
  --off-white: #FAF8F5;

  /* Text */
  --text-dark: #1A1A18;
  --text-body: #2D2B28;
  --text-muted: #6B6358;
  --text-light: #998E7F;
  --text-on-dark: #F7F3ED;
  --text-on-green: #F3EDE4;

  /* Accents */
  --cta-warm: #B8874A;
  --cta-warm-hover: #A07540;
  --accent-gold: #C9A96E;
  --accent-copper: #B4845C;

  /* Spacing Scale */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;
  --space-4xl: 12rem;

  /* Container */
  --container-max: 1320px;
  --container-narrow: 860px;
  --container-wide: 1600px;
  --gutter: clamp(1.5rem, 4vw, 4rem);

  /* Borders & Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --border-subtle: 1px solid rgba(196, 185, 168, 0.3);

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(26, 26, 24, 0.04);
  --shadow-md: 0 4px 24px rgba(26, 26, 24, 0.08);
  --shadow-lg: 0 8px 48px rgba(26, 26, 24, 0.12);
  --shadow-xl: 0 16px 64px rgba(26, 26, 24, 0.16);

  /* Premium Shadow Layers */
  --shadow-card: 0 1px 3px rgba(26,26,24,0.03), 0 4px 16px rgba(26,26,24,0.05);
  --shadow-card-hover: 0 8px 30px rgba(26,26,24,0.09), 0 2px 8px rgba(26,26,24,0.04);
  --shadow-float: 0 12px 40px rgba(26,26,24,0.09), 0 0 0 1px rgba(196,185,168,0.06);
  --shadow-cinematic: 0 24px 80px rgba(15,46,26,0.16), 0 8px 24px rgba(26,26,24,0.07);
  --shadow-glow-gold: 0 0 24px rgba(201,169,110,0.12);

  /* Surfaces & Glass */
  --surface-card: #FDFCFA;
  --surface-elevated: #FFFFFF;
  --surface-glass: rgba(253,252,250,0.82);
  --surface-glass-dark: rgba(15,46,26,0.88);

  /* Atmospheric Gradients */
  --gradient-hero: linear-gradient(to top, rgba(15,46,26,0.82) 0%, rgba(15,46,26,0.35) 45%, transparent 75%);
  --gradient-vignette: radial-gradient(ellipse at center, transparent 55%, rgba(15,46,26,0.10) 100%);
  --gradient-warm-fade: linear-gradient(to bottom, var(--cream) 0%, transparent 100%);
  --gradient-section-join: linear-gradient(to bottom, transparent, rgba(232,224,212,0.2) 50%, transparent);

  /* Premium Borders */
  --border-warm: 1px solid rgba(201,169,110,0.12);
  --border-ghost: 1px solid rgba(196,185,168,0.12);

  /* Transitions — Luxury Motion System */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-luxury: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-reveal: cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-atmospheric: cubic-bezier(0.4, 0, 0, 1);
  --duration-fast: 200ms;
  --duration-normal: 400ms;
  --duration-hover: 550ms;
  --duration-slow: 700ms;
  --duration-cinematic: 800ms;
  --duration-reveal: 900ms;
  --duration-atmospheric: 1400ms;

  /* Material Surfaces */
  --surface-paper: #FCFAF7;
  --surface-linen: #F8F4EE;

  /* Ambient Shadows */
  --shadow-ambient: 0 0 0 1px rgba(196,185,168,0.05), 0 1px 2px rgba(26,26,24,0.02);

  /* Image Treatment — Architectural Photography */
  --img-warmth: saturate(1.05) brightness(1.01) contrast(1.02);
  --img-warmth-hover: saturate(1.08) brightness(1.03) contrast(1.02);
  --img-vignette: radial-gradient(ellipse at center, transparent 55%, rgba(15,46,26,0.07) 100%);

  /* Interactive Accent (360° viewer) */
  --accent-interactive: #00E89C;

  /* Z-index */
  --z-nav: 1000;
  --z-overlay: 900;
  --z-modal: 1100;
  --z-fullscreen: 1300;
}