/*
 * Light theme: ink on paper, for every page that isn't the home page or
 * the dashboard (those carry their own copy of these rules inline).
 *
 * White surfaces, black 1px lines, black fills for what is primary. No
 * shadows, no grey washes, no cream, no gradients. Dark theme is untouched.
 *
 * Link this LAST in <head>, after the page's own <style> and /nav.css:
 * the token block has the same specificity as each page's own
 * :root[data-theme="light"] block and wins by coming later.
 *
 * Pages name their tokens differently; this remaps the union. A name a
 * page doesn't use is simply ignored. Colours that carry meaning (pass,
 * warn, danger) are left alone.
 */

:root[data-theme="light"] {
  /* Surfaces */
  --bg: #ffffff;
  --bg-2: #ffffff;
  --page-bg: #ffffff;
  --card: #ffffff;
  --card-2: #ffffff;
  --card-bg: #ffffff;
  --soft-bg: #ffffff;
  --featured-bg: #ffffff;
  --panel: #ffffff;
  --sidebar-bg: #ffffff;
  --field: #ffffff;
  --g50: #ffffff;
  --g100: #ffffff;
  --accent-light: #ffffff;
  --accent-soft: #ffffff;
  --accent-soft-2: #ffffff;
  --nav-bg: #ffffff;

  /* Lines */
  --line: #0a0a0a;
  --line-2: #0a0a0a;
  --g200: #0a0a0a;
  --g300: #0a0a0a;

  /* Ink */
  --ink: #0a0a0a;
  --text: #0a0a0a;
  --text-2: #1f1f1f;
  --muted: #3d3d3d;
  --muted-2: #5c5c5c;
  --g400: #5c5c5c;
  --g500: #3d3d3d;
  --g700: #1f1f1f;
  --accent: #0a0a0a;
  --button-bg: #0a0a0a;
  --silver: #0a0a0a;
  --text-inverse: #ffffff;

  /* Depth comes from a heavier outline, never from blur. */
  --shadow: none;
  --shadow-rest: none;
  --shadow-hover: none;
}

/* Components that paint their own surface instead of using the tokens.
   Class names are shared across pages (cards, footer, Discord block), so
   one rule covers them all. */

