/* Plum design system — drop this in and use the tokens.
 *
 * The light palette is Plum's real one, lifted from site/styles.css in the
 * insurwreck-kit repo. Do not invent values; use these.
 *
 * The dark palette is derived. The published system has no dark theme and says
 * so plainly ("white page background; never use a dark section"), so these are
 * the light tokens carried onto a dark ground with WCAG AA preserved: the
 * neutrals keep the warm #211D20 hue rather than going to a blue-grey or a flat
 * black, and plum is lifted because #7A315D on a dark ground fails contrast.
 */

:root {
  color-scheme: light dark;

  /* ink and surface */
  --ink:        #211d20;   /* primary text */
  --stone:      #696267;   /* secondary text */
  --faint:      #9a9297;   /* tertiary labels, metadata */
  --paper:      #ffffff;   /* page background */
  --mist:       #f8f7f7;   /* soft section and code background */
  --line:       #e9e5e7;   /* every border and divider */

  /* accent — plum is the only recurring one */
  --plum:       #7a315d;   /* links, active states, workflow path */
  --plum-ink:   #54203f;   /* accent hover, dark accent text */
  --plum-wash:  #f7eef3;   /* highlight and selected-state background */

  /* signal — at most once per page */
  --signal:     #c65a32;
  --signal-wash:#fbf0eb;

  /* type */
  --display: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  /* layout */
  --wrap: 1120px;
  --radius: 18px;          /* cards: 1px line, 18px radius, no drop shadow */
  --section: 88px;         /* 64px on mobile */
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:        #f4f1f3;
    --stone:      #a79fa4;
    --faint:      #7b7379;
    --paper:      #171416;  /* warm near-black, same hue family as --ink */
    --mist:       #1f1b1e;
    --line:       #322c30;

    --plum:       #c97ba5;  /* lifted: #7A315D fails AA on a dark ground */
    --plum-ink:   #e3aac8;  /* hover goes lighter on dark, not darker */
    --plum-wash:  #2a1b24;

    --signal:     #e08a62;
    --signal-wash:#2e1e17;
  }
}

/* The viewer's own toggle must beat the OS preference in both directions. */
:root[data-theme="dark"] {
  --ink:#f4f1f3; --stone:#a79fa4; --faint:#7b7379;
  --paper:#171416; --mist:#1f1b1e; --line:#322c30;
  --plum:#c97ba5; --plum-ink:#e3aac8; --plum-wash:#2a1b24;
  --signal:#e08a62; --signal-wash:#2e1e17;
}
:root[data-theme="light"] {
  --ink:#211d20; --stone:#696267; --faint:#9a9297;
  --paper:#ffffff; --mist:#f8f7f7; --line:#e9e5e7;
  --plum:#7a315d; --plum-ink:#54203f; --plum-wash:#f7eef3;
  --signal:#c65a32; --signal-wash:#fbf0eb;
}

/* ---------------------------------------------------------------- base --- */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
@media (min-width: 768px) { .wrap { padding: 0 40px; } }

h1, h2 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font: 650 1.05rem/1.3 var(--body); margin: 0 0 .4em; }
p  { max-width: 68ch; color: var(--stone); }

/* Eyebrows are mono, uppercase, plum — the system's most recognisable tell. */
.eyebrow {
  font: 500 11px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--plum);
}

a { color: var(--plum); text-underline-offset: 3px; }
a:hover { color: var(--plum-ink); }
:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; }

/* --------------------------------------------------------- components --- */

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  /* No drop shadows. The hairline does the work. */
}

.surface { background: var(--mist); border-radius: var(--radius); padding: 20px 22px; }
.highlight { background: var(--plum-wash); border-radius: var(--radius); padding: 20px 22px; }

.btn {
  font: 600 15px/1 var(--body);
  padding: 12px 20px;
  min-height: 44px;              /* touch target floor */
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.btn:hover { border-color: var(--plum); color: var(--plum); }
.btn-primary { background: var(--plum); border-color: var(--plum); color: #fff; }
.btn-primary:hover { background: var(--plum-ink); border-color: var(--plum-ink); color: #fff; }

code, .mono {
  font: 500 .875em/1.5 var(--mono);
  background: var(--mist);
  padding: 1px 6px;
  border-radius: 5px;
}

table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); }
th {
  font: 500 11px/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--faint);
}
td { color: var(--stone); }
.num { font-variant-numeric: tabular-nums; font-family: var(--mono); }

section { padding-top: 64px; }
@media (min-width: 768px) { section { padding-top: var(--section); } }

/* Motion is functional and short. Anything decorative does not belong. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}