/*
 * @generated — do not edit by hand
 * @command npm run sync:tokens
 * @sources src/styles/tokens.css
 * @generated-at 2026-09-29T08:15:29.141Z
 */

/* Design tokens and theme hooks. */

/*
 * Mode-following colors that cards and card controls use. Registered as <color>
 * so each resolves once, on :root, for the page's scheme: a card sets
 * `color-scheme: light` for its form controls, and an unregistered light-dark()
 * value would re-resolve there and hand a dark page's card its light values.
 */
@property --color-paper {
  syntax: "<color>";
  inherits: true;
  initial-value: #ffffff;
}

@property --color-card-border {
  syntax: "<color>";
  inherits: true;
  initial-value: #f98030;
}

@property --color-rule {
  syntax: "<color>";
  inherits: true;
  initial-value: #f98030;
}

@property --color-cta-hover {
  syntax: "<color>";
  inherits: true;
  initial-value: #3b429f;
}

@property --color-cta-hover-text {
  syntax: "<color>";
  inherits: true;
  initial-value: #ffffff;
}

:root {
  /* Follow the device preference; the Appearance pin below narrows this to one scheme. */
  color-scheme: light dark;

  /* season:start autumn-2026 — generated by npm run sync:season from src/lib/seasonal-palettes.ts */
  --color-bg: light-dark(#fff5e5, #130b21);
  --color-text: light-dark(#130b21, #fff5e5);
  --color-text-muted: light-dark(#4b5563, #9a999d);
  --color-border: light-dark(#d5cbc2, #3a3148);
  --color-border-focus: light-dark(#3b429f, #ffd53f);
  /* Scheme accent: links, outlines, secondary fills, focus. */
  --color-primary: light-dark(#3b429f, #ffd53f);
  --color-primary-hover: light-dark(#2f3585, #ffe27a);
  --color-primary-text: light-dark(#ffffff, #130b21);
  --color-accent: var(--color-primary);
  /* Call to action: the one action a page exists for. */
  --color-cta: #f98030;
  /* Hover turns to the scheme's other brand color and carries its own label. */
  --color-cta-hover: light-dark(#3b429f, #ffd53f);
  --color-cta-text: #130b21;
  --color-cta-hover-text: light-dark(#ffffff, #130b21);
  /* Wash for tinted surfaces (current item, hover, callouts); never the accent itself. */
  --color-wash: light-dark(#ffd53f, #3b429f);
  /* Decorative brand rule under the site header; never a boundary that must be seen. */
  --color-rule: light-dark(#f98030, #3b429f);
  /* Match system chrome (iOS/Android browser bars) so edges do not flash a second tint. */
  --color-deck-bg: light-dark(#fff5e5, #130b21);
  /* season:end */
  /* Guided-input green: the glyph a walk is asking for, and the halo around it. */
  --color-guide: light-dark(#15803d, #4ade80);
  --color-guide-glow: light-dark(#22c55e, #86efac);
  --color-error-bg: light-dark(#fee2e2, #7f1d1d);
  --color-error-text: light-dark(#b91c1c, #fca5a5);

  --font-sans: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-weight-medium: 500;
  --transition-speed: 0s;

  /* One divider style: every rule and card edge is --color-rule at this width. */
  --rule-width: 2px;

  /*
   * Cards follow the page: white on cream, cream on ink, edged with the brand
   * rule. Text on a card is ink in both schemes, since the card is light either way.
   */
  --color-paper: light-dark(#ffffff, #fff5e5);
  --color-card-border: var(--color-rule);
  --color-on-paper: #130b21;
  --color-on-paper-muted: #4b5563;
  /* Hairlines for fields inside a card; the card's own edge is --color-card-border. */
  --color-paper-border: #d5cbc2;
}

/*
 * Cards: every card in the app shares this surface, edge and text color, so
 * they match (docs/features/interface/system/tokens.md). Components set layout
 * only. :where() keeps this at zero specificity.
 */
:where(
  .dialogue-box,
  .debrief-form,
  .chapter-next-card,
  .payment-wall,
  .recall-spell-page,
  .narrator-card
) {
  color-scheme: light;
  border: var(--rule-width) solid var(--color-card-border);
  border-radius: 0.5rem;
  background: var(--color-paper);
  color: var(--color-on-paper);
}

/*
 * Paper islands (every card above) read as light surfaces in both
 * schemes. \`color-scheme: light\` alone is not enough: the production build
 * polyfills light-dark() and resolves these tokens once, on :root, so a dark
 * page would hand the white card its dark values (yellow accent on white is
 * 1.3:1). Re-declare the light values inside the island.
 */
:where(
  .dialogue-box,
  .debrief-form,
  .chapter-next-card,
  .payment-wall,
  .recall-spell-page,
  .narrator-card
) {
  /* season:start autumn-2026 — generated by npm run sync:season from src/lib/seasonal-palettes.ts */
  --color-bg: #fff5e5;
  --color-text: #130b21;
  --color-text-muted: #4b5563;
  --color-border: #d5cbc2;
  --color-border-focus: #3b429f;
  --color-primary: #3b429f;
  --color-primary-hover: #2f3585;
  --color-primary-text: #ffffff;
  --color-accent: #3b429f;
  --color-wash: #ffd53f;
  /* season:end */
  --color-guide: #15803d;
  --color-guide-glow: #22c55e;
  --color-error-bg: #fee2e2;
  --color-error-text: #b91c1c;
}

/*
 * Appearance pin from the menu drawer (src/lib/color-scheme.ts): one switch on
 * <html>, and every light-dark() pair above follows. No attribute means system.
 * Never add a prefers-color-scheme block for a scheme-sensitive value — write a
 * light-dark() pair so the pin keeps working (docs/features/interface/system/tokens.md).
 */
:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

/* --transition-speed is 0s unconditionally; reduced-motion override removed. */