/* Every visual value lives here. Names and values come from design/tokens.md. */
:root {
  /* Colours */
  --color-bg: #07130f;
  --color-surface: #0e2a21;
  --color-surface-deep: #0b2019;
  --color-emerald: #0f4d3a;
  --color-emerald-mid: #15503e;
  --color-emerald-bright: #1c7a5c;
  --color-map-road: #2d5a4a;
  --color-map-area: rgba(232, 137, 74, 0.28);
  --color-map-water: #0f3a44;
  --color-map-park: #103226;
  --color-map-label: #c9d2bf;
  --color-map-label-halo: #07130f;
  --color-map-attribution: rgba(7, 19, 15, 0.8);
  --color-copper: #c8622a;
  --color-copper-bright: #e8894a;
  --color-gold: #d9b45b;
  --color-gold-light: #f6e7a8;
  --color-gold-deep: #a97f2c;
  --color-text: #f5ecd9;
  --color-text-muted: #c9d2bf;
  --color-open: #6fe3a8;
  --color-border: rgba(217, 180, 91, 0.45);

  /* Gradients */
  --gradient-gold: linear-gradient(105deg, #a97f2c 0%, #d9b45b 28%, #f6e7a8 50%, #d9b45b 72%, #a97f2c 100%);
  --gradient-gold-text: linear-gradient(105deg, #d9b45b 0%, #f6e7a8 50%, #d9b45b 100%);
  --gradient-gold-frame: linear-gradient(135deg, #a97f2c 0%, #f6e7a8 50%, #a97f2c 100%);
  --gradient-arch: linear-gradient(135deg, #0e2a21 0%, #15503e 45%, #0f4d3a 60%, #0e2a21 100%);
  --gradient-copper: linear-gradient(135deg, #e8894a 0%, #c8622a 100%);
  --gradient-copper-text: linear-gradient(105deg, #e8894a 0%, #f6e7a8 50%, #e8894a 100%);
  --gradient-hero-bg: radial-gradient(120% 60% at 50% 30%, #0e2a21 0%, #07130f 70%);
  --gradient-section-bg: linear-gradient(170deg, #07130f 0%, #0e2a21 30%, #0f4d3a 70%, #0e2a21 100%);
  --gradient-section-bg-dark: linear-gradient(190deg, #0e2a21 0%, #07130f 45%, #0b2019 100%);
  --gradient-card: linear-gradient(145deg, #0e2a21 0%, #15503e 42%, #0e2a21 62%, #0b2019 100%);
  --gradient-text-solid: linear-gradient(#f5ecd9, #f5ecd9);
  --gradient-shine: linear-gradient(105deg, transparent 40%, #fffbe6 50%, transparent 60%);
  --gradient-button-shine: linear-gradient(105deg, transparent 30%, rgba(255, 251, 230, 0.75) 50%, transparent 70%);
  --gradient-bubble: radial-gradient(circle at 35% 30%, rgba(246, 231, 168, 0.8) 0%, rgba(217, 180, 91, 0.25) 55%, rgba(217, 180, 91, 0.1) 100%);

  /* Textures */
  --grain-image: url('/assets/svg/grain.svg');
  --grain-opacity: 0.08;
  --grain-blend: overlay;
  --strip-height: 24px;
  --strip-shape: polygon(0 0, 100% 60%, 100% 100%, 0 40%);
  --metal-text-descender: 0.12em;

  /* Fonts */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;

  /* Type scale, as `font` shorthands */
  --text-hero: 800 min(3.5rem, 14.3vw)/1.04 var(--font-display);
  --text-stop: 800 min(2.5rem, 10.2vw)/1.05 var(--font-display);
  --text-stop-later: 800 1.75rem/1.1 var(--font-display);
  --text-name: italic 800 1.75rem/1.1 var(--font-display);
  --text-lead: 400 1.25rem/1.3 var(--font-body);
  --text-body: 400 1rem/1.5 var(--font-body);
  --text-value: 700 1rem/1.5 var(--font-body);
  --text-button: 700 1rem/1.2 var(--font-body);
  --text-small: 400 0.875rem/1.4 var(--font-body);
  --text-chip: 500 0.875rem/1.5 var(--font-body);
  --text-badge: 700 0.875rem/1.2 var(--font-body);
  --text-label: 700 0.875rem/1.2 var(--font-body);
  --text-micro: 400 0.6875rem/1.2 var(--font-body);
  --tracking-hero: -0.01em;
  --tracking-label: 0.16em;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-14: 56px;

  /* Radii. The arch's oversized corners shrink to a true semicircle at any width. */
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-arch: 999px 999px 0 0;
  --radius-full: 999px;

  /* Shadows */
  --shadow-card: 0 16px 40px rgba(0, 0, 0, 0.5);

  /* Focus */
  --focus-ring: 2px solid var(--color-gold-light);
  --focus-offset: 3px;

  /* Sizes */
  --border-width: 1px;
  --tap-target: 44px;
  --button-height: 52px;
  --map-height: 200px;
  --map-area-size: 124px;
  --map-area-stroke: 1.5px;
  --map-area-radius-km: 2.5;
  --map-zoom: 9.5;
  --map-zoom-min: 6;
  --map-zoom-max: 11;
  --map-icon-filter: invert(1) sepia(0.5);
  --status-dot: 8px;
  --stop-detail-min: 8rem;

  /* Layout */
  --gutter: var(--space-6);
  --column-max: 40rem;
  --section-min-height: 90vh;
  --hero-min-height: 97vh;
  --gallery-tile-ratio: 1;

  /* Hero arch */
  --arch-max-width: 26rem;
  --arch-frame: 3px;
  --arch-crown: var(--space-14);

  /* Motifs */
  --motif-opacity: 0.55;
  --motif-coupe: min(3.5rem, 10vw);
  --motif-bubbles: 5.5rem;
  --motif-heel: 6.5rem;
  --motif-ball: 7rem;
  --motif-jar: 4.5rem;

  /* Word cloud: font sizes per step, and how far the -1 to 1 jitter reaches */
  --cloud-step-1: 1.125rem;
  --cloud-step-2: 1.5rem;
  --cloud-step-3: 2rem;
  --cloud-step-4: min(2.75rem, 10vw);
  --cloud-rotate-max: 5deg;
  --cloud-offset-max: 4px;

  /* Motion: durations and staggers, in seconds */
  --duration-reveal: 0.7s;
  --duration-pop: 0.5s;
  --duration-strip: 0.9s;
  --duration-shine: 1.2s;
  --duration-word: 1s;
  --duration-bubble: 9s;
  --duration-tip: 0.7s;
  --duration-land: 0.4s;
  --duration-shake: 0.45s;
  --duration-stamp: 0.5s;
  --duration-drop: 0.8s;
  --duration-map-fade: 0.5s;
  --delay-hero: 0.15s;
  --delay-gallery-hold: 0.7s;
  --stagger-reveal: 0.08s;
  --stagger-word: 0.05s;
  --stagger-tile: 0.06s;

  /* Motion: eases. --ease-gsap-* are GSAP ease names, read by js/motion.js. */
  --ease-css-wipe: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-css-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-css-shine: ease-in-out;
  --ease-gsap-reveal: power3.out;
  --ease-gsap-spring: back.out(1.7);
  --ease-gsap-stamp: back.out(2.6);
  --ease-gsap-drop: bounce.out;

  /* Motion: distances */
  --reveal-distance: 28px;
  --parallax-range: 40px;
  --cloud-scatter: 120px;
  --cloud-spin: 45deg;
  --tile-tip: 14deg;
  --tile-sag: 10px;
  --tile-fade: 0.25;
  --tile-start-scale: 0.6;
  --joke-shake: 8px;
  --joke-stamp-scale: 2.4;
  --joke-stamp-tilt: -6deg;
  --jar-drop: 90px;
  --mood-start-scale: 0.6;
  --shine-size: 300% 100%;

  /* Motion: bubbles */
  --bubble-count: 8;
  --bubble-size: 10px;
  --bubble-size-large: 16px;
  --bubble-opacity: 0.7;
  --bubble-rise: calc(-1 * var(--section-min-height));

  /* Layers */
  --layer-motif: 0;
  --layer-content: 1;
  --layer-strip: 2;
  --layer-grain: 5;
  --layer-ribbon: 10;
}

@supports (height: 1svh) {
  :root {
    --section-min-height: 90svh;
    --hero-min-height: 97svh;
  }
}