/* Albor design tokens. DESIGN.md (repo root) is normative: change a value there first, then here.
   Reuse these variables; do not introduce new literal colours, fonts, radii or spacing in page CSS. */

@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/ibm-plex-sans-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/ibm-plex-sans-latin-ext-600-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url(/static/fonts/ibm-plex-sans-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url(/static/fonts/ibm-plex-sans-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/ibm-plex-mono-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(/static/fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(/static/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: light dark;

  /* Colour: "Monte". Sand ground, green-black ink, olive accent for actions only. */
  --color-ground: #f1eee6;
  --color-surface: #fbfaf7;
  --color-tint: #e5e3da;
  --color-ink: #1c2410;
  --color-muted: #555c48;
  --color-rule: #d8d3c4;
  --color-control: #7c7f70;
  --color-primary: #4a5a24;
  --color-primary-hover: #3e4c1f;
  --color-on-primary: #ffffff;
  --color-ok: #2e6b3a;
  --color-warn: #8a5600;
  --color-danger: #a3321f;
  --color-brand: #d57a3f; /* the logo's orange: the logo and the category drawings only, never an action */

  /* Type: IBM Plex Sans for everything people read, Plex Mono only for data (calibres, prices, IDs). */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --text-sm: 0.833rem;   /* 15px */
  --text-base: 1rem;     /* 18px, set on html */
  --text-lg: 1.2rem;     /* 21.6px */
  --text-xl: 1.44rem;    /* 25.9px */
  --text-2xl: 1.728rem;  /* 31.1px */
  --leading-body: 1.5;
  --leading-tight: 1.25;

  /* Space: comfortable density on a 4px base. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Shape: softened corners everywhere, never pills. */
  --radius: 3px;
  --measure: 60ch;
  --focus-ring: 3px solid var(--color-primary);

  /* Sizes: touch targets and the fixed dimensions of components (DESIGN.md, Components). */
  --touch-target: 48px;    /* buttons, inputs, links on phones */
  --option-height: 56px;   /* option buttons and phone tabs */
  --thumb-row: 160px;      /* a result row's photo */
  --thumb-row-phone: 96px; /* the same at phone width, and the listing's photo strip */
  --width-page: 1100px;
  --width-banner: 760px;   /* banners, notices, the search box */
  --width-form: 640px;     /* forms and option lists */
  --width-filters: 260px;  /* the search filters column from 900px */
  --width-tile: 180px;     /* the smallest photo tile in the publishing flow */
  --outline-selected: 2px; /* the inset outline of a chosen option */
  --width-card: 220px;     /* the narrowest result card on desktop */
  --width-tip: 28ch;       /* the widest line of a fact's tooltip */
  --height-logo: 36px;     /* the logo in the header */
  --height-drawing: 48px;  /* a drawing in the category strip */
}

/* Dark follows the device unless the person picked a theme in the header (data-theme on <html>, from their cookie). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-ground: #151a0e;
    --color-surface: #1e2416;
    --color-tint: #22261a;
    --color-ink: #ece9de;
    --color-muted: #a9ad9c;
    --color-rule: #333a28;
    --color-control: #8b8c80;
    --color-primary: #b3c578;
    --color-primary-hover: #c6d49a;
    --color-on-primary: #151a0e;
    --color-ok: #86c592;
    --color-warn: #e3b35a;
    --color-danger: #f0907e;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-ground: #151a0e;
  --color-surface: #1e2416;
  --color-tint: #22261a;
  --color-ink: #ece9de;
  --color-muted: #a9ad9c;
  --color-rule: #333a28;
  --color-control: #8b8c80;
  --color-primary: #b3c578;
  --color-primary-hover: #c6d49a;
  --color-on-primary: #151a0e;
  --color-ok: #86c592;
  --color-warn: #e3b35a;
  --color-danger: #f0907e;
}
:root[data-theme="light"] { color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 18px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-ground); color: var(--color-ink); font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-body); }
::selection { background: var(--color-primary); color: var(--color-on-primary); }
:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
a { color: var(--color-primary); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
.data { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }