/*
 * Cleanup on Aisle 3 — web design tokens and base styles.
 * Generated from design-system/tokens.json (colors sourced from the game's scripts/Palette.gd).
 * Flat color only: no gradients, no photos, no dark mode.
 */

:root {
  /* color.background */
  --color-background-page: #f0e6d2;      /* store floor cream; default page background */
  --color-background-surface: #faf5ea;   /* cards and raised surfaces */
  --color-background-band: #a6d5bd;      /* mint store-wall green; section bands, hero backdrop */
  --color-background-band-trim: #7fb99e; /* wall trim green; borders on mint bands */
  --color-background-asphalt: #6b7280;   /* parking-lot gray; footer background */
  --color-background-dock: #a8afb8;      /* loading-dock concrete; secondary muted background */

  /* color.text */
  --color-text-primary: #3a3f4a;         /* register charcoal */
  --color-text-secondary: #5f6672;       /* shelf-metal dark; captions, fine print */
  --color-text-inverse: #f0e6d2;         /* cream on asphalt/charcoal */
  --color-text-on-accent: #ffffff;       /* on apron-red or teal fills */

  /* color.accent */
  --color-accent-primary: #d94f4f;       /* cashier-apron red; primary CTA only */
  --color-accent-primary-down: #b83f3f;  /* pressed/hover */
  --color-accent-secondary: #4f9e94;     /* checkout-counter teal; secondary CTA, links */
  --color-accent-secondary-down: #3f817a;

  /* color.department — accents and card trims only; never text, never behind body copy */
  --color-department-grocery: #d9a15e;
  --color-department-dairy: #6cb7e8;
  --color-department-produce: #6dbf73;
  --color-department-frozen: #a8dde6;
  --color-department-bakery: #e8a2b8;
  --color-department-deli: #b8524e;      /* sparingly; too close to apron red for CTAs */

  /* color.semantic */
  --color-semantic-alert: #e23b3b;       /* errors, urgent badges only */
  --color-semantic-border: #e8e6df;      /* hairline borders, dividers, input outlines */
  --color-semantic-sticker: #f4e3a1;     /* price-tag sticker badges */
  --color-semantic-bag: #cfa96f;         /* neutral badges, blockquote backgrounds */

  /* font */
  --font-family-display: 'Nunito', 'Varela Round', ui-rounded, system-ui, sans-serif;
  --font-family-body: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-family-mono: ui-monospace, 'SF Mono', monospace;

  --font-size-xs: 0.8rem;
  --font-size-sm: 0.95rem;
  --font-size-md: 1.1rem;
  --font-size-lg: 1.4rem;
  --font-size-xl: 2rem;
  --font-size-hero: clamp(2.4rem, 6vw, 4rem);

  --font-weight-regular: 400;
  --font-weight-bold: 700;
  --font-weight-black: 900;              /* hero title and CTAs only */

  --line-height-tight: 1.15;             /* headings */
  --line-height-normal: 1.55;            /* body */

  /* spacing — 8px base grid */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2.5rem;
  --spacing-xl: 4rem;
  --spacing-section: clamp(3rem, 8vw, 6rem);
  --spacing-content-max: 72rem;

  /* radius */
  --radius-sm: 8px;                      /* inputs, small badges */
  --radius-md: 14px;                     /* buttons, cards; the signature chunky corner */
  --radius-lg: 22px;                     /* hero media frame, large panels */
  --radius-pill: 999px;                  /* price-tag stickers, tags */

  /* shadow — hard offsets like sprites; never blur-heavy */
  --shadow-card: 0 3px 0 rgba(58, 63, 74, 0.18);
  --shadow-button: 0 3px 0 rgba(58, 63, 74, 0.28);
  --shadow-button-down: 0 1px 0 rgba(58, 63, 74, 0.28);

  /* motion — two speeds only */
  --motion-quick: 120ms ease-out;        /* hover/press feedback */
  --motion-settle: 240ms cubic-bezier(0.34, 1.56, 0.64, 1); /* pop-in with overshoot */
}

/* Base look: the store is always open and the lights are on. */
body {
  background: var(--color-background-page);
  color: var(--color-text-primary);
  font-family: var(--font-family-body);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-black);
  line-height: var(--line-height-tight);
  color: var(--color-text-primary);
}

code, pre, kbd, samp {
  font-family: var(--font-family-mono);
}

a {
  color: var(--color-accent-secondary);
}

a:hover {
  color: var(--color-accent-primary);
}

/* Visible focus is non-negotiable: 3px dairy-blue outline, offset 2px. */
:focus-visible {
  outline: 3px solid var(--color-department-dairy);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}