/* theme.css: colours, fonts, type scale, space, shape and motion for Sperlonga Paradise ("Whitewash and maiolica").
   Lime-washed walls (calce), maiolica cobalt for every action, link and focus ring, one warm accent (giallo), the night sea
   (notte) for the footer band. Every text pair is at least 4.5:1 and every control boundary at least 3:1 (ratios beside each
   token). site.json "themeColor" is the cobalt, #1D4F91. */

/* Fonts: self-hosted OFL woff2, latin + latin-ext (src/assets/fonts/, licences alongside, rows in LICENCES.md).
   Never Google Fonts or Adobe Fonts: those send the visitor's IP to a third party.
   The two latin files are preloaded in src/_includes/partials/fonts.njk. Change both together. */
@font-face {
  font-family: "Bodoni Moda";
  src: url("/assets/fonts/bodoni-moda-latin-standard-normal.woff2") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("/assets/fonts/bodoni-moda-latin-ext-standard-normal.woff2") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/fonts/hanken-grotesk-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: only light;  /* the 3D view and every photo are daylight: no automatic dark mode */

  /* Calce and stone */
  --calce: #F6F4EF;          /* page background */
  --paper: #FFFFFF;          /* cards, inputs, tiles */
  --wall: #ECE8DF;           /* quiet panels, disabled fills */
  --grout: #D9D3C6;          /* hairlines and tile grout: decorative only */
  --line: #8C8574;           /* control boundaries: 3.67:1 on paper, 3.34:1 on calce */
  --line-quiet: #C9C2B4;     /* outline of a disabled control (keeps its shape; exempt from 3:1) */

  /* Ink */
  --ink: #14213A;            /* text: 14.60:1 on calce, 16.05:1 on paper */
  --ink-2: #4B5568;          /* secondary text: 6.83:1 on calce, 6.14:1 on wall */
  --ink-disabled: #6E6A60;   /* text of disabled controls */

  /* Maiolica cobalt: actions, links, focus */
  --cobalt: #1D4F91;         /* 7.41:1 on calce; white on it 8.14:1 */
  --cobalt-deep: #173F75;    /* hover */
  --cobalt-press: #11315C;   /* pressed; also text on --wash */
  --wash: #E8EEF7;           /* hover tint, selected range, info */
  --wash-press: #D9E4F3;     /* pressed tint */

  /* One warm accent */
  --giallo: #E6B547;         /* fills, the tile band, focus on dark: never text on light */
  --giallo-wash: #FBF1D6;    /* the nights chip */
  --giallo-ink: #5E3F05;     /* text on --giallo-wash: 8.52:1 */
  --ocra: #7A5206;           /* the accent as text on light (eyebrows): 6.29:1 on calce */

  /* Night sea */
  --notte: #0E2340;          /* footer band */
  --notte-2: #16305A;        /* tile band */
  --on-notte: #F6F4EF;       /* 14.33:1 on notte */
  --on-notte-2: #B9C3D3;     /* 8.86:1 on notte */

  /* Status */
  --rosso: #B42318;          /* errors only: 6.57:1 on paper */
  --rosso-wash: #FBEDEB;

  /* Over the 3D scene */
  --glass: rgb(248 246 241 / 0.96);          /* cards over the map: stays lime-white over the sea; contrast never depends on the scene */
  --glass-solid: #F8F6F1;                    /* without backdrop-filter */
  --glass-edge: rgb(255 255 255 / 0.7);
  --glass-blur: blur(20px) saturate(0.7);     /* what shows through is muted, so the card never turns teal */
  --scrim-rgb: 6 26 50;                       /* the hero scrim colour */
  --scrim-strength: 0.62;                     /* under every hero text line: white stays at 4.92:1 or more even over an all-white scene */
  --chip: rgb(246 244 239 / 0.92);            /* map credit chip */

  /* Focus: a 2 px gap in the surface colour, then a 2 px ring. Cobalt on light, giallo on the night band (.on-dark). */
  --focus: var(--cobalt);
  --focus-gap: var(--calce);

  /* Type. Bodoni Moda (500; 600 for the wordmark) only for h1-h3, the hero line, the wordmark, index and booking-bar names and
     the calendar month. Everything people read and press is Hanken Grotesk: never paragraphs, buttons, labels or form values
     in Bodoni. Times, dates, distances and counts use tabular lining figures (.num). */
  --font-display: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;
  --font-text: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-display: clamp(3rem, 1.7rem + 4.9vw, 5.5rem);         /* 48-88: hero h1 over the map */
  --fs-h1: clamp(2.75rem, 1.7rem + 4vw, 4.75rem);            /* 44-76: property name, page titles */
  --fs-h2: clamp(2.125rem, 1.7rem + 1.8vw, 3rem);            /* 34-48 */
  --fs-h2-card: clamp(2.125rem, 1.85rem + 1.1vw, 2.75rem);   /* 34-44: h2 on stop cards */
  --fs-h3: clamp(1.625rem, 1.45rem + 0.7vw, 2rem);           /* 26-32 */
  --fs-h4: 1.1875rem;                                        /* 19, Hanken 600 */
  --fs-lead: clamp(1.125rem, 1.06rem + 0.28vw, 1.3125rem);   /* 18-21 */
  --fs-body: 1.0625rem;                                      /* 17 */
  --fs-ui: 1rem;                                             /* 16: buttons, nav, inputs */
  --fs-small: 0.875rem;                                      /* 14 */
  --fs-label: 0.75rem;                                       /* 12: eyebrows, field and fact labels (caps) */
  /* Bodoni optical size: always set with font-variation-settings, never automatic */
  --opsz-map: 22;      /* over the map and on glass: sturdier hairlines */
  --opsz-page: 30;     /* headings on plain pages */
  --opsz-small: 16;    /* Bodoni under 30 px: wordmark, index names, calendar month */
  --lh-tight: 1.02;
  --lh-head: 1.1;
  --lh-body: 1.6;
  --track-label: 0.14em;

  /* Space: 4 px base */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --gutter: clamp(16px, 5.5vw, 112px);
  --page: 1216px;
  --measure: 36em;

  /* Shape: square-cut, corners only eased. No pills anywhere. */
  --r-1: 3px;    /* chips, plaques */
  --r-2: 4px;    /* buttons, inputs, photos */
  --r-3: 8px;    /* cards, panels */

  /* Depth */
  --shadow-1: 0 1px 2px rgb(14 35 64 / 0.10);
  --shadow-2: 0 1px 2px rgb(14 35 64 / 0.06), 0 8px 20px -8px rgb(14 35 64 / 0.20);
  --shadow-card: 0 0 0 1px rgb(14 35 64 / 0.06), 0 2px 4px rgb(14 35 64 / 0.05), 0 28px 64px -24px rgb(14 35 64 / 0.50);
  --shadow-pop: 0 0 0 1px rgb(14 35 64 / 0.08), 0 4px 8px rgb(14 35 64 / 0.06), 0 24px 48px -16px rgb(14 35 64 / 0.32);

  /* Motion: 120/200/360 ms on one curve; everything collapses under prefers-reduced-motion (site.css) */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-1: 120ms;   /* press */
  --dur-2: 200ms;   /* hover, colour */
  --dur-3: 360ms;   /* underlines, panels */

  /* Targets */
  --target: 44px;

  /* ---------- Aliases: the roadmap's names (other tracks use these with the same values as fallbacks) ---------- */
  --brand: var(--cobalt);
  --brand-hover: var(--cobalt-deep);
  --brand-contrast: #fff;
  --accent: var(--giallo);
  --marker: var(--cobalt);
  --glaze: var(--glass-solid);
  --deep: var(--notte);
  --deep-ink: var(--on-notte);
  --deep-muted: var(--on-notte-2);
  --control-border: var(--line);
  --r-action: var(--r-2);
  --r-tile: var(--r-1);
  --r-card: var(--r-3);
  --r-photo: var(--r-2);
  --step--1: var(--fs-small);
  --step-0: var(--fs-body);
  --step-1: var(--fs-lead);
  --step-2: var(--fs-h3);
  --step-3: var(--fs-h2);
  --step-4: var(--fs-h1);
  --step-5: var(--fs-display);
  --ease-out: var(--ease);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);   /* on-screen moves that start and stop on screen */
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-glide: cubic-bezier(0.35, 0, 0.15, 1);
  --dur-press: var(--dur-1);
  --dur-hover: var(--dur-2);
  --dur-ui: 260ms;
  --dur-enter: 480ms;
  --dur-page: 560ms;
  --sea-ink: var(--ink);

  /* ---------- The starter's names (base.css and older templates) ---------- */
  --bg: var(--calce);
  --surface: var(--wall);
  --text: var(--ink);
  --muted: var(--ink-2);
  --border: var(--grout);
  --font-body: var(--font-text);
  --font-heading: var(--font-display);
  --heading-weight: 500;
  --radius: var(--r-3);
  --radius-small: var(--r-2);
  --max-width: var(--page);
  --shadow: var(--shadow-2);
}