/* Storefront design tokens (brief D10; design-map "Design language → implementation tokens").
   One neutral default palette (the POS Design System's light web idiom); a per-tenant <style>
   block rendered server-side from ThemeColors (via StorefrontThemeCssBuilder) overrides these
   custom properties — HSL triplets drop straight into hsl(var(--oo-accent)).
   Components consume tokens ONLY — never hardcoded brand colors or copy. */

:root {
    /* Accent (tenant brand primary — drives CTAs, selection, links) */
    --oo-accent: 205 100% 52%;
    --oo-accent-foreground: 0 0% 100%;

    /* Surfaces */
    --oo-surface: 240 7% 97%;          /* page canvas */
    --oo-surface-card: 0 0% 100%;      /* cards / sheets / rails */
    --oo-surface-muted: 240 6% 94%;    /* input fills, chips, placeholders */
    --oo-surface-dark: 240 6% 17%;     /* dark secondary CTA ("Go to checkout") */
    --oo-surface-dark-foreground: 0 0% 100%;

    /* Labels */
    --oo-label-primary: 240 6% 10%;
    --oo-label-secondary: 240 4% 46%;
    --oo-label-tertiary: 240 4% 65%;

    /* Hairlines */
    --oo-border: 240 6% 90%;

    /* Semantics */
    --oo-destructive: 0 72% 51%;
    --oo-destructive-foreground: 0 0% 100%;
    --oo-success: 145 63% 32%;
    --oo-success-surface: 141 53% 91%;

    /* Radii (12–16px cards, 999 pill CTAs) */
    --oo-radius-sm: 8px;
    --oo-radius-md: 12px;
    --oo-radius-lg: 16px;
    --oo-radius-pill: 999px;

    /* Spacing scale */
    --oo-space-1: 4px;
    --oo-space-2: 8px;
    --oo-space-3: 12px;
    --oo-space-4: 16px;
    --oo-space-5: 20px;
    --oo-space-6: 24px;
    --oo-space-8: 32px;
    --oo-space-12: 48px;

    /* Typography — system sans stack */
    --oo-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Layout */
    --oo-max-width: 1440px;
    --oo-header-height: 64px;
}