/* ============================================================================
   Foundry design system — light by default, dark by preference.

   THE SAME TOKEN VOCABULARY as the container starter (src/app/globals.css), so
   there is one design language across both templates rather than two. If you
   change a name here, change it there.

   Derived from the Foundry marketing site and re-tuned so every pair meets
   WCAG 2.1 AA. Every value is contrast-checked — don't change one without
   re-checking (claude_outputs/foundry-design/contrast.py, or any AA checker).

   No webfonts: system faces only. A third-party font request leaks the end
   user's IP and referer, which on a clinical tool says something about the
   patient. Georgia is a system serif, so the brand's editorial character costs
   nothing.
   ========================================================================= */

:root {
  /* surfaces */
  --ground: #fbfaf9;
  --card: #ffffff;
  --raised: #f5f3f1;

  /* text — 16.78 / 7.63 / 4.79 on card */
  --fg: #1c1917;
  --dim: #57534e;
  --faint: #79716b;

  /* ONE brand orange. The site's apricot #ED8F5C is 2.42:1 on white, so in light
     mode it is brand-mark only — never an interactive fill. */
  --accent: #c05115; /* 4.74 on card; white on it 4.74 */
  --accent-strong: #a8460f; /* text ON the accent tint: 5.46 */
  --accent-tint: #fdf4ef;

  /* Status is always a tinted badge, never bare saturated text: darkening a
     colour far enough to be legible as text destroys its meaning (amber goes
     olive). The tint carries the hue, the dark text carries the legibility. */
  --success: #2f6b4c;
  --success-tint: #e8f5ee;
  --warning: #6b4a08;
  --warning-tint: #fdf3d9;
  --destructive: #b01030; /* crimson, 51° from the accent, so danger ≠ brand */
  --destructive-tint: #fdeaee;

  /* Two line colours: `divider` is decoration; `control` is the boundary that
     identifies an input and owes 3:1 (WCAG 1.4.11). */
  --divider: #e7e5e4;
  --control: #938c85; /* 3.32 */

  --on-accent: #ffffff;

  --radius: 14px;
  --radius-control: 10px;

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --measure: 60ch; /* comfortable line length for body copy */
  --page: 48rem; /* reading width — matches the container starter's max-w-3xl */
  --maxw: 1160px; /* full-bleed sections only, e.g. a landing page hero */
  --pad: clamp(20px, 5vw, 40px);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* The marketing site's own palette. Only --faint changed: the site's
       #626973 is 3.53:1, below AA for body text. */
    --ground: #0b0c0f;
    --card: #15181e;
    --raised: #1b1f27;

    --fg: #ecedef;
    --dim: #9ba1aa;
    --faint: #8a9099;

    --accent: #ed8f5c;
    --accent-strong: #f2a776;
    --accent-tint: #251710;

    --success: #5fb98a;
    --success-tint: #12261d;
    --warning: #e8b24c;
    --warning-tint: #2a2110;
    --destructive: #f07171;
    --destructive-tint: #2b1414;

    --divider: #24282f;
    --control: #4a4f58;

    --on-accent: #160b04;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: var(--page);
  margin: 0 auto;
  padding: 3rem var(--pad);
}

h1,
h2,
h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.08;
  margin: 0 0 0.5rem;
}
h1 {
  font-size: 2rem;
}
h2 {
  font-size: 1.5rem;
}
h3 {
  font-size: 1.15rem;
}

p {
  margin: 0 0 1rem;
  max-width: var(--measure);
}
.lede {
  font-size: 1.05rem;
  color: var(--dim);
}
.hint {
  color: var(--faint);
  font-size: 0.925rem;
}

a {
  color: var(--accent);
}
a:hover {
  color: var(--accent-strong);
}

/* The site's signature label: mono small caps with a leading rule. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--accent);
  opacity: 0.6;
}

code,
.mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
}
code {
  background: var(--raised);
  border-radius: 4px;
  padding: 0.1em 0.35em;
}

/* ---- surfaces ---- */
.card {
  background: var(--card);
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
}

/* ---- controls ---- */
.btn {
  font: inherit;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 10px 18px;
  border-radius: var(--radius-control);
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
}
.btn-quiet {
  background: var(--accent-tint);
  color: var(--accent-strong);
}
.btn-secondary {
  background: transparent;
  color: var(--fg);
  border-color: var(--control);
}
.btn-danger {
  background: var(--destructive);
  color: #fff;
}

label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 0.35rem;
}

input,
select,
textarea {
  font: inherit;
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--radius-control);
  border: 1px solid var(--control);
  background: var(--card);
  color: var(--fg);
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- status ---- */
.badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 999px;
}
.badge-success {
  color: var(--success);
  background: var(--success-tint);
}
.badge-warning {
  color: var(--warning);
  background: var(--warning-tint);
}
.badge-danger {
  color: var(--destructive);
  background: var(--destructive-tint);
}
.badge-brand {
  color: var(--accent-strong);
  background: var(--accent-tint);
}

.error {
  color: var(--destructive);
  font-size: 0.85rem;
}

/* ---- tables ---- */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--divider);
}
td {
  padding: 0.6rem;
  border-bottom: 1px solid var(--divider);
  color: var(--dim);
}
td strong {
  color: var(--fg);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}