/* Hallmark · route: custom (bespoke) · structure: Signalbuch, every section hoists one ICS signal flag and re-reads its official meaning for the house
 * idea: "the International Code of Signals as wayfinding: ACQUA on the halyard, L for the kitchen, M for the rooms, C (yes) for weddings, G (pilot) for directions, K for contact"
 * paper: oklch(96.5% 0.012 85) sailcloth · accent: oklch(53% 0.2 28) signal red · display: Big Shoulders (opsz) · body: Newsreader
 * axes: light / display-condensed / warm · nav: bespoke masthead with flag swatches · footer: Ft5 statement (night paper)
 * enrichment: Tier B hand-built SVG (signal flags) + owner photographs · motion: one hoist entrance
 */

@font-face {
  font-family: "Big Shoulders";
  src: url("/fonts/big-shoulders-latin.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: "Newsreader";
  src: url("/fonts/newsreader-latin.woff2") format("woff2");
  font-weight: 200 800;
  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: "Newsreader";
  src: url("/fonts/newsreader-latin-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  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;
}

/* Metric-matched fallbacks keep layout shift low while the web fonts load. */
@font-face {
  font-family: "Big Shoulders Fallback";
  src: local("Arial Narrow"), local("ArialNarrow"), local("Roboto Condensed"), local("Arial");
  size-adjust: 88%;
  ascent-override: 100%;
  descent-override: 25%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Newsreader Fallback";
  src: local("Georgia");
  size-adjust: 94%;
  ascent-override: 96%;
  descent-override: 26%;
  line-gap-override: 0%;
}

:root {
  /* Paper and ink: sailcloth and Förde blue */
  --color-paper:        oklch(96.5% 0.012 85);
  --color-paper-2:      oklch(93.5% 0.016 85);
  --color-paper-3:      oklch(90%   0.02  85);
  --color-rule:         oklch(78%   0.016 85);
  --color-rule-2:       oklch(86%   0.014 85);
  --color-muted:        oklch(45%   0.025 258);
  --color-ink-2:        oklch(33%   0.035 258);
  --color-ink:          oklch(22%   0.035 258);

  /* One accent: signal red, used for the primary action, link hover and focus */
  --color-accent:        oklch(53% 0.2  28);
  --color-accent-strong: oklch(46% 0.19 28);
  --color-accent-ink:    oklch(98% 0.008 85);
  --color-focus:         oklch(55% 0.22 28);

  /* Night paper for the sauna band and the footer */
  --color-night:        oklch(24% 0.05  258);
  --color-night-2:      oklch(30% 0.05  258);
  --color-night-rule:   oklch(42% 0.04  258);
  --color-night-muted:  oklch(80% 0.025 255);
  --color-night-ink:    oklch(95% 0.012 85);
  --color-night-focus:  oklch(74% 0.16  28);

  /* Signal flag colours: illustration only, never UI */
  --flag-blue:   oklch(42%   0.16  262);
  --flag-red:    oklch(56%   0.21  27);
  --flag-yellow: oklch(86%   0.17  92);
  --flag-black:  oklch(20%   0.02  258);
  --flag-white:  oklch(98.5% 0.006 85);
  --flag-edge:   oklch(62%   0.03  258);
  --flag-rope:   oklch(52%   0.04  70);

  /* Type */
  --font-display: "Big Shoulders", "Big Shoulders Fallback", "Arial Narrow", sans-serif;
  --font-body:    "Newsreader", "Newsreader Fallback", Georgia, serif;

  --text-sm:      0.875rem;
  --text-base:    1.125rem;
  --text-lg:      1.5rem;
  --text-xl:      clamp(2.25rem, 2.4vw + 1.5rem, 3.5rem);
  --text-display: clamp(3.25rem, 6vw + 1rem, 6rem);

  --leading-tight: 1;
  --leading-snug:  1.25;
  --leading-body:  1.55;
  --tracking-label: 0.08em;

  /* Space: 4 pt scale */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  --measure:   62ch;
  --container: 78rem;
  --gutter:    clamp(1rem, 4vw, 3rem);

  /* Lines and corners */
  --rule-hair:   1px;
  --rule-strong: 2px;
  --radius-sm:   2px;

  /* Motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;

  /* Layers */
  --z-base:   1;
  --z-raised: 10;
  --z-sticky: 200;
}