/* ==========================================================================
   Olsaar edition — design tokens (from the Olsaar Software brand kit:
   ink #0A0A0B, pink #FF3D71, grey #6B7280 / #9CA3AF on dark, dark #0B0D10).
   Same field system as v3 "High Water"; only the palette changed. Use variables, never raw values.

   The page is a sequence of colour FIELDS. Every section sets data-theme:
     paper (default) · paper-2 · flood · deep · abyss
   Each theme remaps the same semantic variables, so components work anywhere.
   ========================================================================== */

@font-face {
  font-family: "Mona Sans";
  src: url("../fonts/MonaSans-VF-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMono-VF-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Registered so getComputedStyle() resolves it to px: core.js and hero.js parseFloat() it. */
@property --nav-h {
  syntax: "<length>";
  inherits: true;
  initial-value: 64px;
}

:root {
  /* ---- Brand palette (fixed, theme-independent) ---- */
  --paper: #f6f6f7;      /* neutral paper: the base page */
  --paper-2: #ececef;    /* deeper paper: contact/FAQ band, wells */
  --white: #ffffff;
  --navy: #0a0a0b;       /* ink on paper */
  --flood: #ff3d71;      /* THE brand pink: full chapter fields, live state */
  --foam: #ffe0e9;       /* pale pink */
  --deep: #121419;       /* dark field: the fleet chapter */
  --abyss: #0b0d10;      /* the brand dark: footer */
  --buoy: #ff3d71;       /* signal: the brand pink */

  /* ---- Type ---- */
  --font-sans: "Mona Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- Layout ---- */
  --container: 82.5rem;
  --gutter: clamp(1.25rem, 4vw, 3.75rem);
  --section-y: clamp(4.5rem, 8.5vw, 8rem);
  --nav-h: 4rem;
  --crest-h: clamp(2.25rem, 6vw, 5.25rem);

  /* ---- Shape ---- */
  --r-1: 0.375rem;
  --r-2: 0.75rem;
  --r-3: 1.25rem;
  --r-4: 1.75rem;
  --r-pill: 999px;

  /* ---- Button depth: four stacked shadows (contact, near, mid, ambient), one set per kind of field ---- */
  --sh-ink: 0 1px 1px rgba(10, 10, 11, 0.12), 0 2px 4px -1px rgba(10, 10, 11, 0.14), 0 6px 12px -3px rgba(10, 10, 11, 0.18), 0 14px 28px -8px rgba(10, 10, 11, 0.26);
  --sh-ink-hover: 0 1px 1px rgba(10, 10, 11, 0.12), 0 3px 6px -1px rgba(10, 10, 11, 0.15), 0 10px 18px -4px rgba(10, 10, 11, 0.2), 0 22px 40px -10px rgba(10, 10, 11, 0.3);
  --sh-ink-soft: 0 0 0 1px rgba(10, 10, 11, 0.09), 0 1px 2px rgba(10, 10, 11, 0.06), 0 4px 8px -2px rgba(10, 10, 11, 0.08), 0 12px 24px -8px rgba(10, 10, 11, 0.12);
  --sh-ink-soft-hover: 0 0 0 1px rgba(10, 10, 11, 0.14), 0 2px 3px rgba(10, 10, 11, 0.07), 0 7px 14px -3px rgba(10, 10, 11, 0.1), 0 18px 32px -10px rgba(10, 10, 11, 0.16);
  /* on the pink field: a deep wine shade, so the shadow reads as pink in shadow, not grey */
  --sh-wine: 0 1px 1px rgba(92, 6, 32, 0.16), 0 2px 4px -1px rgba(92, 6, 32, 0.18), 0 6px 12px -3px rgba(92, 6, 32, 0.24), 0 14px 28px -8px rgba(92, 6, 32, 0.34);
  --sh-wine-hover: 0 1px 1px rgba(92, 6, 32, 0.16), 0 3px 6px -1px rgba(92, 6, 32, 0.2), 0 10px 18px -4px rgba(92, 6, 32, 0.26), 0 22px 40px -10px rgba(92, 6, 32, 0.38);
  /* on the dark fields: real depth close in, a soft pink glow further out (the button is pink there) */
  --sh-dark: 0 1px 1px rgba(0, 0, 0, 0.45), 0 2px 4px -1px rgba(0, 0, 0, 0.4), 0 6px 14px -4px rgba(255, 61, 113, 0.32), 0 16px 32px -10px rgba(255, 61, 113, 0.42);
  --sh-dark-hover: 0 1px 1px rgba(0, 0, 0, 0.45), 0 3px 6px -1px rgba(0, 0, 0, 0.4), 0 10px 20px -5px rgba(255, 61, 113, 0.38), 0 24px 44px -12px rgba(255, 61, 113, 0.5);
  --sh-dark-soft: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 1px 1px rgba(0, 0, 0, 0.45), 0 4px 10px -2px rgba(0, 0, 0, 0.4), 0 12px 24px -8px rgba(0, 0, 0, 0.5);
  --sh-dark-soft-hover: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 2px 3px rgba(0, 0, 0, 0.45), 0 7px 14px -3px rgba(0, 0, 0, 0.45), 0 18px 32px -10px rgba(0, 0, 0, 0.55);

  /* ---- Motion (CSS side; JS uses MF.ease) ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-tide: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-1: 150ms;
  --dur-2: 300ms;
}

/* ==========================================================================
   Themes. Semantic variables:
     --bg        field background          --surface   cards / figure panels
     --bg-2      wells / raised bands      --surface-2 hover / inner wells
     --fg        headings + strong text    --fg-2 body text    --fg-3 captions (AA)
     --line      hairlines                 --line-2    stronger borders
     --accent    brand mark colour in this field (fills, strokes, live state)
     --accent-fg text ON an accent fill    --link      text-safe link colour
     --ok/--warn/--err  status (diagrams only)
   Legacy aliases (--ink-*, --blue*) are kept so older rules keep working.
   ========================================================================== */

:root,
[data-theme="paper"] {
  --bg: var(--paper);
  --bg-2: var(--paper-2);
  --surface: #ffffff;
  --surface-2: #fafafa;
  --fg: #0a0a0b;
  --fg-2: #3d424c;
  --fg-3: #61687a;
  --line: rgba(10, 10, 11, 0.11);
  --line-2: rgba(10, 10, 11, 0.22);
  --accent: #ff3d71;
  --accent-fg: #0b0d10;
  --link: #c8124a;
  --ok: #0f7a57;
  --warn: #a86200;
  --err: #c5352b;
  --shadow: 0 1.5rem 3.75rem -1.75rem rgba(11, 13, 16, 0.28);
  --btn-bg: #0a0a0b;
  --btn-fg: #f6f6f7;
  --btn-bg-hover: #26272b;
  --ghost-bg: #ffffff;
  --ghost-bg-hover: #ffffff;
  --ghost-fg: #0a0a0b;
  --ghost-line: rgba(10, 10, 11, 0.22);
  --ghost-line-hover: #0a0a0b;
  --eyebrow-fg: #0a0a0b;
  --warn-fill: #f5a51b;
  color-scheme: light;

  --ink-0: var(--bg-2);
  --ink-1: var(--bg);
  --ink-2: var(--bg-2);
  --ink-3: var(--surface);
  --ink-4: var(--surface-2);
  --blue: var(--accent);
  --blue-2: var(--link);
  --blue-a: rgba(255, 61, 113, 0.12);
}

[data-theme="paper-2"] {
  --bg: var(--paper-2);
  --bg-2: #e2e2e6;
  --surface: #ffffff;
  --surface-2: #f6f6f7;
  --fg: #0a0a0b;
  --fg-2: #3d424c;
  --fg-3: #5b6170;
  --line: rgba(10, 10, 11, 0.12);
  --line-2: rgba(10, 10, 11, 0.24);
  --accent: #ff3d71;
  --accent-fg: #0b0d10;
  --link: #c8124a;
  --ok: #0f7a57;
  --warn: #a86200;
  --err: #c5352b;
  --shadow: 0 1.5rem 3.75rem -1.75rem rgba(11, 13, 16, 0.28);
  --btn-bg: #0a0a0b;
  --btn-fg: #f6f6f7;
  --btn-bg-hover: #26272b;
  --ghost-bg: #ffffff;
  --ghost-bg-hover: #ffffff;
  --ghost-fg: #0a0a0b;
  --ghost-line: rgba(10, 10, 11, 0.24);
  --ghost-line-hover: #0a0a0b;
  --eyebrow-fg: #0a0a0b;
  --warn-fill: #f5a51b;
  color-scheme: light;

  --ink-0: var(--bg-2);
  --ink-1: var(--bg);
  --ink-2: var(--bg-2);
  --ink-3: var(--surface);
  --ink-4: var(--surface-2);
  --blue: var(--accent);
  --blue-2: var(--link);
  --blue-a: rgba(255, 61, 113, 0.12);
}

/* The flood: a full field of brand pink. White for display type (>= 40px) only (3.4:1);
   body and UI text are ink (5.8:1). */
[data-theme="flood"] {
  --bg: var(--flood);
  --bg-2: #f5306a;
  --surface: #ffffff;
  --surface-2: #fff0f4;
  --fg: #ffffff;
  --fg-2: #0b0d10;
  --fg-3: #2b0812;
  --line: rgba(255, 255, 255, 0.3);
  --line-2: rgba(255, 255, 255, 0.55);
  --accent: #ffffff;
  --accent-fg: #0b0d10;
  --link: #0b0d10;
  --ok: #0b0d10;
  --warn: #0b0d10;
  --err: #0b0d10;
  --shadow: 0 1.875rem 3.75rem -1.5rem rgba(11, 13, 16, 0.4);
  --btn-bg: #ffffff;
  --btn-fg: #0b0d10;
  --btn-bg-hover: #ffe0e9;
  --ghost-bg: #0b0d10;
  --ghost-bg-hover: #1a1d23;
  --ghost-fg: #ffffff;
  --ghost-line: transparent;
  --ghost-line-hover: transparent;
  --eyebrow-fg: #0b0d10;
  --warn-fill: #0b0d10;
  color-scheme: light;

  --ink-0: var(--bg-2);
  --ink-1: var(--bg);
  --ink-2: var(--bg-2);
  --ink-3: var(--surface);
  --ink-4: var(--surface-2);
  --blue: var(--accent);
  --blue-2: var(--link);
  --blue-a: rgba(255, 255, 255, 0.18);
}

[data-theme="deep"] {
  --bg: var(--deep);
  --bg-2: #0f1115;
  --surface: #1b1e25;
  --surface-2: #232731;
  --fg: #ffffff;
  --fg-2: #d1d5db;
  --fg-3: #9ca3af;
  --line: rgba(229, 231, 235, 0.16);
  --line-2: rgba(229, 231, 235, 0.32);
  --accent: #ff3d71;
  --accent-fg: #0b0d10;
  --link: #ff7a9c;
  --ok: #56d9a4;
  --warn: #ffc35a;
  --err: #ff8076;
  --shadow: 0 1.875rem 4.375rem -1.625rem rgba(5, 6, 8, 0.6);
  --btn-bg: #ff3d71;
  --btn-fg: #0b0d10;
  --btn-bg-hover: #ff6890;
  --ghost-bg: rgba(255, 255, 255, 0.06);
  --ghost-bg-hover: rgba(255, 255, 255, 0.1);
  --ghost-fg: #ffffff;
  --ghost-line: rgba(229, 231, 235, 0.32);
  --ghost-line-hover: #ffffff;
  --eyebrow-fg: #ffffff;
  --warn-fill: #ffc35a;
  color-scheme: dark;

  --ink-0: var(--bg-2);
  --ink-1: var(--bg);
  --ink-2: var(--bg-2);
  --ink-3: var(--surface);
  --ink-4: var(--surface-2);
  --blue: var(--accent);
  --blue-2: var(--link);
  --blue-a: rgba(255, 61, 113, 0.22);
}

[data-theme="abyss"] {
  --bg: var(--abyss);
  --bg-2: #08090b;
  --surface: #15181e;
  --surface-2: #1c2028;
  --fg: #f3f4f6;
  --fg-2: #c4c8d0;
  --fg-3: #9ca3af;
  --line: rgba(229, 231, 235, 0.13);
  --line-2: rgba(229, 231, 235, 0.26);
  --accent: #ff3d71;
  --accent-fg: #0b0d10;
  --link: #ff7a9c;
  --ok: #56d9a4;
  --warn: #ffc35a;
  --err: #ff8076;
  --shadow: 0 1.875rem 4.375rem -1.625rem rgba(0, 0, 0, 0.6);
  --btn-bg: #ff3d71;
  --btn-fg: #0b0d10;
  --btn-bg-hover: #ff6890;
  --ghost-bg: rgba(255, 255, 255, 0.06);
  --ghost-bg-hover: rgba(255, 255, 255, 0.1);
  --ghost-fg: #f3f4f6;
  --ghost-line: rgba(229, 231, 235, 0.26);
  --ghost-line-hover: #f3f4f6;
  --eyebrow-fg: #f3f4f6;
  --warn-fill: #ffc35a;
  color-scheme: dark;

  --ink-0: var(--bg-2);
  --ink-1: var(--bg);
  --ink-2: var(--bg-2);
  --ink-3: var(--surface);
  --ink-4: var(--surface-2);
  --blue: var(--accent);
  --blue-2: var(--link);
  --blue-a: rgba(255, 61, 113, 0.2);
}

/* Olsaar logo colours per field: the <use href="#o-word|#o-mark"> symbols read these
   (--lg-1 olsaar / the o, --lg-2 software, --lg-3 the pink half of the underscore). From the brand kit's
   light, dark and pink versions. */
:root,
[data-theme="paper"],
[data-theme="paper-2"] { --lg-1: #0a0a0b; --lg-2: #6b7280; --lg-3: #ff3d71; }
[data-theme="flood"] { --lg-1: #ffffff; --lg-2: #ffffff; --lg-3: #0a0a0b; }
[data-theme="deep"],
[data-theme="abyss"] { --lg-1: #ffffff; --lg-2: #9ca3af; --lg-3: #ff3d71; }

/* Which button shadows each field uses (base.css .btn-primary / .btn-ghost read these). */
:root,
[data-theme="paper"],
[data-theme="paper-2"] { --btn-sh: var(--sh-ink); --btn-sh-hover: var(--sh-ink-hover); --ghost-sh: var(--sh-ink-soft); --ghost-sh-hover: var(--sh-ink-soft-hover); }
[data-theme="flood"] { --btn-sh: var(--sh-wine); --btn-sh-hover: var(--sh-wine-hover); --ghost-sh: var(--sh-wine); --ghost-sh-hover: var(--sh-wine-hover); }
[data-theme="deep"],
[data-theme="abyss"] { --btn-sh: var(--sh-dark); --btn-sh-hover: var(--sh-dark-hover); --ghost-sh: var(--sh-dark-soft); --ghost-sh-hover: var(--sh-dark-soft-hover); }

/* Any themed element paints its own field. */
[data-theme] {
  background-color: var(--bg);
  color: var(--fg-2);
}

/* Legacy: .theme-paper used by v2 sections maps to paper-2. */
.theme-paper {
  --bg: var(--paper-2);
  --bg-2: #e2e2e6;
  --surface: #ffffff;
  --surface-2: #f6f6f7;
  --fg: #0a0a0b;
  --fg-2: #3d424c;
  --fg-3: #5b6170;
  --line: rgba(10, 10, 11, 0.12);
  --line-2: rgba(10, 10, 11, 0.24);
  --ink-0: var(--bg-2);
  --ink-1: var(--bg);
  --ink-2: var(--bg-2);
  --ink-3: var(--surface);
  --ink-4: var(--surface-2);
  background-color: var(--bg);
}