/**
 * Customer / kiosk / pickup design tokens — import from pi-kiosk-shared/theme.css
 * Apps: @import "pi-kiosk-shared/theme.css" after tailwindcss in globals entry.
 *
 * MFE-v3-S-01: brand-bridge.css supplies --brand-* SSOT; @theme maps semantic tokens.
 * MFE-v3-S-2: DECISION-2 C-Hybrid — prefers-color-scheme + `.dark` override blocks.
 */
@import './brand-bridge.css';

@theme {
  --color-surface: var(--color-surface-default);
  --color-surface-muted: #f8fafc;
  --color-surface-elevated: var(--color-surface-default);
  --color-surface-hover: var(--color-neutral-100);
  --color-on-surface: var(--color-neutral-950);
  --color-on-surface-muted: #475569;
  --color-on-surface-disabled: #94a3b8;
  --color-primary: var(--color-neutral-950);
  --color-primary-foreground: #f8fafc;
  --color-accent: var(--brand-consumer-accent);
  --color-accent-foreground: var(--brand-consumer-accent-foreground);
  --color-on-accent: var(--color-accent-foreground);
  --color-accent-hover: #001a33;
  --color-success: #16a34a;
  --color-success-foreground: #ecfdf5;
  --color-danger: #dc2626;
  --color-danger-foreground: #fef2f2;
  --color-warning: #d97706;
  --color-warning-foreground: #fffbeb;
  --color-border: var(--color-neutral-200);
  --color-border-strong: #cbd5e1;
  --color-focus-ring: var(--brand-consumer-accent);
  --color-qr-render-dark: #000000;
  --color-qr-render-light: var(--color-surface-default);
  --color-disabled-opacity: 0.55;
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.04);
  --shadow-popover: 0 6px 24px rgba(15, 23, 42, 0.12);
  --motion-duration-fast: 120ms;
  --motion-duration-base: 200ms;
  --motion-easing-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  @theme {
    --color-surface: #0b1220;
    --color-surface-muted: var(--color-neutral-950);
    --color-surface-elevated: #111a2e;
    --color-surface-hover: #162031;
    --color-on-surface: var(--color-neutral-200);
    --color-on-surface-muted: #94a3b8;
    --color-on-surface-disabled: #64748b;
    --color-primary: #f8fafc;
    --color-primary-foreground: var(--color-neutral-950);
    --color-accent: var(--brand-consumer-accent);
    --color-accent-foreground: var(--brand-consumer-accent-foreground);
    --color-on-accent: var(--color-accent-foreground);
    --color-accent-hover: var(--brand-consumer-accent-soft);
    --color-success: #22c55e;
    --color-success-foreground: #052e16;
    --color-danger: #f87171;
    --color-danger-foreground: #450a0a;
    --color-warning: #fbbf24;
    --color-warning-foreground: #451a03;
    --color-border: #1f2937;
    --color-border-strong: #334155;
    --color-focus-ring: var(--brand-consumer-accent-soft);
    --color-disabled-opacity: 0.5;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.28), 0 4px 12px rgba(0, 0, 0, 0.2);
    --shadow-popover: 0 6px 24px rgba(0, 0, 0, 0.36);
  }
}

/**
 * C-Hybrid user override — same values as prefers-color-scheme dark.
 * Wired by ThemeProvider (MFE-v3-S-3) via `.dark` on documentElement.
 */
.dark {
  color-scheme: dark;
  --color-surface: #0b1220;
  --color-surface-muted: var(--color-neutral-950);
  --color-surface-elevated: #111a2e;
  --color-surface-hover: #162031;
  --color-on-surface: var(--color-neutral-200);
  --color-on-surface-muted: #94a3b8;
  --color-on-surface-disabled: #64748b;
  --color-primary: #f8fafc;
  --color-primary-foreground: var(--color-neutral-950);
  --color-accent: var(--brand-consumer-accent);
  --color-accent-foreground: var(--brand-consumer-accent-foreground);
  --color-on-accent: var(--color-accent-foreground);
  --color-accent-hover: var(--brand-consumer-accent-soft);
  --color-success: #22c55e;
  --color-success-foreground: #052e16;
  --color-danger: #f87171;
  --color-danger-foreground: #450a0a;
  --color-warning: #fbbf24;
  --color-warning-foreground: #451a03;
  --color-border: #1f2937;
  --color-border-strong: #334155;
  --color-focus-ring: var(--brand-consumer-accent-soft);
  --color-disabled-opacity: 0.5;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.28), 0 4px 12px rgba(0, 0, 0, 0.2);
  --shadow-popover: 0 6px 24px rgba(0, 0, 0, 0.36);
}

/**
 * Explicit light override — wins over `@media (prefers-color-scheme: dark)` when
 * user selects Light while OS is dark (Theme Contract / customer_theme_light_fix_v1).
 */
.light {
  color-scheme: light;
  --color-surface: var(--color-surface-default);
  --color-surface-muted: #f8fafc;
  --color-surface-elevated: var(--color-surface-default);
  --color-surface-hover: var(--color-neutral-100);
  --color-on-surface: var(--color-neutral-950);
  --color-on-surface-muted: #475569;
  --color-on-surface-disabled: #94a3b8;
  --color-primary: var(--color-neutral-950);
  --color-primary-foreground: #f8fafc;
  --color-accent: var(--brand-consumer-accent);
  --color-accent-foreground: var(--brand-consumer-accent-foreground);
  --color-on-accent: var(--color-accent-foreground);
  --color-accent-hover: #001a33;
  --color-success: #16a34a;
  --color-success-foreground: #ecfdf5;
  --color-danger: #dc2626;
  --color-danger-foreground: #fef2f2;
  --color-warning: #d97706;
  --color-warning-foreground: #fffbeb;
  --color-border: var(--color-neutral-200);
  --color-border-strong: #cbd5e1;
  --color-focus-ring: var(--brand-consumer-accent);
  --color-disabled-opacity: 0.55;
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.04);
  --shadow-popover: 0 6px 24px rgba(15, 23, 42, 0.12);
}