/* ChachlaPay style book v1.1 — 21 October 2026.
 * Approved working palette; remaining exact values are implementation defaults.
 * Source: tokens.json. Prefix: --cashier-.
 * Default/light customer UI; [data-theme="dark"] for operator UI.
 */
:root {
  --cashier-color-midnight: #0B1020;
  --cashier-color-navy-panel: #141C31;
  --cashier-color-raised-navy: #1D2742;
  --cashier-color-electric-iris: #6246EA;
  --cashier-color-light-iris: #A99AFF;
  --cashier-color-ice-cyan: #39D5E5;
  --cashier-color-cool-porcelain: #F4F6FC;
  --cashier-color-white: #FFFFFF;
  --cashier-color-muted-silver: #A8B3CF;
  --cashier-color-dark-ink: #18213A;
  --cashier-color-slate: #56637D;

  --cashier-font-family-ui: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cashier-font-family-code: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --cashier-font-size-meta: 12px;
  --cashier-font-size-ui: 14px;
  --cashier-font-size-body: 16px;
  --cashier-font-size-lead: 18px;
  --cashier-font-size-heading: 24px;
  --cashier-font-size-section: 32px;
  --cashier-font-size-display: 56px;
  --cashier-font-size-display-mobile: 36px;
  --cashier-line-height-meta: 16px;
  --cashier-line-height-ui: 20px;
  --cashier-line-height-body: 24px;
  --cashier-line-height-lead: 28px;
  --cashier-line-height-heading: 32px;
  --cashier-line-height-section: 40px;
  --cashier-line-height-display: 60px;
  --cashier-line-height-display-mobile: 40px;
  --cashier-font-weight-regular: 400;
  --cashier-font-weight-medium: 500;
  --cashier-font-weight-semibold: 600;
  --cashier-font-weight-bold: 700;
  --cashier-letter-spacing-body: 0;
  --cashier-letter-spacing-heading: -0.02em;
  --cashier-letter-spacing-display: -0.035em;
  --cashier-font-variant-numeric: tabular-nums lining-nums;
  --cashier-space-0: 0px;
  --cashier-space-1: 4px;
  --cashier-space-2: 8px;
  --cashier-space-3: 12px;
  --cashier-space-4: 16px;
  --cashier-space-6: 24px;
  --cashier-space-8: 32px;
  --cashier-space-12: 48px;
  --cashier-space-16: 64px;
  --cashier-space-24: 96px;
  --cashier-radius-small: 4px;
  --cashier-radius-control: 8px;
  --cashier-radius-card: 12px;
  --cashier-radius-showcase: 20px;
  --cashier-radius-pill: 999px;
  --cashier-control-height: 44px;
  --cashier-control-height-operator: 40px;
  --cashier-control-height-compact: 32px;
  --cashier-table-row-height: 48px;
  --cashier-table-row-height-dense: 40px;
  --cashier-icon-size-small: 16px;
  --cashier-icon-size-default: 20px;
  --cashier-icon-size-large: 24px;
  --cashier-border-width: 1px;
  --cashier-focus-width: 2px;
  --cashier-focus-offset: 2px;
  --cashier-layout-gutter-mobile: 16px;
  --cashier-layout-gutter-tablet: 24px;
  --cashier-layout-gutter-desktop: 24px;
  --cashier-layout-marketing-max: 1200px;
  --cashier-layout-cashier-max: 480px;
  --cashier-motion-fast: 120ms;
  --cashier-motion-standard: 180ms;
  --cashier-motion-panel: 180ms;
  --cashier-motion-story-max: 600ms;
  --cashier-motion-easing: cubic-bezier(0.2, 0, 0, 1);
  --cashier-font-size-card-heading: 18px;
  --cashier-line-height-card-heading: 24px;
  --cashier-motion-transition: 240ms;
}

