/*
 * Hex Marks the Spot: shared base styles, loaded by every page.
 *
 * An old sea chart: a parchment sheet with a double neat line, floating on a navy sea.
 * Colors mirror ColorPicker/Support/AppTheme.swift. System fonts only; nothing is loaded
 * from another host. Measured contrast (WCAG 2.x): ink on paper 9.5:1, green ink on paper
 * 5.5:1, navy on map green 5.9:1, cream on sea 12.3:1; dark mode: cream on deep ink 12.6:1,
 * light green on it 8.8:1.
 *
 * Page-specific rules live next door: home.css and demos.css (index only), prose.css
 * (support, privacy, impressum).
 */

/* =========================================================================
   Tokens
   ========================================================================= */

:root {
    color-scheme: light dark;

    --sea: #1B2430;            /* the chart's sea border; the app's sidebar navy */
    --sea-text: #EDE3D0;
    --sea-soft: #C9BFAE;
    --ocean: #7FB5DC;
    --paper: #F2E8D5;          /* AppTheme.parchment */
    --paper-raised: #FBF6EA;   /* AppTheme.surface */
    --ink: #2E3A48;            /* AppTheme.ink */
    --ink-soft: #4A5563;
    --green-ink: #24693F;      /* AppTheme.accentInk, for green text */
    --map-green: #3CB371;      /* AppTheme.accent, a fill that carries navy text */
    --sepia: #7A5C3D;
    --rust: #A33A22;
    --rule: rgb(46 58 72 / 0.22);
    --btn-edge: #1B2430;       /* border and hard shadow of chunky buttons */
    --card-shadow: 0 1px 2px rgb(27 36 48 / 0.12), 0 12px 32px -8px rgb(27 36 48 / 0.28);

    --serif: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    --measure: 36rem;
    --radius: 10px;            /* AppTheme.cornerRadius */
    --sheet-margin: clamp(8px, 2.5vw, 28px);
    --pad: clamp(20px, 5vw, 64px);
}

@media (prefers-color-scheme: dark) {
    :root {
        --sea: #10161E;
        --paper: #1B222C;
        --paper-raised: #232C38;
        --ink: #EDE3D0;
        --ink-soft: #C4BAA8;
        --green-ink: #6FD3A0;
        --sepia: #B39A78;
        --rust: #E0876F;
        --rule: rgb(237 227 208 / 0.24);
        --btn-edge: #EDE3D0;
        --card-shadow: 0 0 0 1px rgb(237 227 208 / 0.16), 0 14px 36px -8px rgb(0 0 0 / 0.6);
    }
}

/* =========================================================================
   Base
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--sea);
    color: var(--ink);
    font: 1.0625rem/1.6 var(--sans);
}

img, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
    font-family: var(--serif);
    font-weight: 600;
    line-height: 1.15;
    text-wrap: balance;
    margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.4rem, 6.5vw, 4.25rem); letter-spacing: -0.015em; }
h2 { font-size: clamp(1.65rem, 3.4vw, 2.3rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1em; max-width: var(--measure); }

a { color: var(--green-ink); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--green-ink); outline-offset: 3px; border-radius: 2px; }

code, kbd { font-family: var(--mono); font-size: 0.92em; }

kbd {
    display: inline-block; min-width: 2em; text-align: center;
    padding: 0.2em 0.5em; margin-right: 0.2em;
    background: var(--paper-raised); color: var(--ink);
    border: 1.5px solid var(--ink); border-radius: 6px;
    box-shadow: 0 3px 0 var(--ink);
    font-size: 0.95rem; line-height: 1.3;
}

.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute; left: 1rem; top: -4rem; z-index: 10;
    background: var(--map-green); color: #1B2430; padding: 0.5rem 1rem; font-weight: 600;
}
.skip-link:focus { top: 1rem; }

/* =========================================================================
   The sheet: parchment with a double neat line, inset in the sea
   ========================================================================= */

.sheet {
    margin: var(--sheet-margin);
    background: var(--paper);
    box-shadow:
        inset 0 0 0 7px var(--paper), inset 0 0 0 9px var(--rule),
        inset 0 0 0 12px var(--paper), inset 0 0 0 13px var(--rule);
    border-radius: 3px;
    padding: var(--pad);
    padding-top: calc(var(--pad) * 0.6);
}

.wrap { max-width: 72rem; margin-inline: auto; }

/* =========================================================================
   Header and navigation
   ========================================================================= */

.site-header {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 0.75rem 1.5rem;
    margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.brand {
    display: flex; align-items: center; gap: 0.6rem;
    font-family: var(--serif); font-size: 1.2rem; font-weight: 600;
    color: var(--ink); text-decoration: none;
}
.brand img { width: 44px; height: 44px; }

.site-nav ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; list-style: none; margin: 0; padding: 0; }
.site-nav a { color: var(--ink); text-decoration: none; padding: 0.25rem 0; }
.site-nav a:hover, .site-nav a[aria-current="page"] { text-decoration: underline; color: var(--green-ink); }

/* Delight: the parrot cocks its head when the pointer lands on it. */
.parrot { transition: transform 180ms ease-out, filter 180ms ease-out; transform-origin: 50% 85%; }
a:hover > .parrot, a:focus-visible > .parrot, .parrot:hover { transform: rotate(-7deg) translateY(-2px); }

/* =========================================================================
   On the sea: bands below the sheet, and the footer
   ========================================================================= */

.on-sea { color: var(--sea-text); padding: clamp(2.5rem, 7vw, 4.5rem) max(16px, calc(var(--sheet-margin) + var(--pad))); }
.on-sea .wrap > * { max-width: var(--measure); }
.on-sea a { color: var(--ocean); }
.on-sea h2 { color: var(--sea-text); }

.site-footer {
    color: var(--sea-soft); font-size: 0.92rem;
    padding: 2rem max(16px, calc(var(--sheet-margin) + var(--pad))) 2.5rem;
    border-top: 1px solid rgb(237 227 208 / 0.15);
}
.site-footer ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; list-style: none; margin: 0 0 0.75rem; padding: 0; }
.site-footer a { color: var(--sea-text); }
.site-footer p { margin: 0; max-width: none; }

@media (prefers-reduced-motion: reduce) {
    .parrot { transition: filter 180ms ease-out; }
    a:hover > .parrot, a:focus-visible > .parrot, .parrot:hover { transform: none; filter: brightness(1.08); }
}