/*
 * Design tokens.
 *
 * Stylesheets are loaded alphabetically by `stylesheet_link_tag :app`, so the
 * numeric prefixes fix the cascade order. This file must come first.
 */

:root {
  /* Type ---------------------------------------------------------------- */
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, ui-serif, serif;
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* A restrained fluid scale: comfortable on a phone, generous on a desktop. */
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --text-md: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --text-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --text-2xl: clamp(1.875rem, 1.5rem + 1.9vw, 3rem);
  --text-3xl: clamp(2.25rem, 1.7rem + 2.7vw, 3.75rem);

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.6;
  --leading-prose: 1.75;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-caps: 0.08em;

  /* Space --------------------------------------------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;

  /* Measure and containers ---------------------------------------------- */
  --measure: 38rem;        /* ~68 characters of body text */
  --container: 46rem;      /* default page column */
  --container-wide: 64rem; /* grids and listings */
  --gutter: clamp(1.25rem, 5vw, 2.5rem);

  --radius-sm: 3px;
  --radius: 6px;
  --radius-lg: 12px;

  --border-width: 1px;
  --transition: 140ms ease;

  /* Colour — light theme ------------------------------------------------- */
  --bg: #fdfdfb;
  --bg-subtle: #f5f4f0;
  --bg-inset: #eeece6;
  --surface: #ffffff;

  --text: #1a1917;
  --text-secondary: #4a4842;
  --text-muted: #75726a;
  --text-faint: #9b978d;

  --border: #e4e1d9;
  --border-strong: #d0ccc1;

  --accent: #a8442a;
  --accent-hover: #8a3520;
  --accent-subtle: #f6ebe6;

  --selection-bg: #f0dcd3;

  --focus-ring: 2px solid var(--accent);
  --focus-offset: 3px;

  --success: #3f6f45;
  --warning: #8a6216;
  --danger: #9c3328;
  --success-subtle: #eaf1ea;
  --warning-subtle: #f7f0dd;
  --danger-subtle: #f8eae7;

  --shadow-sm: 0 1px 2px rgba(26, 25, 23, 0.05);
  --shadow: 0 2px 8px rgba(26, 25, 23, 0.06), 0 1px 2px rgba(26, 25, 23, 0.04);
  --shadow-lg: 0 12px 32px rgba(26, 25, 23, 0.1);

  color-scheme: light;
}

/* Colour — dark theme. Applies to system preference and to an explicit
   `data-theme="dark"` set by the theme toggle. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14140f;
    --bg-subtle: #1c1c17;
    --bg-inset: #24241e;
    --surface: #1a1a15;

    --text: #eae7de;
    --text-secondary: #c3bfb4;
    --text-muted: #948f83;
    --text-faint: #6c675d;

    --border: #2c2c25;
    --border-strong: #3d3d34;

    --accent: #e08862;
    --accent-hover: #eda17f;
    --accent-subtle: #2a1d16;

    --selection-bg: #46301f;

    --success: #8fbe93;
    --warning: #d9b871;
    --danger: #e0897c;
    --success-subtle: #1c2a1d;
    --warning-subtle: #2c2617;
    --danger-subtle: #2d1c19;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #14140f;
  --bg-subtle: #1c1c17;
  --bg-inset: #24241e;
  --surface: #1a1a15;

  --text: #eae7de;
  --text-secondary: #c3bfb4;
  --text-muted: #948f83;
  --text-faint: #6c675d;

  --border: #2c2c25;
  --border-strong: #3d3d34;

  --accent: #e08862;
  --accent-hover: #eda17f;
  --accent-subtle: #2a1d16;

  --selection-bg: #46301f;

  --success: #8fbe93;
  --warning: #d9b871;
  --danger: #e0897c;
  --success-subtle: #1c2a1d;
  --warning-subtle: #2c2617;
  --danger-subtle: #2d1c19;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);

  color-scheme: dark;
}