/* Modernist — design-system tokens and component classes, from the Claude Design handoff. This file is the source of truth for the system's look: retune it here and every page follows. Page- and component-level styles that are this site's own live in site.css. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;800&display=swap');

:root {
  color-scheme: light;
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-accent: #ec3013;
  --color-accent-2: #e15b47;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #fff2ef;
  --color-accent-200: #ffe0d9;
  --color-accent-300: #ffc4b8;
  --color-accent-400: #ff9783;
  --color-accent-500: #ff563c;
  --color-accent-600: #dd2b0f;
  --color-accent-700: #ae1800;
  --color-accent-800: #7c1405;
  --color-accent-900: #4d170e;

  --color-accent-2-100: #fff2ef;
  --color-accent-2-200: #ffe0da;
  --color-accent-2-300: #ffc4b9;
  --color-accent-2-400: #ff9784;
  --color-accent-2-500: #ef6853;
  --color-accent-2-600: #c94b39;
  --color-accent-2-700: #9e3526;
  --color-accent-2-800: #71261b;
  --color-accent-2-900: #471d16;

  /* A measured/confirmed role, on the same lightness scale as the ramps above so a step of green
     carries the same visual weight as the same step of accent. Hue 150 in OKLCH; the deep steps sit
     at the sRGB chroma ceiling, which leaves them a touch quieter than the accent — wanted, since
     this marks a state rather than competing with the brand colour. */
  --color-ok-100: #eff8f0;
  --color-ok-200: #d8efdc;
  --color-ok-300: #b4e2bc;
  --color-ok-400: #76cf8b;
  --color-ok-500: #00b754;
  --color-ok-600: #009342;
  --color-ok-700: #017132;
  --color-ok-800: #005121;
  --color-ok-900: #003613;

  --font-heading: "Archivo", system-ui, sans-serif;
  --font-heading-weight: 800;
  --font-body: "Archivo", system-ui, sans-serif;

  --space-1: 4.0px;
  --space-2: 8.0px;
  --space-3: 12.0px;
  --space-4: 16.0px;
  --space-6: 24.0px;
  --space-8: 32.0px;

  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;

  /* Elevation — derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
}


/* ══════════════════════════════════════════════════════════════════════════
   Dark theme — the same scale inverted. Ground and ink swap, both ramps
   reverse, and the accent lightens one step (#ec3013 to #ff563c) because the
   brand red does not carry enough contrast on a dark ground.

   Only tokens are redefined. No component rule below knows which theme it is
   in, and nothing outside this file needs a dark variant; the colour-mixes
   that build hovers and muted text off --color-text follow automatically.

   The declarations appear twice on purpose. The media query follows the
   reader's system setting unless a theme has been pinned on the root element,
   and the attribute selector lets a pinned dark win under a light system.
   ══════════════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  color-scheme: dark;
  --color-bg: #1e1e1e;
  --color-surface: #2b2b2b;
  --color-text: #f2f2f2;
  --color-accent: #ff563c;
  --color-accent-2: #ef6853;
  --color-divider: color-mix(in srgb, #f2f2f2 32%, transparent);

  /* The ramps reverse rather than being re-picked, so a step keeps its job:
     100 stays the quiet end and 900 the loud one, in either theme. Dark is neutral grey rather
     than the warm near-black it started as: at 5% saturation on a near-black ground the red
     channel reads as brown, and the accent is the only colour the page should be showing. Every
     step matches the luminance of the warm one it replaced, so no contrast ratio moved. */
  --color-neutral-100: #2b2b2b;
  --color-neutral-200: #424242;
  --color-neutral-300: #5e5e5e;
  --color-neutral-400: #7a7a7a;
  --color-neutral-500: #989898;
  --color-neutral-600: #b7b7b7;
  --color-neutral-700: #d4d4d4;
  --color-neutral-800: #e8e8e8;
  --color-neutral-900: #f5f5f5;

  --color-accent-100: #4d170e;
  --color-accent-200: #7c1405;
  --color-accent-300: #ae1800;
  --color-accent-400: #dd2b0f;
  --color-accent-500: #ff563c;
  --color-accent-600: #ff9783;
  --color-accent-700: #ffc4b8;
  --color-accent-800: #ffe0d9;
  --color-accent-900: #fff2ef;

  --color-accent-2-100: #471d16;
  --color-accent-2-200: #71261b;
  --color-accent-2-300: #9e3526;
  --color-accent-2-400: #c94b39;
  --color-accent-2-500: #ef6853;
  --color-accent-2-600: #ff9784;
  --color-accent-2-700: #ffc4b9;
  --color-accent-2-800: #ffe0da;
  --color-accent-2-900: #fff2ef;

  /* reversed, as the other ramps are */
  --color-ok-100: #003613;
  --color-ok-200: #005121;
  --color-ok-300: #017132;
  --color-ok-400: #009342;
  --color-ok-500: #00b754;
  --color-ok-600: #76cf8b;
  --color-ok-700: #b4e2bc;
  --color-ok-800: #d8efdc;
  --color-ok-900: #eff8f0;

  /* No ink tint to lift a surface off a dark ground, so the shadow does it alone. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #000000 45%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #000000 52%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #000000 62%, transparent);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #1e1e1e;
  --color-surface: #2b2b2b;
  --color-text: #f2f2f2;
  --color-accent: #ff563c;
  --color-accent-2: #ef6853;
  --color-divider: color-mix(in srgb, #f2f2f2 32%, transparent);

  /* The ramps reverse rather than being re-picked, so a step keeps its job:
     100 stays the quiet end and 900 the loud one, in either theme. Dark is neutral grey rather
     than the warm near-black it started as: at 5% saturation on a near-black ground the red
     channel reads as brown, and the accent is the only colour the page should be showing. Every
     step matches the luminance of the warm one it replaced, so no contrast ratio moved. */
  --color-neutral-100: #2b2b2b;
  --color-neutral-200: #424242;
  --color-neutral-300: #5e5e5e;
  --color-neutral-400: #7a7a7a;
  --color-neutral-500: #989898;
  --color-neutral-600: #b7b7b7;
  --color-neutral-700: #d4d4d4;
  --color-neutral-800: #e8e8e8;
  --color-neutral-900: #f5f5f5;

  --color-accent-100: #4d170e;
  --color-accent-200: #7c1405;
  --color-accent-300: #ae1800;
  --color-accent-400: #dd2b0f;
  --color-accent-500: #ff563c;
  --color-accent-600: #ff9783;
  --color-accent-700: #ffc4b8;
  --color-accent-800: #ffe0d9;
  --color-accent-900: #fff2ef;

  --color-accent-2-100: #471d16;
  --color-accent-2-200: #71261b;
  --color-accent-2-300: #9e3526;
  --color-accent-2-400: #c94b39;
  --color-accent-2-500: #ef6853;
  --color-accent-2-600: #ff9784;
  --color-accent-2-700: #ffc4b9;
  --color-accent-2-800: #ffe0da;
  --color-accent-2-900: #fff2ef;

  /* reversed, as the other ramps are */
  --color-ok-100: #003613;
  --color-ok-200: #005121;
  --color-ok-300: #017132;
  --color-ok-400: #009342;
  --color-ok-500: #00b754;
  --color-ok-600: #76cf8b;
  --color-ok-700: #b4e2bc;
  --color-ok-800: #d8efdc;
  --color-ok-900: #eff8f0;

  /* No ink tint to lift a surface off a dark ground, so the shadow does it alone. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #000000 45%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #000000 52%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #000000 62%, transparent);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.grayscale{filter:grayscale(1) contrast(1.08)}

/* ══════════════════════════════════════════════════════════════════════════
   Components — built with the tokens above. Plain CSS
   on plain HTML: no JavaScript, no build step. Each class is documented in
   readme.md and demonstrated in foundations/ and components/.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — rules — */
.hr {
  height: 2px; border: 0; margin: var(--space-4) 0;
  background: var(--color-divider);
}

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px —
     the pair sits side by side in sign-up rows */
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); justify-content: flex-start; text-align: left; }

/* — forms — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }
.tag-ok { background: var(--color-ok-100); color: var(--color-ok-800); }

/* — navigation — */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid var(--color-divider);
}
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
/* A column header is the same kind of thing as a kicker or an eyebrow: a small uppercase label
   naming what is under it. It takes the same accent, so a table announces its columns instead of
   letting them fade into the rows. accent-700 rather than the raw accent, because 11px letter-
   spaced text needs the darker end of the ramp, and it reverses with the theme. */
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-accent-700);
  padding: var(--space-2); border-bottom: 2px solid var(--color-divider);
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.dialog-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }