/*
 * camera-factdb design tokens. The single source of colour, type, space,
 * rules and table density. Documented in docs/design/tokens.md.
 *
 * The site has one look, "Fahrplan"; its tunable knobs are data attributes
 * on <html>: data-fdb-num, -density, -accent, -rule, -table, -paper, plus
 * --fdb-size and --fdb-ratio. (Prefixed: Datastar owns data-text, data-show
 * and friends.) Layout CSS (site.css) only
 * reads the --fdb-* tokens below, never the attributes, except the table
 * style which changes structure.
 *
 * Fonts are self-hosted, subset to Latin, SIL Open Font License
 * (fonts/OFL-IBMPlex.txt): IBM Plex Sans and IBM Plex Mono.
 */

@font-face {
	font-family: "IBM Plex Sans";
	src: url("fonts/IBMPlexSans-var.woff2") format("woff2");
	font-weight: 100 700;
	font-stretch: 85% 100%;
	font-display: swap;
}

@font-face {
	font-family: "IBM Plex Mono";
	src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: "IBM Plex Mono";
	src: url("fonts/IBMPlexMono-Medium.woff2") format("woff2");
	font-weight: 500;
	font-display: swap;
}

@font-face {
	font-family: "IBM Plex Mono";
	src: url("fonts/IBMPlexMono-SemiBold.woff2") format("woff2");
	font-weight: 600 700;
	font-display: swap;
}

/* ------------------------------------------------------------ defaults */

:root {
	/* Ink and paper. Ink steps keep at least 7:1 (ink, ink-2) and 4.5:1
	   (ink-3) against every paper below. */
	--fdb-ink: oklch(18% 0.012 260);
	--fdb-ink-2: oklch(33% 0.012 260);
	--fdb-ink-3: oklch(45% 0.012 260);
	--fdb-paper: oklch(99.4% 0 0);
	--fdb-paper-2: color-mix(in oklch, var(--fdb-paper), var(--fdb-ink) 5%);
	--fdb-paper-3: color-mix(in oklch, var(--fdb-paper), var(--fdb-ink) 9%);
	--fdb-line: color-mix(in oklch, var(--fdb-paper), var(--fdb-ink) 22%);
	--fdb-line-strong: var(--fdb-ink);

	/* The one accent: a fill, its readable text form, and ink on the fill.
	   Default signal yellow, which only works as a fill behind ink. */
	--fdb-accent: oklch(87% 0.17 96);
	--fdb-accent-text: var(--fdb-ink);
	--fdb-on-accent: var(--fdb-ink);

	/* Type: IBM Plex Sans for text, headings and labels; figures per
	   data-fdb-num below. */
	--fdb-font-text: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
	--fdb-font-head: var(--fdb-font-text);
	--fdb-font-label: var(--fdb-font-text);
	--fdb-font-num: "IBM Plex Mono", ui-monospace, Menlo, monospace;
	--fdb-head-weight: 650;
	--fdb-head-tracking: -0.015em;
	--fdb-label-tracking: 0.04em;

	--fdb-size: 15px;
	--fdb-ratio: 1.2;
	--fdb-step--2: calc(var(--fdb-size) / var(--fdb-ratio) / var(--fdb-ratio));
	--fdb-step--1: calc(var(--fdb-size) / var(--fdb-ratio));
	--fdb-step-0: var(--fdb-size);
	--fdb-step-1: calc(var(--fdb-size) * var(--fdb-ratio));
	--fdb-step-2: calc(var(--fdb-step-1) * var(--fdb-ratio));
	--fdb-step-3: calc(var(--fdb-step-2) * var(--fdb-ratio));
	--fdb-step-4: calc(var(--fdb-step-3) * var(--fdb-ratio));
	--fdb-label-size: max(11.5px, var(--fdb-step--2));
	--fdb-meta-size: max(12.5px, var(--fdb-step--1));
	--fdb-leading: 1.5;
	--fdb-leading-tight: 1.15;
	--fdb-measure: 38em;

	/* Space: a 4 px grid. */
	--fdb-space-1: 4px;
	--fdb-space-2: 8px;
	--fdb-space-3: 12px;
	--fdb-space-4: 16px;
	--fdb-space-5: 24px;
	--fdb-space-6: 32px;
	--fdb-space-7: 48px;
	--fdb-space-8: 64px;
	--fdb-page: 78rem;
	--fdb-gutter: clamp(16px, 4vw, 40px);

	/* Rules: hairline between rows, section rule, heavy rule above tables
	   and section titles (the nutrition-label hierarchy). */
	--fdb-rule-1: 1px;
	--fdb-rule-2: 3px;
	--fdb-rule-3: 6px;

	/* Table density. */
	--fdb-cell-y: 7px;
	--fdb-cell-x: 10px;
	--fdb-table-size: var(--fdb-step-0);

	/* Controls and focus. Corners stay square: print, not app. */
	--fdb-radius: 2px;
	--fdb-control-h: 36px;
	--fdb-focus: var(--fdb-ink);

	/* Bars: hardware solid, subscription hatched, both ink. */
	--fdb-bar-hw: var(--fdb-ink);
	--fdb-bar-sub: repeating-linear-gradient(135deg, var(--fdb-ink) 0 2px, transparent 2px 5px);

	/* rocket-kit components (sb-popover) read the Starbase semantic tokens;
	   they are mapped here so the components follow the look. */
	--sb-surface-raised: var(--fdb-paper);
	--sb-surface-card: var(--fdb-paper);
	--sb-surface-hover: var(--fdb-paper-2);
	--sb-border: var(--fdb-line);
	--sb-border-strong: var(--fdb-ink);
	--sb-text-1: var(--fdb-ink);
	--sb-text-2: var(--fdb-ink-2);
	--sb-control-bg: var(--fdb-paper);
	--sb-control-border: var(--fdb-line);
	--sb-control-border-hover: var(--fdb-ink-3);
	--sb-brand-light: var(--fdb-focus);
	--sb-radius: var(--fdb-radius);
	--sb-control-radius: var(--fdb-radius);
	--sb-notch: 0;
	--sb-shadow-overlay: 0 1px 0 var(--fdb-ink), 0 10px 24px -12px oklch(0% 0 0 / 0.35);
	color-scheme: light;
}

