:root {
  /* Core Surface Colors */
  --background: 250 250 250; /* hsl(0 0% 98%) page background */
  --background-secondary: 240 240 240; /* hsl(0 0% 94%) subtle fills / hover */
  --background-tertiary: 232 232 232; /* hsl(0 0% 91%) deeper subtle fill */
  --card: 245 245 245; /* hsl(0 0% 96%) cards / modal panels */
  --card-hover: 239 239 239; /* hsl(0 0% 94%) #efefef card hover state */
  --card-foreground: 30 37 56; /* hsl(224 30% 17%) #1e2538 text on cards */
  --card-border: 225 226 232; /* hsl(231 13% 90%) #e1e2e8 card edge */
  --border: 221 222 230; /* hsl(233 15% 88%) #dddee6 default container border */
  --input: 143 149 168; /* hsl(226 13% 61%) #8f95a8 input field borders */
  --input-hover: 111 117 144; /* hsl(228 13% 50%) #6f7590 input border on hover */
  --popover: 235 235 235; /* hsl(0 0% 92%) popover / dropdown surface */
  --popover-foreground: 30 37 56; /* hsl(224 30% 17%) #1e2538 text in popovers */

  /* Primary / Accent — the brand. ONE color: every brand shade in the app
     comes from --primary. Hover/press differentiation comes from the
     .hover-elevate overlay, tints from alpha — no darker/lighter sibling. */
  --primary: 107 155 18; /* hsl(81 79% 34%) #6b9b12 — buddy lime (light) */
  --primary-foreground: 250 250 250; /* hsl(0 0% 98%) label on solid primary fills */
  --secondary: 216 218 226; /* hsl(228 15% 87%) #d8dae2 neutral control fill */
  --secondary-foreground: 30 37 56; /* hsl(224 30% 17%) #1e2538 text on secondary */
  /* buddy has no --accent/--accent-foreground surface tokens (it exports
     --accent-dark/--accent-light swatches below); the app consumes --accent as
     a neutral highlight fill, so it borrows the secondary neutral family. */
  --accent: 216 218 226; /* hsl(228 15% 87%) #d8dae2 subtle highlight fill (= secondary) */
  --accent-foreground: 30 37 56; /* hsl(224 30% 17%) #1e2538 text on accent */
  --ring: 107 155 18; /* hsl(81 79% 34%) #6b9b12 focus ring accent */

  /* Buddy accent swatches (extra tokens; not consumed by the app yet) */
  --accent-dark: 74 122 0; /* #4a7a00 */
  --accent-light: 139 188 42; /* #8bbc2a */

  /* Text */
  --foreground: 30 37 56; /* hsl(224 30% 17%) #1e2538 body / heading text */
  --muted: 221 222 230; /* hsl(233 15% 88%) #dddee6 muted fill */
  --muted-foreground: 77 88 112; /* hsl(221 19% 37%) #4d5870 secondary text */

  /* Status Colors — one color each, driving fills, text and icons */
  --success: 16 185 129; /* #10b981 */
  --warning: 245 158 11; /* #f59e0b */
  --info: 59 130 246; /* #3b82f6 — was UNDEFINED; info utilities emitted no CSS */
  --destructive: 239 68 68; /* hsl(0 84% 60%) #ef4444 */
  /* Labels on solid status fills. Light mode: near-white on all three. */
  --destructive-foreground: 250 250 250; /* hsl(0 0% 98%) */
  --success-foreground: 250 250 250;
  --warning-foreground: 250 250 250;

  /* Sidebar */
  --sidebar: 240 240 240; /* hsl(0 0% 94%) */
  --sidebar-foreground: 30 37 56; /* hsl(224 30% 17%) #1e2538 item text */
  --sidebar-border: 213 214 222; /* hsl(233 12% 85%) #d5d6de */
  --sidebar-primary: 107 155 18; /* hsl(81 79% 34%) #6b9b12 */
  --sidebar-primary-foreground: 15 17 23; /* hsl(225 21% 7%) #0f1117 */
  /* QA #2 — --sidebar-accent is the HOVER fill for non-active items
     (was documented as "active"; active now has its own tokens below). */
  --sidebar-accent: 221 222 230; /* hsl(233 15% 88%) #dddee6 hover item fill */
  --sidebar-accent-foreground: 30 37 56; /* hsl(224 30% 17%) #1e2538 hover item text */
  --sidebar-ring: 107 155 18; /* hsl(81 79% 34%) #6b9b12 */
  /* QA #1 — Select / active menu item: primary tint + primary label + left bar.
     Alpha tokens are written in modern rgb() slash syntax; consume as
     rgb(var(--sidebar-active-bg)). */
  --sidebar-active-bg: 107 155 18 / 0.15; /* #6b9b12 @15% */
  /* Ink-dark green, NOT the raw seed. The raw #6b9b12 on this pill's own 15%
     tint measured 2.52:1 in light mode — the app's permanent active-nav
     indicator failing WCAG AA. Dark mode was already fine (~9:1) and is
     unchanged below. NOTE: this deliberately departs from buddypos, which uses
     the bright seed here. */
  --sidebar-active-foreground: 74 107 13; /* #4a6b0d label + icon (AA on the 15% pill) */
  --sidebar-active-indicator: 107 155 18; /* #6b9b12 left indicator bar */

  /* Tooltip (QA #4) — tooltips use the brand fill, not the popover surface */
  --tooltip: 107 155 18; /* hsl(81 79% 34%) #6b9b12 */
  --tooltip-foreground: 250 250 250; /* hsl(0 0% 98%) #fafafa */

  /* Topbar (QA #5) */
  --topbar: 250 250 250; /* hsl(0 0% 98%) #fafafa — matches page background */
  --topbar-icon: 77 88 112; /* hsl(221 19% 37%) #4d5870 default icon */
  --topbar-icon-hover-bg: 216 218 226; /* hsl(228 15% 87%) #d8dae2 */
  --topbar-icon-hover: 30 37 56; /* hsl(224 30% 17%) #1e2538 */

  /* Semantic badges (QA #6) — tinted fill, tinted border, solid text */
  --badge-success-bg: 16 185 129 / 0.15; /* #10b981 @15% */
  --badge-success-border: 16 185 129 / 0.25; /* #10b981 @25% */
  --badge-success-text: 16 185 129; /* #10b981 */
  --badge-warning-bg: 245 158 11 / 0.15; /* #f59e0b @15% */
  --badge-warning-border: 245 158 11 / 0.25; /* #f59e0b @25% */
  --badge-warning-text: 245 158 11; /* #f59e0b */
  --badge-destructive-bg: 239 68 68 / 0.15; /* #ef4444 @15% */
  --badge-destructive-border: 239 68 68 / 0.25; /* #ef4444 @25% */
  --badge-destructive-text: 239 68 68; /* #ef4444 */

  /* Selectable cards, e.g. Store Selection modal (QA #8) — hover and
     selected must NOT resolve to the same paint. */
  --card-hover-bg: 221 222 230 / 0.7; /* #dddee6 @70% */
  --card-hover-border: 221 222 230; /* #dddee6 */
  --card-selected-bg: 107 155 18 / 0.05; /* #6b9b12 @5% */
  --card-selected-border: 107 155 18 / 0.6; /* #6b9b12 @60% */

  /* Select / dropdown items (QA #8b) — selected state shows a checkmark only;
     hover paints the same as any other option. */
  --select-item-hover-bg: 216 218 226; /* hsl(228 15% 87%) #d8dae2 */
  --select-item-hover-text: 30 37 56; /* hsl(224 30% 17%) #1e2538 */
  --select-item-indicator: 30 37 56; /* hsl(224 30% 17%) #1e2538 checkmark */

  /* Scrollbar (QA #14) — not specified in the QA doc; derived from the
     neutral family. Confirm with design before shipping. */
  --scrollbar-track: 240 240 240; /* hsl(0 0% 94%) */
  --scrollbar-thumb: 213 214 222; /* hsl(233 12% 85%) #d5d6de */
  --scrollbar-thumb-hover: 143 149 168; /* hsl(226 13% 61%) #8f95a8 */

  /* Chart Colors — categorical series palette */
  --chart-1: 90 138 15; /* #5a8a0f */
  --chart-2: 124 58 237; /* #7c3aed */
  --chart-3: 37 99 235; /* #2563eb */
  --chart-4: 234 88 12; /* #ea580c */
  --chart-5: 219 39 119; /* #db2777 */
  --chart-6: 13 148 136; /* #0d9488 */
  --chart-7: 236 72 153; /* #ec4899 */

  /* Interaction — hover/press paint this translucent film OVER whatever is
     underneath (button, badge, row, nav item), so no darker shade is needed.
     Light theme darkens; dark theme lightens. */
  --elevate-1: rgba(0, 0, 0, 0.03); /* hover */
  --elevate-2: rgba(0, 0, 0, 0.08); /* pressed / active */
  --button-outline: rgba(0, 0, 0, 0.1);
  --badge-outline: rgba(0, 0, 0, 0.05);

  /* Spacing / radius (extra buddy tokens; not consumed by the app yet) */
  --spacing: 0.25rem;
  --radius: 0.5rem;

  /* Shadows (extra buddy tokens; the app derives its own --shadow-select /
     --shadow-error below and does not consume these yet) */
  --shadow-2xs: 0px 2px 0px 0px hsl(228 20% 7% / 0.05);
  --shadow-xs: 0px 2px 0px 0px hsl(228 20% 7% / 0.08);
  --shadow-sm: 0px 2px 0px 0px hsl(228 20% 7% / 0.05), 0px 1px 2px -1px hsl(228 20% 7% / 0.1);
  --shadow: 0px 2px 0px 0px hsl(228 20% 7% / 0.05), 0px 1px 2px -1px hsl(228 20% 7% / 0.1);
  --shadow-md: 0px 2px 0px 0px hsl(228 20% 7% / 0.05), 0px 2px 4px -1px hsl(228 20% 7% / 0.12);
  --shadow-lg: 0px 2px 0px 0px hsl(228 20% 7% / 0.05), 0px 4px 6px -1px hsl(228 20% 7% / 0.15);
  --shadow-xl: 0px 2px 0px 0px hsl(228 20% 7% / 0.05), 0px 8px 10px -1px hsl(228 20% 7% / 0.18);
  --shadow-2xl: 0px 2px 0px 0px hsl(228 20% 7% / 0.25);

  /* Typography — full font stacks. NOTE: `var(--font-inter)` is the self-hosted
     Inter loaded by next/font in layout.tsx (kept as the leading fallback so the
     self-hosted face still loads); buddy's stack is Inter, matching this. To use
     a different font, replace the stack AND make sure the font is actually
     loaded (system font, a <link> to Google Fonts, or a next/font import). */
  --font-sans: var(--font-inter), 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

.dark {
  /* Core Surface Colors */
  --background: 15 17 23; /* hsl(225 21% 7%) #0f1117 */
  --background-secondary: 26 29 41; /* #1a1d29 */
  --background-tertiary: 37 40 54; /* #252836 */
  --card: 30 33 48; /* hsl(230 23% 15%) #1e2130 */
  --card-hover: 37 40 54; /* #252836 */
  --card-foreground: 255 255 255;
  --card-border: 42 45 58; /* hsl(229 16% 20%) #2a2d3a */
  --border: 42 45 58; /* hsl(229 16% 20%) #2a2d3a */
  --input: 42 45 58; /* hsl(229 16% 20%) #2a2d3a */
  --input-hover: 51 54 68; /* hsl(230 14% 23%) #333644 */
  --popover: 30 33 48; /* hsl(230 23% 15%) #1e2130 */
  --popover-foreground: 255 255 255;

  /* Primary / Accent */
  /* Measured on buddypos.lovable.app in dark mode: --primary #8bbc2a while
     --chart-1 stays the brighter #c8ee44. Ours had primary set to the chart
     lime, which made every dark brand surface too bright (reported: the POS
     Station button) and forced the tooltip to use near-black text to stay
     legible. They are separate values on purpose. */
  --primary: 139 188 42; /* #8bbc2a — buddy lime (dark), matches reference */
  /* Reference dark mode uses --primary-foreground: #fff (captured live). Ours was
     near-black, which is what made the primary-variant Tooltip render dark text on
     the green chip in dark mode — `Tooltip.tsx` styles its title/content with
     `text-on-primary`, which resolves to this token. */
  --primary-foreground: 255 255 255; /* white, per reference */
  --secondary: 30 33 48; /* hsl(230 23% 15%) #1e2130 */
  --secondary-foreground: 255 255 255;
  --accent: 30 33 48; /* hsl(230 23% 15%) #1e2130 subtle highlight fill (= secondary) */
  --accent-foreground: 255 255 255;
  --ring: 139 188 42; /* #8bbc2a — mirrors --primary */

  /* Buddy accent swatches (extra tokens; not consumed by the app yet) */
  --accent-dark: 168 206 36; /* #a8ce24 */
  --accent-light: 216 254 84; /* #d8fe54 */

  /* Text */
  --foreground: 255 255 255;
  --muted: 55 65 81; /* #374151 */
  --muted-foreground: 156 163 175; /* hsl(218 11% 65%) #9ca3af */

  /* Status Colors — buddy keeps these mid-tones in both themes, so a near-white
     label still reads on the solid fill (no dark-ink flip needed). */
  --success: 16 185 129; /* #10b981 */
  --warning: 245 158 11; /* #f59e0b */
  --info: 96 165 250; /* #60a5fa — matches the reference's dark info */
  --destructive: 239 68 68; /* hsl(0 84% 60%) #ef4444 */
  --destructive-foreground: 255 255 255; /* #ffffff */
  --success-foreground: 255 255 255;
  --warning-foreground: 255 255 255;

  /* Sidebar */
  --sidebar: 20 24 36; /* hsl(225 29% 11%) #141824 */
  --sidebar-foreground: 255 255 255;
  --sidebar-border: 42 45 58; /* hsl(229 16% 20%) #2a2d3a */
  --sidebar-primary: 200 238 68; /* hsl(73 83% 60%) #c8ee44 */
  --sidebar-primary-foreground: 15 17 23; /* hsl(225 21% 7%) #0f1117 */
  /* QA #2 — hover fill for non-active items */
  --sidebar-accent: 30 33 48; /* hsl(230 23% 15%) #1e2130 hover item fill */
  --sidebar-accent-foreground: 255 255 255; /* #ffffff hover item text */
  --sidebar-ring: 200 238 68; /* hsl(73 83% 60%) #c8ee44 */
  /* QA #1 — Select / active menu item */
  --sidebar-active-bg: 200 238 68 / 0.15; /* #c8ee44 @15% */
  --sidebar-active-foreground: 200 238 68; /* #c8ee44 label + icon */
  --sidebar-active-indicator: 200 238 68; /* #c8ee44 left indicator bar */

  /* Tooltip (QA #4) */
  /* Reference dark tooltip (captured live): class `bg-primary ... text-primary-foreground`
     resolving to rgb(139,188,42) with rgb(255,255,255) text. */
  --tooltip: 139 188 42; /* #8bbc2a — = --primary */
  --tooltip-foreground: 255 255 255; /* white, per reference */

  /* Topbar (QA #5) */
  --topbar: 15 17 23; /* hsl(225 21% 7%) #0f1117 — matches page background */
  --topbar-icon: 156 163 175; /* hsl(218 11% 65%) #9ca3af default icon */
  --topbar-icon-hover-bg: 30 33 48; /* hsl(230 23% 15%) #1e2130 */
  --topbar-icon-hover: 255 255 255; /* #ffffff */

  /* Semantic badges (QA #6) — identical in both themes; the mid-tone status
     colors carry enough contrast either way. */
  --badge-success-bg: 16 185 129 / 0.15; /* #10b981 @15% */
  --badge-success-border: 16 185 129 / 0.25; /* #10b981 @25% */
  --badge-success-text: 16 185 129; /* #10b981 */
  --badge-warning-bg: 245 158 11 / 0.15; /* #f59e0b @15% */
  --badge-warning-border: 245 158 11 / 0.25; /* #f59e0b @25% */
  --badge-warning-text: 245 158 11; /* #f59e0b */
  --badge-destructive-bg: 239 68 68 / 0.15; /* #ef4444 @15% */
  --badge-destructive-border: 239 68 68 / 0.25; /* #ef4444 @25% */
  --badge-destructive-text: 239 68 68; /* #ef4444 */

  /* Selectable cards, e.g. Store Selection modal (QA #8) */
  --card-hover-bg: 55 65 81 / 0.7; /* hsl(217 19% 27%) #374151 @70% */
  --card-hover-border: 42 45 58; /* hsl(229 16% 20%) #2a2d3a */
  --card-selected-bg: 200 238 68 / 0.05; /* #c8ee44 @5% */
  --card-selected-border: 200 238 68 / 0.6; /* #c8ee44 @60% */

  /* Select / dropdown items (QA #8b) */
  --select-item-hover-bg: 30 33 48; /* hsl(230 23% 15%) #1e2130 */
  --select-item-hover-text: 255 255 255; /* #ffffff */
  --select-item-indicator: 255 255 255; /* #ffffff checkmark */

  /* Scrollbar (QA #14) — derived, not specified. Confirm with design. */
  --scrollbar-track: 20 24 36; /* hsl(225 29% 11%) #141824 */
  --scrollbar-thumb: 42 45 58; /* hsl(229 16% 20%) #2a2d3a */
  --scrollbar-thumb-hover: 51 54 68; /* hsl(230 14% 23%) #333644 */

  /* Chart Colors */
  --chart-1: 200 238 68; /* #c8ee44 */
  --chart-2: 167 139 250; /* #a78bfa */
  --chart-3: 96 165 250; /* #60a5fa */
  --chart-4: 251 146 60; /* #fb923c */
  --chart-5: 236 72 153; /* #ec4899 */
  --chart-6: 20 184 166; /* #14b8a6 */
  --chart-7: 244 114 182; /* #f472b6 */

  /* Interaction — dark theme LIGHTENS on hover/press */
  --elevate-1: rgba(255, 255, 255, 0.04);
  --elevate-2: rgba(255, 255, 255, 0.09);
  --button-outline: rgba(255, 255, 255, 0.1);
  --badge-outline: rgba(255, 255, 255, 0.05);

  /* Shadows (extra buddy tokens; buddy's dark export is intentionally flat) */
  --shadow-2xs: 0 0 0 transparent;
  --shadow-xs: 0 0 0 transparent;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 8px 10px rgba(0, 0, 0, 0.3);
  --shadow-2xl: 0 12px 24px rgba(0, 0, 0, 0.4);

  /* Typography — inherits :root unless a theme needs a different face */
}