/* ============================================================================
   THEME-LIGHT.CSS — the gentle light theme
   ----------------------------------------------------------------------------
   The default look is dark and industrial: mono capitals, hard edges, a
   blueprint grid, hazard stripes. This is the calmer alternative people can
   switch to from the navigation (the "Theme" switch, like HCC Hub's): light,
   one sans-serif face in sentence case, lighter weights, soft corners, and a
   safety section that reads as a careful note rather than a siren.

   Everything here is scoped to :root[data-theme='light'] (set by site.js, and
   before the page draws by theme-init.js), so the dark theme is untouched.
   tokens.css stays as it is: overrides live here.
   ========================================================================= */

:root[data-theme='light'] {
  color-scheme: light;

  /* One face for everything. */
  --font-display: 'Inter', system-ui, sans-serif;
  --font-mono: 'Inter', system-ui, sans-serif;
  --fs-display: clamp(2.2rem, 5vw, 3.6rem);
  --fs-h1: clamp(1.6rem, 3vw, 2.2rem);
  --fs-h2: clamp(1.3rem, 2vw, 1.65rem);
  --fs-label: 0.8125rem;
  --lh-tight: 1.05;
  --track-label: 0;
  --track-tight: -0.02em;

  --radius: 12px;
  --radius-sm: 10px;
  --dur-mid: 260ms;

  --bg: #f6f7f9;
  --bg-alt: #fafbfc;
  --surface: #ffffff;
  --surface-2: #f1f3f6;
  --line: rgba(17, 24, 39, 0.08);
  --line-strong: rgba(17, 24, 39, 0.16);

  --text: #111827;
  --text-soft: #4b5563;
  --text-mute: #5f6875;

  --invert-bg: #111827;
  --invert-fg: #ffffff;

  /* Warnings in warm, steady colours rather than alarm red. */
  --danger: #b4483a;
  --caution: #a8650d;
  --caution-dark: #ffffff;
  --safe: #0f766e;

  --grid-opacity: 0;
  --noise-opacity: 0;
  --shadow-1: 0 1px 2px rgba(17, 24, 39, 0.06);
  --shadow-2: 0 16px 40px -18px rgba(17, 24, 39, 0.22);

  /* Away from a machine: the logo's teal. */
  --hue: #0f766e;
  --hue-2: #5eead4;
  --hue-ink: #ffffff;
  --hue-tint: rgba(15, 118, 110, 0.08);
}