/* Flat surfaces: white, outlined, nothing behind the glass. */
:root[data-theme="light"] :is(.toolkit-card, .toolkit-preview, .preview-placeholder, .note, .discord-block,
  .plan-card, .promise-box, .step-card, .auth-card, .feedback-fab, .social-link) {
  background: #ffffff;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* These cards drew their edge as a gradient painted under a 2px
   transparent border; with the gradient gone they need a real line. */
:root[data-theme="light"] :is(.toolkit-card, .toolkit-preview, .note, .discord-block, .plan-card,
  .promise-box, .step-card, .auth-card, .feedback-fab) {
  border: 1px solid #0a0a0a;
}
/* The featured plan keeps its emphasis with a 2px outline. */
:root[data-theme="light"] .plan-card.featured { box-shadow: inset 0 0 0 1px #0a0a0a; }
:root[data-theme="light"] .plan-card.featured::before { color: #ffffff; }
:root[data-theme="light"] :is(nav, .builder-nav) { box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Footer and small chips carried dark-theme white-on-glass values. */
:root[data-theme="light"] :is(footer, footer.site-foot) { border-color: #0a0a0a; }
:root[data-theme="light"] :is(.perk, .member-badge, .back-link) { background: #ffffff; border-color: #0a0a0a; }
:root[data-theme="light"] .feedback-fab-icon { border-color: #ffffff; }

/* Toolkit preview sketch: outlined bars, not solid black slabs. */
:root[data-theme="light"] .preview-placeholder .bar { background: #ffffff; border: 1px solid #0a0a0a; }

/* Toolkit paper sketches (a resume and a cover letter drawn in CSS).
   Strong marks become ink; faint ones become outlines, so the drawing
   keeps its hierarchy without any grey. Inset rings don't move layout. */
:root[data-theme="light"] .toolkit-preview-paper { background: #ffffff; box-shadow: none; outline: 1px solid #0a0a0a; }
:root[data-theme="light"] .toolkit-preview-paper :is(.w1, .w2, .block-title, .header-top) { background: #0a0a0a; }
:root[data-theme="light"] .toolkit-preview-paper :is(.bullet, .line-soft, .block-line, .header-sub, .band) {
  background: #ffffff;
  box-shadow: inset 0 0 0 1px #0a0a0a;
}
:root[data-theme="light"] .toolkit-preview-paper .thumb { border-color: #0a0a0a; }

/* Form fields: white, not a 3% grey wash. */
:root[data-theme="light"] :is(.input, textarea.input, input.input) { background: #ffffff; }

/* The feedback button's icon is drawn in currentColor; on the ink circle
   it has to be white. */
:root[data-theme="light"] .feedback-fab-icon { color: #ffffff; }

/* Prompt generators: panels, dialogs and results. */
:root[data-theme="light"] :is(.feedback-panel, .feedback-modal, .feedback-form-panel, .thank-you-card,
  .next-card, .prompt-box, .template-asset) {
  background: #ffffff;
  border: 1px solid #0a0a0a;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* Behind a dialog: a white veil, not a dark dim. */
:root[data-theme="light"] .feedback-overlay { background: rgba(255, 255, 255, 0.88); backdrop-filter: none; -webkit-backdrop-filter: none; }
:root[data-theme="light"] .thank-you-card :is(h3, p, .thank-you-kicker) { color: #0a0a0a; }

/* Choices: outline at rest, solid ink once picked. The checked state
   carried dark-theme white-on-glass values and was invisible on white. */
:root[data-theme="light"] :is(.chip, .site-chip, .mini-star-option) { background: #ffffff; border-color: #0a0a0a; }
:root[data-theme="light"] .chip-input:checked + .chip { background: #0a0a0a; border-color: #0a0a0a; color: #ffffff; }
:root[data-theme="light"] :is(.chip, .site-chip):hover { transform: none; }

/* Progress: outlined track, ink fill. */
:root[data-theme="light"] .progress-track { background: #ffffff; box-shadow: inset 0 0 0 1px #0a0a0a; }
:root[data-theme="light"] .progress-fill { background: #0a0a0a; }

/* Next-step links and the price tile: solid ink, white type, no glow. */
:root[data-theme="light"] :is(.next-link.primary, .template-price) { background: #0a0a0a; color: #ffffff; box-shadow: none; }
/* Its pulse is a white glow: invisible on white, so it only adds motion. */
:root[data-theme="light"] .next-link.primary.pulse { animation: none; }

/* Readability report header: flat white (pass/warn colours stay, they carry meaning). */
:root[data-theme="light"] .ri-report-head { background: #ffffff; }

/* Primary buttons: solid ink, not a grey-to-black gradient with a glow. */
:root[data-theme="light"] :is(.btn-primary, .toolkit-free, .discord-btn, .discord-icon, .button.primary) {
  background: #0a0a0a;
  color: #ffffff;
  box-shadow: none;
}
:root[data-theme="light"] :is(.discord-btn, .discord-icon) svg { color: #ffffff; fill: currentColor; }
:root[data-theme="light"] .feedback-fab-icon { background: #0a0a0a; }

/* Nothing lifts on hover; the outline thickens instead. */
:root[data-theme="light"] :is(.toolkit-card, .plan-card, .note, .step-card, .discord-block):hover {
  transform: none;
  box-shadow: inset 0 0 0 1px #0a0a0a;
}
:root[data-theme="light"] :is(.btn-primary, .toolkit-free, .discord-btn, .discord-icon, .button.primary, .social-link):hover { transform: none; box-shadow: none; }
:root[data-theme="light"] .social-link:hover { background: #0a0a0a; color: #ffffff; }

/* The "live" dot and the floating user count: ink instead of green glow. */
:root[data-theme="light"] .dot { background: #0a0a0a; box-shadow: none; }
:root[data-theme="light"] .floating-user-count__avatar { border-color: #0a0a0a; box-shadow: none; animation: none; }

/* Cover letter builder: white sidebar, and the letter preview is framed
   rather than floated on a shadow. The letter's own artwork is untouched. */
:root[data-theme="light"] .letter-sidebar { background: #ffffff; }
:root[data-theme="light"] .letter-page { box-shadow: none; outline: 1px solid #0a0a0a; }

/* Pricing: the promise label was brown. */
:root[data-theme="light"] .promise-label { color: #0a0a0a; }

:root[data-theme="light"] * { scrollbar-color: #0a0a0a #ffffff; }
:root[data-theme="light"] *::-webkit-scrollbar-track { background: #ffffff; }
:root[data-theme="light"] *::-webkit-scrollbar-thumb { background: #0a0a0a; border-color: #ffffff; }