/* The Jan Fedler design system: webfonts and tokens, shared by the
   dashboard and the public site and served ahead of each one's own rules.
   Dark first, cream text, a muted terracotta accent used sparingly.
   The fonts are served next to the stylesheet (OFL.txt). */
@font-face { font-family: "Lobster"; font-style: normal; font-weight: 400; font-display: swap;
             src: url(lobster-latin-400.woff2) format("woff2"); }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 100 1000; font-display: swap;
             src: url(dm-sans-latin-wght.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
             src: url(jetbrains-mono-latin-wght.woff2) format("woff2"); }

:root {
  color-scheme: dark;

  --color-ink-950: oklch(11% 0.010 265);
  --color-ink-900: oklch(15% 0.012 265);
  --color-ink-800: oklch(19% 0.010 265);
  --color-ink-700: oklch(24% 0.010 265);
  --color-ink-600: oklch(32% 0.009 265);
  --color-ink-500: oklch(43% 0.008 265);
  --color-ink-400: oklch(56% 0.007 265);
  --color-ink-300: oklch(68% 0.006 265);
  --color-ink-200: oklch(80% 0.004 265);
  --color-cream-50: oklch(98.5% 0.006 50);
  --color-cream-100: oklch(95% 0.016 32);
  --color-cream-200: oklch(90% 0.022 32);
  --color-accent-300: oklch(74% 0.075 26);
  --color-accent-400: oklch(63% 0.086 26);
  --color-accent-500: oklch(53% 0.085 26);
  --color-accent-600: oklch(43% 0.078 26);

  --bg-deep: var(--color-ink-950);
  --bg-base: var(--color-ink-900);
  --bg-elevated: var(--color-ink-800);
  --bg-overlay: var(--color-ink-700);
  --bg-subtle: var(--color-ink-600);
  --fg-primary: var(--color-cream-100);
  --fg-secondary: var(--color-ink-300);
  --fg-muted: var(--color-ink-400);
  --border-default: var(--color-ink-700);
  --border-subtle: var(--color-ink-600);
  --border-strong: var(--color-ink-500);
  --accent: var(--color-accent-400);
  --accent-hover: var(--color-accent-300);
  --accent-muted: var(--color-accent-600);
  --accent-surface: oklch(18% 0.025 26);

  /* States, toned to sit beside the palette. Red is brighter and more
     saturated than the accent so the two never read as one. */
  --ok: oklch(76% 0.10 150);
  --warn: oklch(81% 0.11 80);
  --bad: oklch(68% 0.17 20);

  --font-display: "Lobster", Georgia, cursive;
  --font-body: "DM Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius-sm: 2px;
  --radius-base: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.45);
  --shadow-inset: inset 0 1px 0 oklch(100% 0 0 / 0.06);

  --ease: 140ms ease;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-body); color: var(--fg-primary); background: var(--bg-base);
       -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { color: var(--fg-primary); text-decoration: underline; text-decoration-color: var(--border-strong);
    text-underline-offset: 3px; transition: text-decoration-color var(--ease), color var(--ease); }
a:hover { text-decoration-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent-muted); color: var(--color-cream-50); }
code, pre, kbd { font-family: var(--font-mono); }
code { font-size: .9em; padding: 1px 5px; border-radius: var(--radius-sm); background: var(--bg-elevated);
       border: 1px solid var(--border-default); overflow-wrap: anywhere; }
/* The public site, on the tokens of brand.css. */
body { font-size: 16px; line-height: 1.7; }
main { max-width: 760px; margin: 0 auto; padding: 4.5rem 1.25rem 4rem; }
/* Page titles as the dashboard has them. Only the site's own name takes the
   display face, a crate name on a finding page stays in the body face. */
h1 { font-size: clamp(30px, 5vw, 40px); font-weight: 600; line-height: 1.15; letter-spacing: -.01em;
     margin: 0 0 1.5rem; }
h1.display { font-family: var(--font-display); font-weight: 400; font-size: clamp(44px, 8vw, 72px);
             line-height: 1.05; }
h1 + p { font-size: 17px; }
/* Section labels, as the design system has them. */
h2 { font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
     color: var(--accent); margin: 3.5rem 0 1rem; }
p { color: var(--fg-secondary); }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: .6rem 1rem .6rem 0; border-bottom: 1px solid var(--border-default);
         vertical-align: top; }
th { font-weight: 400; color: var(--fg-secondary); }
td { color: var(--fg-primary); font-weight: 500; }
tr:first-child > th, tr:first-child > td { border-top: 1px solid var(--border-default); }
.muted { color: var(--fg-muted); font-size: 14px; }
main > p.muted:last-child { margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--border-default); }
/* One line of small links; each item stays whole when the line wraps. */
footer { width: min(100% - 2.5rem, 760px - 2.5rem); margin: 0 auto 3rem; padding-top: 1.5rem; display: flex;
         flex-wrap: wrap; gap: .4rem 1.5rem; font-size: 13px; color: var(--fg-muted);
         border-top: 1px solid var(--border-default); }
footer > * { white-space: nowrap; }
footer a { color: var(--fg-secondary); text-decoration-color: var(--border-subtle); }
footer a:hover { color: var(--fg-primary); }
@media (max-width: 640px) { main { padding-top: 2.5rem; } th, td { padding-right: .6rem; } }