/* Each machine keeps its colour, a shade deeper so it reads on white. */
:root[data-theme='light'] [data-accent='ember']   { --hue: #c2570c; --hue-2: #f59e5b; --hue-ink: #fff; --hue-tint: rgba(194, 87, 12, 0.08); }
:root[data-theme='light'] [data-accent='cyan']    { --hue: #0d7d72; --hue-2: #5fd3c6; --hue-ink: #fff; --hue-tint: rgba(13, 125, 114, 0.08); }
:root[data-theme='light'] [data-accent='crimson'] { --hue: #c53b55; --hue-2: #f08aa0; --hue-ink: #fff; --hue-tint: rgba(197, 59, 85, 0.08); }
:root[data-theme='light'] [data-accent='violet']  { --hue: #6d4fd1; --hue-2: #b6a3f5; --hue-ink: #fff; --hue-tint: rgba(109, 79, 209, 0.08); }
:root[data-theme='light'] [data-accent='amber']   { --hue: #a16207; --hue-2: #eab308; --hue-ink: #fff; --hue-tint: rgba(161, 98, 7, 0.09); }
:root[data-theme='light'] [data-accent='lime']    { --hue: #4d7c0f; --hue-2: #a3d65a; --hue-ink: #fff; --hue-tint: rgba(77, 124, 15, 0.08); }

/* ------------------------------------------------------------ TYPE ------ */
/* Sentence case everywhere: no shouted labels, no wide tracking. */
:root[data-theme='light'] *,
:root[data-theme='light'] *::before,
:root[data-theme='light'] *::after {
  text-transform: none !important;
  letter-spacing: normal !important;
}
[data-theme='light'] :is(h1, h2, h3, h4) { font-weight: 600; letter-spacing: -0.02em !important; }
[data-theme='light'] .display { font-weight: 600; letter-spacing: -0.035em !important; }
/* The outlined word becomes a quiet colour change. */
[data-theme='light'] .display em { color: var(--hue); -webkit-text-stroke: 0; }
[data-theme='light'] :is(h1.title, h2.title, .machine__name, .sect__titles h2, .warnband__titles h2) { font-weight: 600; }
[data-theme='light'] .vid__name { font-weight: 600; font-size: 1rem; }
[data-theme='light'] :is(.meta, .rail__title, .rail__sub, .theme-switch__label, .tbl thead th, .rows dt, .clip__cap, .slot__hint, .scroll-cue) { font-weight: 500; }
[data-theme='light'] :is(.stamp, .sect__num, .vid__kind, .note__title, .mod__bar, .empty h3) { font-weight: 600; }
[data-theme='light'] .stamp b { font-weight: 600; }
[data-theme='light'] .lede { color: var(--text-soft); }
[data-theme='light'] :is(.tbl, .rows dd, .search input, .rail__link) { font-family: var(--font-body); }

/* ------------------------------------------------------------ SHELL ----- */
[data-theme='light'] .backdrop { display: none; }
[data-theme='light'] :is(.rail, .topbar) { background: var(--surface); }
[data-theme='light'] .rail__name { font-weight: 700; font-size: 1rem; }
[data-theme='light'] .rail__glyph { border-radius: 8px; }
[data-theme='light'] .rail__link {
  margin: 1px 0; border-left: 0; border-radius: var(--radius-sm);
  font-size: 0.9rem; font-weight: 500;
}
[data-theme='light'] .rail__link svg { color: var(--text-mute); }
[data-theme='light'] .rail__link:hover { background: var(--surface-2); }
[data-theme='light'] .rail__link[aria-current='page'] { background: var(--hue-tint); color: var(--hue); }
[data-theme='light'] .rail__link[aria-current='page'] svg { color: var(--hue); }
[data-theme='light'] .theme-switch__track::after { box-shadow: 0 1px 2px rgba(17, 24, 39, 0.25); }
[data-theme='light'] .search input { border-radius: var(--radius-sm); border-color: var(--line-strong); }
[data-theme='light'] .search input:focus { border-color: var(--hue); box-shadow: 0 0 0 3px var(--hue-tint); }
[data-theme='light'] .search kbd { border-radius: 4px; }
[data-theme='light'] .foot { background: transparent; }
[data-theme='light'] .skip-link { border-radius: var(--radius-sm); }
[data-theme='light'] :focus-visible { border-radius: 6px; }

/* ---------------------------------------------------------- SURFACES ---- */
[data-theme='light'] :is(.mod, .vid, .empty) { overflow: hidden; border-radius: 14px; box-shadow: var(--shadow-1); }
[data-theme='light'] :is(.mod__bar, .vid__head) { background: transparent; }
[data-theme='light'] .mod__bar { min-height: 48px; font-size: 0.9375rem; color: var(--text); }
[data-theme='light'] a.mod { transition: box-shadow var(--dur-mid) var(--ease), border-color var(--dur-mid) var(--ease); }
[data-theme='light'] a.mod:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); }
[data-theme='light'] .empty { background: var(--surface); border-style: solid; border-color: var(--line); }

/* The machine cards on the overview. */
[data-theme='light'] .machine {
  overflow: hidden; border-radius: 18px; box-shadow: var(--shadow-1);
  transition: border-color var(--dur-mid) var(--ease), box-shadow var(--dur-mid) var(--ease);
}
[data-theme='light'] .machine:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); }
[data-theme='light'] .machine__scene { background: var(--surface-2); }
[data-theme='light'] .machine__code { border-radius: 999px; padding: 0 var(--space-3); font-weight: 600; }
[data-theme='light'] .tlink { font-size: 0.9375rem; font-weight: 600; }

/* Media. */
[data-theme='light'] :is(.video, .clip, .frame) { border-radius: var(--radius); }
[data-theme='light'] .video__play { border-radius: 50%; box-shadow: var(--shadow-2); }
[data-theme='light'] .video__cap { font-weight: 500; }
[data-theme='light'] .slot::before { border-radius: 8px; }
[data-theme='light'] .slot__hint code { border-radius: 4px; }
[data-theme='light'] .clip__cap { background: color-mix(in srgb, var(--surface) 88%, transparent); }

/* ----------------------------------------------------------- BUTTONS ---- */
[data-theme='light'] .btn { border-radius: var(--radius-sm); font-size: 0.875rem; font-weight: 600; }
[data-theme='light'] .btn--solid:hover { background: var(--hue); color: var(--hue-ink); }
[data-theme='light'] .btn--line { background: var(--surface); box-shadow: var(--shadow-1); }
[data-theme='light'] .iconbtn { border-radius: var(--radius-sm); }
[data-theme='light'] .filter { border-radius: 999px; background: var(--surface); font-size: 0.8125rem; font-weight: 500; }
[data-theme='light'] .filter[aria-pressed='true'] { background: var(--hue); border-color: var(--hue); color: #fff; }
[data-theme='light'] .tag { border-radius: 6px; }

/* ------------------------------------------------------- THE GUIDES ----- */
/* Step chips and the in-page index: soft pills. */
[data-theme='light'] .jump a { border-radius: 999px; background: var(--surface); font-size: 0.8125rem; }
[data-theme='light'] .jump a:hover { border-color: var(--hue); }
[data-theme='light'] .jump a b { font-weight: 600; }
[data-theme='light'] .toc a { border-left: 0; border-radius: var(--radius-sm); }
[data-theme='light'] .toc a.is-active { border-left: 0; }
[data-theme='light'] .step::before { border-radius: 8px; }
[data-theme='light'] .sect__icon { border-radius: 14px; background: var(--surface); }
[data-theme='light'] .sect__num { font-size: 0.8125rem; }
[data-theme='light'] .sect__text strong { font-weight: 600; }

/* Tips and "careful" notes: a soft tinted card, the warning in amber. */
[data-theme='light'] .note {
  border-radius: var(--radius); border-left-width: 3px;
  background: color-mix(in srgb, var(--c, var(--hue)) 6%, var(--surface));
}
[data-theme='light'] .note--warn { --c: var(--caution); }

/* The safety section: still first and still impossible to miss, but a
   careful note, not a siren — no hazard stripes, no red wall, no shouting. */
[data-theme='light'] .hazard { display: none; }
[data-theme='light'] .warnband { background: transparent; padding-block: var(--section-y); border-block: var(--hairline); }
[data-theme='light'] .warnband__icon {
  border-radius: 14px; border-color: color-mix(in srgb, var(--caution) 28%, transparent);
  background: #fff8ec; color: var(--caution);
}
[data-theme='light'] .warnband__titles h2 { color: var(--text); }
[data-theme='light'] .warnband__sub { font-weight: 400; font-size: var(--fs-small); color: var(--text-soft); }
[data-theme='light'] .warnlist {
  overflow: hidden; border-radius: 16px; border-color: color-mix(in srgb, var(--caution) 22%, transparent);
  background: #fffcf6; box-shadow: var(--shadow-1);
}
[data-theme='light'] .warnlist li { font-size: var(--fs-body); color: var(--text); }
[data-theme='light'] .warnlist li + li { border-top-color: color-mix(in srgb, var(--caution) 14%, transparent); }
[data-theme='light'] .warnlist li::before { font-weight: 600; color: var(--caution); }
/* The number already marks each point; the triangles were the alarm. */
[data-theme='light'] .warnlist svg { display: none; }

/* ------------------------------------------------------------ SCENES ---- */
/* The machines' glow is softer on a light page. */
[data-theme='light'] :is(.lz-kerf, .pr-tip, .sd-fillet, .mh-fill) { filter: none; }
[data-theme='light'] .sd-tip-hot { filter: drop-shadow(0 0 4px var(--hue)); }
[data-theme='light'] .scene__hud text,
[data-theme='light'] .scene__hud-l { font-weight: 500; }