/* Lucy & Friends v1 working tokens. Imported by ./screens.css, so it IS live in the game
   despite the line above's old claim; --lucy-display itself isn't referenced elsewhere here
   (screens.css uses its own --courier), kept in sync anyway so it isn't silently wrong.
   Source: docs/FRONTEND_DESIGN_UX_UI.md. DM Sans and Courier Prime must be loaded by the host;
   both are self-hosted under SIL OFL, not the unlicensed-for-embedding system Courier New. */
:root {
  --lucy-cream: #FFF7EB;
  --lucy-charcoal: #262523;
  --lucy-leaf: #A9C797;
  --lucy-pink: #ED8796;
  --lucy-sky: #79A9BE;
  --lucy-butter: #F4D889;
  --lucy-surface: var(--lucy-cream);
  --lucy-text: var(--lucy-charcoal);
  --lucy-action-bg: var(--lucy-charcoal);
  --lucy-action-text: var(--lucy-cream);
  --lucy-selected-bg: var(--lucy-leaf);
  --lucy-selected-text: var(--lucy-charcoal);
  --lucy-display: 'Courier Prime', 'Courier New', Courier, monospace;
  --lucy-reading: 'DM Sans', sans-serif;
  --lucy-display-weight: 700;
  --lucy-space-1: .25rem;
  --lucy-space-2: .5rem;
  --lucy-space-3: .75rem;
  --lucy-space-4: 1rem;
  --lucy-space-6: 1.5rem;
  --lucy-space-8: 2rem;
  --lucy-space-12: 3rem;
  --lucy-space-16: 4rem;
  --lucy-radius-control: .25rem;
  --lucy-radius-card: .5rem;
  --lucy-radius-dialog: 1rem;
  --lucy-target-min: 2.75rem;
  --lucy-content-max: 75rem;
  --lucy-feedback-duration: 150ms;
  --lucy-panel-duration: 220ms;
  /* Pixel-Modern Hybrid UI palette */
  --ui-cream: #FFF7EB;
  --ui-charcoal: #262523;
  --ui-leaf: #A9C797;
  --ui-pink: #ED8796;
  --ui-sky: #79A9BE;
  --ui-butter: #F4D889;
  /* World 1: Lucy's Garden */
  --world-accent: #A9C797;
  --world-accent-strong: #5B7651;
  --world-frame: #354B35;
  --world-soft: #E8F0D9;
  --world-surface: #FFF7EB;
  --world-reward: #F4D889;
}
@media (prefers-reduced-motion: reduce) {
  :root { --lucy-feedback-duration: 0ms; --lucy-panel-duration: 0ms; }
}
/* Opt-in UI focus example; do not apply blanket rules to game rendering. */
.lucy-control:focus-visible {
  outline: 2px solid var(--lucy-charcoal);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--lucy-cream);
}
