/* ==========================================================================
   Design tokens and the base rules a calculator page needs.

   Pulled out of The Numbers Room's site.css (which also holds the whole marketing site). A tool page
   renders correctly with ONLY this file plus tool.css, loaded in that order:

     <link rel="stylesheet" href="/assets/css/tokens.css">
     <link rel="stylesheet" href="/assets/css/tool.css">

   TO REBRAND: edit the BRAND block below (colours and fonts), then the font <link> and the logo in
   private/tool-layout.html. Everything else follows from these variables. A few colours in tool.css are
   typed in directly rather than read from a variable; HANDOFF.md lists them.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   BRAND: change this block to rebrand. (The Straight Talking Stylist: black, hot pink, blush and a
   pop of green, set in Archivo with IBM Plex Mono for labels. Matches the home page design.)
   --------------------------------------------------------------------------- */
:root {
  /* Page grounds and text */
  --bg: #ffffff;              /* page background, and the inside of repeating rows */
  --surface: #ffffff;         /* cards and panels */
  --surface-2: #fff3f8;       /* the tool page background, quiet fills: a whisper of blush */
  --field: #ffffff;           /* input boxes */
  --hover-tint: #fff0f6;      /* hover on light things */
  --ink: #141414;             /* main text */
  --ink-soft: #3a3a37;        /* secondary text in action lists */
  --muted: #55554f;           /* hints, small print */
  --line: #ead9e1;            /* borders and rules */

  /* The brand colour: the top bar, the headline result box, buttons */
  --brand: #141414;
  --brand-2: #c8197a;         /* links, step numbers, focus borders: a deeper pink that reads on white */
  --on-brand: #ffffff;        /* text on --brand */
  --on-brand-soft: #e6e6e1;   /* softer text on --brand (the headline's sub line) */
  --on-brand-muted: #bdbdb8;

  /* The accent: "Save as PDF" button, headline labels, the logo mark in the top bar */
  --pop: #ff3ea5;
  --pop-hover: #ff6bbb;
  --pop-ink: #141414;         /* text on --pop */
  --focus-glow: rgba(200, 25, 122, 0.35);  /* glow round a focused input: --brand-2 at 35% */

  /* Lauren's other brand colours, used by the marketing pages and the leopard band */
  --blush: #ffd3e6;
  --green: #2fd35e;

  /* Fonts. Load the web font itself in private/tool-layout.html. */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Menlo, monospace; /* numbers and labels */
}

/* ---------------------------------------------------------------------------
   Traffic lights. These carry meaning (fix this first, keep an eye on it, on track), so keep green, amber
   and red recognisable and readable on their pale backgrounds if you change them.
   --------------------------------------------------------------------------- */
:root {
  --good: #177a4b;
  --watch: #93600c;
  --act: #b23b36;
  --good-bg: #e3f4e9;
  --watch-bg: #faf0dc;
  --act-bg: #f9e4e2;
}

/* ---------------------------------------------------------------------------
   Shape and spacing. Safe to tweak, rarely needs it.
   --------------------------------------------------------------------------- */
:root {
  --radius: 20px;
  --radius-sm: 10px;
  --wrap: 1120px;
  --gutter: clamp(16px, 4vw, 40px);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 85%;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 6.4vw, 4.6rem); font-weight: 900; font-stretch: 70%; text-transform: uppercase; line-height: 0.95; letter-spacing: 0; }
h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); line-height: 1.15; }
h4 { font-family: var(--font-body); font-weight: 600; font-size: 1.05rem; line-height: 1.25; letter-spacing: 0; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }

/* The toolkit shows and hides results with the hidden attribute, so this must win over any display rule. */
[hidden] { display: none !important; }

/* ---------- focus ---------- */
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
/* On the brand colour (top bar, headline box, phone result bar) the ring turns to the accent so it still shows. */
.tool-bar :focus-visible, .headline :focus-visible, .tk-dock:focus-visible { outline-color: var(--pop); }

/* ---------- layout and small helpers ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.muted { color: var(--muted); }
.small { font-size: 0.88rem; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-2);
  margin: 0 0 14px;
  display: block;
}

/* ---------- logo (top bar of every tool). BRAND: a pink round "S" mark and the condensed wordmark. ---------- */
.logo { font-family: var(--font-display); font-weight: 900; font-stretch: 70%; font-size: 1.1rem; letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.logo-mark { width: 32px; height: 32px; border-radius: 50%; background: var(--pop); color: var(--pop-ink); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-style: normal; font-size: 1.05rem; line-height: 1; font-weight: 900; font-stretch: 70%; letter-spacing: 0; text-transform: uppercase; flex: none; }

/* The leopard band under the top bar: Lauren's signature print. */
.tool-bar::after { content: ""; display: block; height: 10px; background: #e9b464 url("/assets/img/leopard.svg") 0 0 / 140px 140px repeat; }
@media print { .tool-bar::after { display: none; } }

/* ---------- buttons (the "next step" panel the toolkit draws uses .btn, .btn.ghost and .btn.small) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 800; font-size: 0.95rem; letter-spacing: 0.01em;
  padding: 14px 24px; border-radius: 999px;
  border: 1.5px solid var(--brand); background: var(--brand); color: var(--on-brand);
  text-decoration: none; cursor: pointer; line-height: 1.1;
  transition: transform 0.12s ease, background 0.12s ease;
}
.btn:hover { background: var(--brand-2); border-color: var(--brand-2); transform: translateY(-1px); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--bg); }
.btn.small { padding: 9px 14px; font-size: 0.88rem; min-height: 44px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .btn:hover { transform: none; }
}