/* Design tokens - cream/vanilla base, bubblegum-pink accent (tuned to match
   the sundae/boba line-art icon set), boba-brown text, mint/lavender/peach
   as supporting accents. Distinct palette from MunchMatch (orange/DM-Serif)
   while staying in the same friendly family. */
:root {
  --bg:          #FFF7EC;
  --surface:     #FFF1DE;
  --card-bg:     #FFFFFF;
  --raised:      #FFFBF5;
  --border:      rgba(74,44,26,0.10);

  --accent:      #C94472; /* bubblegum pink - functional accent (buttons, links, UI) */
  --accent-lo:   rgba(201,68,114,0.12);
  --accent-dark: #A8335C;
  --accent-soft: #FFA8C4; /* the icon set's actual pastel - decorative use only, fails contrast as a button fill */

  --gold:        #E0A233; /* caramel */
  --mint:        #8FD9C4;
  --lavender:    #B9A6DE;
  --peach:       #F4B183;
  --green:       #2A9D6F; /* open-now / success */
  --red:         #D64545; /* closed / error */

  --cocoa:       #4A2C1A; /* primary text - "boba brown" */
  --muted:       #A6876F;

  --fd: 'Baloo 2', sans-serif;
  --fb: 'Nunito', sans-serif;

  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow-soft: 0 8px 24px rgba(74,44,26,0.08);
  --shadow-card: 0 12px 32px rgba(74,44,26,0.14);
}

/* Dark theme is applied via [data-theme="dark"] on <html>, set by the
   inline bootstrap script in index.html (reads localStorage, falls back to
   prefers-color-scheme) and kept in sync by theme.js. Driving this off a
   plain attribute rather than only a media query is what makes an in-app
   light/dark/system toggle possible - see #theme-toggle-btn. */
:root[data-theme="dark"] {
  /* Neutral dark gray, not a tinted brown - keeps the pink accent and
     cream text doing the brand work instead of a muddy chocolate cast. */
  --bg:          #17181B;
  --surface:     #1E1F23;
  --card-bg:     #222327;
  --raised:      #26272B;
  --border:      rgba(255,255,255,0.08);
  --cocoa:       #F1EEE9;
  --muted:       #9C9CA3;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }
body {
  font-family: var(--fb);
  background: var(--bg);
  color: var(--cocoa);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }

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

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

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