:root,
[data-theme="light"] {
  color-scheme: light;
  --cashier-brand-mark: #6246EA;
  --cashier-brand-chachla: #18213A;
  --cashier-brand-pay: #6246EA;
  --cashier-bg-canvas: #F4F6FC;
  --cashier-bg-surface: #FFFFFF;
  --cashier-bg-raised: #F4F6FC;
  --cashier-bg-selected: #EDE9FF;
  --cashier-bg-disabled: #E5E9F3;
  --cashier-text-primary: #18213A;
  --cashier-text-secondary: #56637D;
  --cashier-text-accent: #6246EA;
  --cashier-text-disabled: #56637D;
  --cashier-text-on-brand: #FFFFFF;
  --cashier-border-subtle: #DCE2EF;
  --cashier-border-control: #7A86A0;
  --cashier-border-selected: #6246EA;
  --cashier-action-primary: #6246EA;
  --cashier-action-primary-hover: #5238D0;
  --cashier-action-primary-active: #442CB7;
  --cashier-action-primary-text: #FFFFFF;
  --cashier-action-secondary: #FFFFFF;
  --cashier-action-secondary-hover: #EDE9FF;
  --cashier-action-secondary-text: #3F2CA6;
  --cashier-link: #6246EA;
  --cashier-focus-ring: #6246EA;
  --cashier-focus-gap: #FFFFFF;
  --cashier-evidence: #076B79;
  --cashier-evidence-bg: #E2F5F8;
  --cashier-status-success-text: #126344;
  --cashier-status-success-bg: #E6F4ED;
  --cashier-status-pending-text: #815207;
  --cashier-status-pending-bg: #FFF1D6;
  --cashier-status-error-text: #A32942;
  --cashier-status-error-bg: #FDE9ED;
  --cashier-status-info-text: #3F2CA6;
  --cashier-status-info-bg: #EDE9FF;
  --cashier-ai-bg: #EDE9FF;
  --cashier-ai-text: #18213A;
  --cashier-ai-text-secondary: #56637D;
  --cashier-ai-accent: #6246EA;
  --cashier-ai-evidence: #076B79;
  --cashier-shadow-card: 0 4px 20px rgb(24 33 58 / 6%);
  --cashier-shadow-overlay: 0 16px 48px rgb(11 16 32 / 16%);
}

[data-theme="dark"] {
  color-scheme: dark;
  --cashier-brand-mark: #A99AFF;
  --cashier-brand-chachla: #FFFFFF;
  --cashier-brand-pay: #A99AFF;
  --cashier-bg-canvas: #0B1020;
  --cashier-bg-surface: #141C31;
  --cashier-bg-raised: #1D2742;
  --cashier-bg-selected: #292248;
  --cashier-bg-disabled: #1D2742;
  --cashier-text-primary: #FFFFFF;
  --cashier-text-secondary: #A8B3CF;
  --cashier-text-accent: #A99AFF;
  --cashier-text-disabled: #A8B3CF;
  --cashier-text-on-brand: #FFFFFF;
  --cashier-border-subtle: #2B3651;
  --cashier-border-control: #65728E;
  --cashier-border-selected: #A99AFF;
  --cashier-action-primary: #6246EA;
  --cashier-action-primary-hover: #5238D0;
  --cashier-action-primary-active: #442CB7;
  --cashier-action-primary-text: #FFFFFF;
  --cashier-action-secondary: #1D2742;
  --cashier-action-secondary-hover: #292248;
  --cashier-action-secondary-text: #FFFFFF;
  --cashier-link: #A99AFF;
  --cashier-focus-ring: #A99AFF;
  --cashier-focus-gap: #141C31;
  --cashier-evidence: #39D5E5;
  --cashier-evidence-bg: #12343F;
  --cashier-status-success-text: #79D6AD;
  --cashier-status-success-bg: #12382E;
  --cashier-status-pending-text: #F6CC75;
  --cashier-status-pending-bg: #3A2B17;
  --cashier-status-error-text: #FFABB1;
  --cashier-status-error-bg: #41232D;
  --cashier-status-info-text: #A99AFF;
  --cashier-status-info-bg: #292248;
  --cashier-ai-bg: #292248;
  --cashier-ai-text: #FFFFFF;
  --cashier-ai-text-secondary: #A8B3CF;
  --cashier-ai-accent: #A99AFF;
  --cashier-ai-evidence: #39D5E5;
  --cashier-shadow-card: 0 4px 20px rgb(0 0 0 / 12%);
  --cashier-shadow-overlay: 0 16px 48px rgb(0 0 0 / 32%);
}

@media (prefers-reduced-motion: reduce) {
  :root,
  [data-theme="light"],
  [data-theme="dark"] {
    --cashier-motion-fast: 0ms;
    --cashier-motion-standard: 0ms;
    --cashier-motion-panel: 0ms;
    --cashier-motion-transition: 0ms;
    --cashier-motion-story-max: 0ms;
  }
}