/* ========================================================================
   repair-tokens.css — the repair site's canvas vocabulary, on the --t-* system

   Why this file exists: the --canvas / --ink / --purple vocabulary used to
   live inline in each page's <style>, copied out of the retired
   repair-design.css. The copy carried the light half of the token set and
   dropped the [data-theme="dark"] half, so seven pages (about, bench,
   data-deletion, downloads, privacy, recommends, terms) flipped
   <html data-theme> and the toggle label while the page never repainted —
   a control that does nothing. Nine pages were carrying eight copies of
   these values; now there is one.

   DARK MODE IS NOT DEFINED HERE. tomasetti-tokens.css is unconditional dark
   (--t-bg, --t-ink, --t-accent …), so the dark half below is aliases into it
   with literal fallbacks. Change the brand palette in one place. Only the
   values with no --t-* equivalent (hairline rgba tints, --faint, --blue,
   --ink-soft, --shadow-lift) stay literal.

   Load order matters: tomasetti-tokens.css must come first, which the shell
   head guarantees. Standalone use would fall back to the literals.

   The light half is literal because --t-* has no light palette at all — the
   light canvas has no other owner.

   Loaded by sites/repair-parts/shell-head.html, so every shell-stamped page
   gets it. Pages that need a different palette override these on :root in
   their own <style>, which wins on cascade order — the shell head is stamped
   before page-local style blocks, so authored intent still wins.
   ======================================================================== */

:root {
  --display: 'Outfit', sans-serif;
  --sans: 'Outfit', sans-serif;
  --mono: 'Share Tech Mono', monospace;

  --canvas: #f3f1f7;
  --canvas-deep: #ece9f3;
  --surface: #ffffff;
  --surface-hover: #f0edf6;

  --ink: #20172c;
  --ink-soft: #44365a;
  --muted: #6f637c;
  --faint: #8b7f9c;

  --line: rgba(63, 45, 88, 0.14);
  --line-strong: rgba(63, 45, 88, 0.26);

  --purple: #6036b8;
  --purple-dark: #4d2a99;
  --purple-mid: #7a5cc7;
  --purple-soft: rgba(96, 54, 184, 0.08);
  --purple-softer: rgba(96, 54, 184, 0.05);

  --green: #18845d;
  --blue: #277d91;

  --radius: 14px;        /* cards, panels */
  --radius-sm: 10px;     /* buttons, inputs */
  --radius-xs: 8px;      /* small tiles, icon wells */

  /* alias kept for JS-injected inline styles */
  --card-bg: var(--surface);

  --shadow-lift: 0 10px 30px rgba(63, 45, 88, 0.1);
}

[data-theme="dark"] {
  --canvas: var(--t-bg, #0f0a1a);
  --canvas-deep: var(--t-bg-deep, #0a0514);
  --surface: var(--t-surface, #1e1530);
  --surface-hover: var(--t-surface-hover, #2a1d40);

  --ink: var(--t-ink, #e2d9ee);
  --ink-soft: #cbbfdd;                      /* no --t-* equivalent */
  --muted: var(--t-ink-mute, #9a88b0);
  --faint: #8a7aa4;                         /* no --t-* equivalent */

  --line: rgba(168, 85, 247, 0.25);         /* --t-violet as a hairline */
  --line-strong: rgba(216, 150, 255, 0.35); /* --t-accent as a hairline */

  --purple: var(--t-accent, #d896ff);
  --purple-dark: var(--t-violet-soft, #c084fc);
  --purple-mid: var(--t-accent-bright, #c084fc);
  --purple-soft: rgba(216, 150, 255, 0.10);
  --purple-softer: rgba(216, 150, 255, 0.06);

  --green: var(--t-green, #34d399);
  --blue: #7cc7f7;                          /* --t-sky is a different blue */

  --shadow-lift: 0 10px 30px rgba(0, 0, 0, 0.45);
  /* radii and font stacks are theme-independent and inherit from :root */
}
