/*
 * Theme: the site's colours and everything else that looks different in light and dark mode (shadows, the
 * paper, the tape, the prints). Sizes are in tokens.css; values that never change with the mode stay in
 * their component.
 *
 * Names say what a value is for, not what it looks like, because the same name is paper in light mode and
 * blackboard in dark mode: --color-* for the base colours, --<component>-* for a part of the page (sheet,
 * tape, print, walk, route), a state last (--sheet-border-hover). Dark mode only changes values, under
 * :root[data-theme="dark"].
 *
 * Colours designed in OKLCH: each mode keeps its neutrals in one hue (warm paper ~85°, green board
 * ~163°), the ink shares the graph paper's blue, and text passes WCAG AA (4.5:1) on page and cards.
 * One accent, an orange, for link underlines, hovers, focus rings, the active menu item, quotes,
 * selections; a vivid shade of it for the route on the trip maps.
 * Hue 50° in light mode, 58° in dark mode: at the darkness text on paper needs, 58° turns brown.
 * Text pairs pass WCAG AA (4.5:1), lines and rings 3:1; the random walk's three colours stay apart
 * for colour-blind viewers too (blue, orange and a lighter blue rather than orange and green).
 * The trip map page (static/map/gpx-map.html) loads this file on its own (the trip-map shortcode publishes
 * it as map/theme.css) and uses the light mode: legend, popups, controls and trip use these variables.
 */

/* Light: graph paper and ink */
:root {
    color-scheme: light;

    /* Base colours */
    --color-bg: #f7f2e7;             /* paper */
    --color-surface: #fdfaf3;        /* code, a map before it loads: a fresh sheet */
    --color-text: #2a2e35;           /* body text: graphite */
    --color-primary: #132e51;        /* headings, links: blue-black ink */
    --color-secondary: #656056;      /* dates, meta: pencil, in the paper's hue */
    --color-tertiary: #dfd5c2;       /* fills of small controls: the top button, page numbers */
    --color-accent: #ae520b;         /* burnt orange: the film orange, dark enough for text on paper */
    --color-border: #e6ddcd;

    /* Background: light blue graph paper */
    --pattern: var(--pattern-grid);  /* --pattern-grid or --pattern-dots, see base.css */
    --pattern-color: #6babd5;
    --pattern-strength: 35%;         /* major lines, minor lines get half */

    /* Shadows: resting on the page, and raised (the photo, the map print, a hovered card) */
    --shadow: 0 1px 1px rgb(70 55 30 / 0.10), 0 2px 6px rgb(70 55 30 / 0.08);
    --shadow-raised: 0 10px 20px rgb(70 55 30 / 0.14);

    /* Sheets: printer paper cut-outs, taped onto the page (cards, the random walk; the map's legend) */
    --sheet-bg: #fefdf8;
    --sheet-border: transparent;
    --sheet-border-hover: transparent;
    --sheet-radius: 2px;
    --sheet-tilt: 0.6deg;

    /* Tape on sheets and prints: masking tape */
    --tape-bg: rgb(236 224 186 / 0.75);

    /* Prints: the home photo and the trip maps, a white print taped in at the top corners */
    --print-bg: #fefbf6;
    --print-shadow-hover: 0 14px 28px rgb(70 55 30 / 0.2);
    --print-padding: 8px 8px 28px;
    --print-img-radius: 0;
    --print-edge-display: none;      /* film edge print, dark mode only */
    --print-caption-font: italic var(--step--1)/1.4 var(--font-serif);
    --print-caption-color: var(--color-secondary);
    --print-caption-case: none;
    --print-caption-spacing: normal;

    /* Film strips (the trips' photos): the same in both modes on purpose, a real strip of film: the black
       film base of the dark mode's film scan and its orange edge print (AA on the film) */
    --film-bg: #0c0c0c;
    --film-print: #f68f31;

    /* Random walk on the home page: in ink and orange, meetings in a lighter blue */
    --walk-a: var(--color-primary);
    --walk-b: var(--color-accent);
    --walk-meet: #1d7fa8;            /* blue pencil, lighter than the ink */
    --walk-grid: var(--pattern-color);   /* box and floor */

    /* Trip maps (light only, like the map): the route in a vivid orange that pops on the muted map,
       with a casing in a darker shade of it for the 3:1 contrast a line needs */
    --route: #e16c0d;
    --route-casing: #7d3500;

    /* Earth colours, muted like the rest; the trip maps' base map takes its hues from them and from
       paper, graphite and grid (static/map/recolour.js) */
    --green: #c2dab6;                /* sage, for areas: forests (hue 135°, between paper and board) */
    --brown: #775e45;                /* sepia, AA on paper: peaks, contour lines (hue 65°, apart from the route) */
    --slate: #79879c;                /* faded ink, 3:1 on paper: borders */
}

/* Dark: green lecture-hall blackboard and chalk */
:root[data-theme="dark"] {
    color-scheme: dark;

    /* Base colours */
    --color-bg: #172820;             /* board */
    --color-surface: #0c0f0e;        /* near black, like the film border */
    --color-text: #d8d6cc;           /* body text: chalk */
    --color-primary: #efede4;        /* headings, links: brighter chalk */
    --color-secondary: #a8b5ad;      /* dates, meta: smudged chalk */
    --color-tertiary: #384c42;
    --color-accent: #f68f31;         /* saturated orange, like the film's edge print */
    --color-border: #111c17;

    /* Background: chalk dots */
    --pattern: var(--pattern-dots);
    --pattern-color: #e4eee8;
    --pattern-strength: 18%;         /* faint: the dots are as far apart as the letters and run through them */

    /* Shadows */
    --shadow: 0 1px 2px rgb(0 0 0 / 0.25);
    --shadow-raised: 0 8px 18px rgb(0 0 0 / 0.4);

    /* Sheets: black paper, taped to the board like in light mode */
    --sheet-bg: var(--color-surface);
    --sheet-border: #1f2421;
    --sheet-border-hover: var(--color-tertiary);
    --sheet-tilt: 0.4deg;

    /* Tape: the same masking tape, darker on the board */
    --tape-bg: rgb(140 120 85 / 0.95);

    /* Prints: a 6×6 medium format film scan, wide rebate with edge print */
    --print-bg: #0c0c0c;             /* film rebate: neutral black, unlike the tinted sheets */
    --print-shadow-hover: 0 14px 28px rgb(0 0 0 / 0.55);
    --print-padding: 16px 8px 24px;  /* rebate top and bottom, frame gaps at the sides */
    --print-img-radius: 3px;
    --print-edge-display: flex;
    --print-edge-color: var(--color-accent);
    --print-caption-font: 600 0.625rem/1.4 var(--font-mono);   /* trip map caption: edge print */
    --print-caption-color: var(--color-accent);
    --print-caption-case: uppercase;
    --print-caption-spacing: 0.15em;

    /* Random walk: white chalk and the film's orange (walk-a, walk-b and walk-grid follow the
       base colours above), meetings in light blue chalk */
    --walk-meet: #88c9e2;

    /* Earth colours in chalk (the maps stay light, these are for the rest of the site) */
    --green: #8ab091;
    --brown: #d3b99b;
    --slate: #8ea1b4;
}