/* Freddo — design tokens. Values come from docs/direction.md (sampled from the input photos). */
:root {
  /* 1. Raw palette — named after where it was sampled */
  --palette-sky-950: #061a35;   /* img-6 sky, extended upward */
  --palette-sky-900: #0b2f5c;   /* img-6 top edge */
  --palette-sky-800: #114881;   /* img-6 at 15% */
  --palette-sky-700: #094784;   /* img-1 top sky (RELOW field) */
  --palette-sky-500: #3a8dc9;   /* img-6 at 30% */
  --palette-sky-400: #75a9d2;   /* img-6 at 40% */
  --palette-sky-300: #a4c1d8;   /* img-6 at 49% */
  --palette-sky-200: #cbd7db;   /* img-6 at 55% */
  --palette-haze: #e9e6df;      /* img-6 at 61%: sky warms toward the horizon */
  --palette-horizon: #efebe0;   /* img-6 at 67%: warm horizon behind the ledge */
  --palette-sky-100: #e3e6eb;   /* img-6 horizon */
  --palette-ledge: #d6dde5;     /* img-6 ledge face */
  --palette-ledge-shade: #b9c3cf;
  --palette-cream: #f4f1e8;     /* PURESIP can cream, lightened */
  --palette-band: #fbfaf6;      /* ZONA white band */
  --palette-tomato: #ab1b1b;    /* img-3 backdrop */
  --palette-tomato-deep: #8a1414;
  --palette-orange: #e2622c;    /* RELOW orange can */
  --palette-mango: #eeb21f;     /* RELOW mango can */
  --palette-lime: #a5a91f;      /* img-2 lime field */
  --palette-lime-can: #d2d73d;  /* img-4 ZONA lime can */
  --palette-green: #2f8a3a;     /* RELOW lemon can */
  --palette-apple: #c9dcae;     /* PURE FROOT can */
  --palette-pool: #17696c;      /* img-5 pool, deepened for text */
  --palette-maracuja: #f39a4a;  /* img-6 middle can */
  --palette-slate: #46566b;
  --palette-ink-lime: #1f2a06;

  /* 2. Color roles */
  --color-bg: var(--palette-cream);
  --color-surface: var(--palette-band);
  --color-surface-2: var(--palette-ledge);
  --color-text: var(--palette-sky-900);
  --color-text-muted: var(--palette-slate);
  --color-text-on-dark: var(--palette-cream);
  --color-accent: var(--palette-tomato);
  --color-accent-strong: var(--palette-tomato-deep);
  --color-accent-2: var(--palette-mango);
  --color-border: var(--palette-sky-900);
  --color-rule: var(--palette-ledge-shade);
  --color-overlay: rgb(6 26 53 / 0.55);
  --color-focus: var(--palette-mango);
  --color-dark: var(--palette-sky-900);

  /* Label fields (one flat color per label, sampled from its photo) */
  --field-relow: var(--palette-sky-700);
  --field-puresip: var(--palette-lime);
  --field-purefroot: var(--palette-tomato);
  --field-zona: var(--palette-pool);
  --ink-on-lime: var(--palette-ink-lime);

  /* Flavour dots (can colors) */
  --flavour-orange: var(--palette-orange);
  --flavour-lemon: var(--palette-green);
  --flavour-mango: var(--palette-mango);
  --flavour-apple: var(--palette-lime-can);
  --flavour-crisp: var(--palette-apple);
  --flavour-yuzu: var(--palette-lime-can);
  --flavour-maracuja: var(--palette-maracuja);
  --flavour-manga: var(--palette-mango);

  /* Hero sky — stops sampled from img-6 (0 / 15 / 30 / 50 / 70 %) */
  --sky-0: var(--palette-sky-900);
  --sky-15: var(--palette-sky-800);
  --sky-30: var(--palette-sky-500);
  --sky-40: var(--palette-sky-400);
  --sky-49: var(--palette-sky-300);
  --sky-55: var(--palette-sky-200);
  --sky-61: var(--palette-haze);
  --sky-67: var(--palette-horizon);
  --sky-70: var(--palette-sky-100);
  --sky-top: var(--palette-sky-950);
  --ledge: var(--palette-ledge);
  --ledge-shade: var(--palette-ledge-shade);

  /* 3. Type */
  --font-display: "Fraunces", "Cooper Black", Georgia, serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --fvs-display: "SOFT" 100, "opsz" 144;
  --mask-solid: #000;
  --wdth-wide: 125;
  --wdth-normal: 100;

  --fs-wordmark: clamp(5.5rem, 3rem + 11vw, 13.5rem);
  --fs-footer-mark: clamp(6rem, 2rem + 24vw, 25rem);
  --fs-mega: clamp(9rem, 4rem + 22vw, 22rem);
  --fs-display: clamp(3.5rem, 2rem + 7vw, 9rem);
  --fs-h1: clamp(2.75rem, 1.8rem + 3.8vw, 5.25rem);
  --fs-h2: clamp(2.1rem, 1.5rem + 2.4vw, 3.6rem);
  --fs-h3: clamp(1.4rem, 1.15rem + 0.9vw, 1.85rem);
  --fs-band: clamp(1.6rem, 1.1rem + 1.6vw, 2.6rem);
  --fs-numeral: clamp(2.6rem, 1.6rem + 3.6vw, 5rem);
  --fs-lede: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;

  --lh-tight: 0.86;
  --lh-heading: 1.02;
  --lh-body: 1.55;
  --tracking-display: -0.035em;
  --tracking-label: 0.12em;

  /* 4. Space (base 4) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --section-pad: var(--space-10);
  --gutter: clamp(1rem, 0.4rem + 2.6vw, 2.5rem);
  --container: 82rem;
  --container-narrow: 46rem;
  --header-h: 4.5rem;

  /* Hero photo geometry (img-6 is 736×920; safe display ≤ 490px) */
  --hero-photo-w: min(30rem, 38cqw);
  --hero-ledge-angle: 8.9deg;   /* ledge edge measured at 68.5% (left) → 81% (right) of img-6 → atan(0.125 × 1.25) */
  --hero-ledge-y: 68.5%;        /* where the ledge meets the photo's left edge */

  /* 5. Shape & effects — hard sun, hard shadows */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-can: 1.25rem;
  --radius-pill: 999px;
  --shadow-hard: 0.375rem 0.375rem 0 var(--palette-sky-900);
  --shadow-hard-lg: 0.75rem 0.75rem 0 var(--palette-sky-900);
  --shadow-sun: 0.375rem 0.375rem 0 var(--palette-mango);
  --border-w: 2px;
  --dur-fast: 140ms;
  --dur-base: 260ms;
  --dur-slow: 520ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --lift: -0.6rem;
}

@media (max-width: 1199px) {
  :root {
    --section-pad: var(--space-9);
    --hero-photo-w: min(28rem, 50cqw);
  }
}

@media (max-width: 809px) {
  :root {
    --section-pad: var(--space-8);
    --header-h: 4rem;
    --fs-wordmark: clamp(5rem, 34vw, 8.5rem);
    --tracking-display: -0.03em;
    --hero-photo-w: 100%;
  }
}