/*
  Design tokens: theme B2 "Contour" (Chart Datum as cartographic texture).
  site.css reads only these custom properties. Day palette by default. The night palette
  follows prefers-color-scheme: dark, or data-theme="dark" set by the header toggle
  (assets/mode.js); data-theme="light" forces the day palette.
  Fonts are self-hosted (SIL Open Font License; licences in assets/fonts/), latin subset.
  Type scale and spacing follow aimock.copilotkit.dev.
*/
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/instrument-sans-latin-var.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/instrument-sans-italic-latin-var.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/assets/fonts/jetbrains-mono-latin-var.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/jetbrains-mono-400-italic-latin.woff2") format("woff2"); }

:root {
  color-scheme: light;

  /* Typography: the type system of aimock.copilotkit.dev. Instrument Sans for prose and
     headings; JetBrains Mono for the brand, labels, buttons, numbers, coordinates and code. */
  --font-sans: "Instrument Sans", -apple-system, system-ui, "Segoe UI", sans-serif;
  --font-body: var(--font-sans);
  --font-heading: var(--font-sans);
  --font-display: var(--font-sans);
  --font-label: var(--font-sans);                 /* italic only: hydrographic names, as on charts */
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;
  --font-features-mono: "liga" 0, "calt" 0;
  --font-size-base: 1rem;
  --font-size-small: 0.875rem;
  --font-size-label: 0.8rem;                      /* mono labels, table heads */
  --font-size-eyebrow: 0.72rem;                   /* mono, uppercase, tracked */
  --font-size-lead: 1.2rem;
  --font-size-sub: 1.15rem;                       /* section introductions */
  --font-size-display: clamp(2rem, 1rem + 4.2vw, 4.5rem);
  --font-size-h1: clamp(2rem, 1.1rem + 3.4vw, 3.5rem);
  --font-size-h2: clamp(1.6rem, 1.1rem + 2vw, 2.8rem);
  --font-size-h3: 1.05rem;
  --line-height-body: 1.6;                        /* interface text: navigation, tables, captions */
  --line-height-prose: 1.7;                       /* running text: paragraphs, list items */
  --line-height-lead: 1.7;
  --line-height-heading: 1.1;
  --font-weight-heading: 700;
  --tracking-display: -0.03em;                   /* Home hero only, as on the aimock hero */
  --tracking-title: -0.02em;                      /* page titles, as on the aimock docs */
  --tracking-heading: -0.02em;                    /* Home section headings, as on the aimock home */
  --tracking-doc: -0.01em;                        /* headings inside documentation pages (aimock docs: 0) */
  --tracking-eyebrow: 0.14em;
  --measure: 68ch;
  --measure-lead: 40rem;                          /* lead and section introductions */

  /* Spacing */
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-7: 3.5rem;
  --space-8: clamp(3rem, 2rem + 3vw, 4.5rem);
  --space-flow: 1.25rem;                          /* between paragraphs */
  --space-head: clamp(2rem, 1rem + 3vw, 3.5rem);  /* below a section introduction */
  --gutter: clamp(1rem, 0.4rem + 2.6vw, 2rem);
  --content-max: 70rem;
  --header-h: 4rem;                               /* sticky header height, for scroll-margin */

  /* Layers */
  --z-sticky: 20;
  --z-skip: 30;

  /* Shape */
  --radius-sm: 2px; --radius-md: 4px; --border-width: 1px;
  --graticule: 120px 110px;  /* graticule cell, as in the hero chart */

  /* Motion */
  --duration-fast: 160ms;
  --easing: cubic-bezier(0.22, 1, 0.36, 1);      /* ease-out-quint */
  --easing-expo: cubic-bezier(0.16, 1, 0.3, 1);  /* ease-out-expo */

  /* Colour: day */
  --color-bg: oklch(1 0 0);
  --color-surface: oklch(0.955 0.018 230);
  --color-text: oklch(0.2 0.02 260);
  --color-text-muted: oklch(0.46 0.03 255);
  /* Running text is one step softer than headings, as on aimock. It follows the muted
     colour in both palettes, so check-contrast.mjs covers it (text-muted pairs). */
  --color-prose: var(--color-text-muted);
  --color-border: oklch(0.86 0.02 240);
  --color-link: oklch(0.5 0.21 345);
  --color-link-hover: oklch(0.38 0.17 345);
  --color-accent: oklch(0.5 0.21 345);
  --color-focus: oklch(0.5 0.21 345);
  --color-note-bg: oklch(1 0 0);
  --color-note-border: oklch(0.5 0.21 345);
  --color-note-text: oklch(0.2 0.02 260);
  --color-code-bg: oklch(0.955 0.018 230);
  --color-code-text: oklch(0.2 0.02 260);
  --color-shoal: oklch(0.86 0.06 225);
  --color-shallow: oklch(0.92 0.04 225);
  --color-land: oklch(0.89 0.075 85);
  --color-coast: oklch(0.2 0.02 260);
  --color-on-accent: oklch(1 0 0);
  --color-grat: oklch(0.83 0.035 235);
  --color-contour: oklch(0.55 0.07 235);
  --color-sounding: oklch(0.42 0.04 250);
  --color-d10: oklch(0.95 0.025 225);
  --color-panel: oklch(1 0 0);
  --color-plot-official: oklch(0.2 0.02 260);
  --color-plot-ticon: oklch(0.52 0.12 240);
  --color-plot-fit: oklch(0.5 0.21 345);
  --color-plot-grid: oklch(0.9 0.02 235);
  --color-plot-grid-strong: oklch(0.78 0.03 240);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: oklch(0.15 0.005 250);
    --color-surface: oklch(0.2 0.008 250);
    --color-text: oklch(0.86 0.008 250);
    --color-text-muted: oklch(0.68 0.012 250);
    --color-border: oklch(0.3 0.01 250);
    --color-link: oklch(0.68 0.12 158);
    --color-link-hover: oklch(0.78 0.09 160);
    --color-accent: oklch(0.68 0.12 158);
    --color-focus: oklch(0.68 0.12 158);
    --color-note-bg: oklch(0.15 0.005 250);
    --color-note-border: oklch(0.68 0.12 158);
    --color-note-text: oklch(0.86 0.008 250);
    --color-code-bg: oklch(0.2 0.008 250);
    --color-code-text: oklch(0.86 0.008 250);
    --color-shoal: oklch(0.3 0.045 235);
    --color-shallow: oklch(0.22 0.03 235);
    --color-land: oklch(0.34 0.04 85);
    --color-coast: oklch(0.66 0.012 250);
    --color-on-accent: oklch(0.15 0.005 250);
    --color-grat: oklch(0.27 0.02 245);
    --color-contour: oklch(0.5 0.05 235);
    --color-sounding: oklch(0.68 0.02 245);
    --color-d10: oklch(0.18 0.018 240);
    --color-panel: oklch(0.15 0.005 250);
    --color-plot-official: oklch(0.86 0.008 250);
    --color-plot-ticon: oklch(0.8 0.1 225);
    --color-plot-fit: oklch(0.68 0.12 158);
    --color-plot-grid: oklch(0.27 0.02 245);
    --color-plot-grid-strong: oklch(0.4 0.03 245);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: oklch(0.15 0.005 250);
  --color-surface: oklch(0.2 0.008 250);
  --color-text: oklch(0.86 0.008 250);
  --color-text-muted: oklch(0.68 0.012 250);
  --color-border: oklch(0.3 0.01 250);
  --color-link: oklch(0.68 0.12 158);
  --color-link-hover: oklch(0.78 0.09 160);
  --color-accent: oklch(0.68 0.12 158);
  --color-focus: oklch(0.68 0.12 158);
  --color-note-bg: oklch(0.15 0.005 250);
  --color-note-border: oklch(0.68 0.12 158);
  --color-note-text: oklch(0.86 0.008 250);
  --color-code-bg: oklch(0.2 0.008 250);
  --color-code-text: oklch(0.86 0.008 250);
  --color-shoal: oklch(0.3 0.045 235);
  --color-shallow: oklch(0.22 0.03 235);
  --color-land: oklch(0.34 0.04 85);
  --color-coast: oklch(0.66 0.012 250);
  --color-on-accent: oklch(0.15 0.005 250);
  --color-grat: oklch(0.27 0.02 245);
  --color-contour: oklch(0.5 0.05 235);
  --color-sounding: oklch(0.68 0.02 245);
  --color-d10: oklch(0.18 0.018 240);
  --color-panel: oklch(0.15 0.005 250);
  --color-plot-official: oklch(0.86 0.008 250);
  --color-plot-ticon: oklch(0.8 0.1 225);
  --color-plot-fit: oklch(0.68 0.12 158);
  --color-plot-grid: oklch(0.27 0.02 245);
  --color-plot-grid-strong: oklch(0.4 0.03 245);
}

@media (max-width: 70rem) {
  :root { --header-h: 5.75rem; }                 /* two-row header: brand line + nav row */
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; }
}