/* ------------------------------------------------------------ figures */

[data-fdb-num="text"] {
	--fdb-font-num: var(--fdb-font-text);
}

[data-fdb-num="mono"] {
	--fdb-font-num: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}

/* ------------------------------------------------------------ density */

/* Tables keep their own scale: never above 16 px, whatever the body size,
   so a large editorial size does not cost comparison density. */
[data-fdb-density="compact"] {
	--fdb-cell-y: 6px;
	--fdb-cell-x: 10px;
	--fdb-table-size: min(var(--fdb-step-0), 16px);
}

[data-fdb-density="regular"] {
	--fdb-cell-y: 10px;
	--fdb-cell-x: 12px;
	--fdb-table-size: min(var(--fdb-step-0), 16px);
}

[data-fdb-density="airy"] {
	--fdb-cell-y: 15px;
	--fdb-cell-x: 14px;
	--fdb-table-size: var(--fdb-step-0);
}

/* ------------------------------------------------------------ the one accent */

[data-fdb-accent="red"] {
	--fdb-accent: oklch(54% 0.21 27);
	--fdb-accent-text: oklch(50% 0.2 27);
	--fdb-on-accent: oklch(99% 0 0);
}

[data-fdb-accent="blue"] {
	--fdb-accent: oklch(42% 0.16 258);
	--fdb-accent-text: oklch(42% 0.16 258);
	--fdb-on-accent: oklch(99% 0 0);
}

[data-fdb-accent="green"] {
	--fdb-accent: oklch(45% 0.11 160);
	--fdb-accent-text: oklch(42% 0.1 160);
	--fdb-on-accent: oklch(99% 0 0);
}

/* Yellow only works as a fill behind ink; as text it falls back to ink. */
[data-fdb-accent="yellow"] {
	--fdb-accent: oklch(87% 0.17 96);
	--fdb-accent-text: var(--fdb-ink);
	--fdb-on-accent: var(--fdb-ink);
}

[data-fdb-accent="ink"] {
	--fdb-accent: var(--fdb-ink);
	--fdb-accent-text: var(--fdb-ink);
	--fdb-on-accent: var(--fdb-paper);
}

/* ------------------------------------------------------------ rules */

[data-fdb-rule="hair"] {
	--fdb-rule-1: 1px;
	--fdb-rule-2: 1px;
	--fdb-rule-3: 2px;
}

[data-fdb-rule="regular"] {
	--fdb-rule-1: 1px;
	--fdb-rule-2: 2px;
	--fdb-rule-3: 3px;
}

[data-fdb-rule="heavy"] {
	--fdb-rule-1: 1px;
	--fdb-rule-2: 3px;
	--fdb-rule-3: 6px;
}

/* ------------------------------------------------------------ paper */

[data-fdb-paper="white"] {
	--fdb-paper: oklch(99.4% 0 0);
}

[data-fdb-paper="cream"] {
	--fdb-paper: oklch(97.4% 0.014 85);
}

[data-fdb-paper="grey"] {
	--fdb-paper: oklch(95.5% 0.004 260);
}