/**
 * 212QR design tokens as CSS custom properties.
 * Mirrors `src/index.ts` — keep both in sync (see tokens.spec.ts for contrast checks).
 */

:root {
  /* Palette */
  --qr212-white: #ffffff;
  --qr212-brand-950: #672113;
  --qr212-brand-900: #942c15;
  --qr212-brand-800: #b63016;
  --qr212-brand-700: #ce351b;
  --qr212-brand-600: #e54828;
  --qr212-brand-300: #ffccb0;
  --qr212-brand-100: #fff0e8;
  --qr212-brand-50: #fff5ef;
  --qr212-neutral-950: #30211d;
  --qr212-neutral-800: #58423a;
  --qr212-neutral-500: #98867e;
  --qr212-neutral-300: #e9d2c3;
  --qr212-neutral-100: #fff8f3;
  --qr212-neutral-600: #766259;
  --qr212-neutral-200: #f0e2d8;
  --qr212-neutral-50: #fffcf9;
  --qr212-espresso-950: #17120e;
  --qr212-espresso-900: #211913;
  --qr212-espresso-800: #2e241b;
  --qr212-espresso-700: #3f3226;
  --qr212-espresso-600: #574636;
  --qr212-espresso-500: #74604c;
  --qr212-espresso-400: #98836c;
  --qr212-espresso-300: #bca992;
  --qr212-espresso-200: #dccdb9;
  --qr212-espresso-100: #efe5d8;
  --qr212-espresso-50: #f8f3eb;

  --qr212-terracotta-700: #8c3a1e;
  --qr212-terracotta-600: #a94726;
  --qr212-terracotta-500: #c2542f;
  --qr212-terracotta-400: #d97247;
  --qr212-terracotta-300: #e99a76;
  --qr212-terracotta-200: #f5c6b0;
  --qr212-terracotta-100: #fbe7dd;

  --qr212-teal-900: #08302e;
  --qr212-teal-800: #0d4340;
  --qr212-teal-700: #125754;
  --qr212-teal-600: #186e6a;
  --qr212-teal-500: #1f8984;
  --qr212-teal-400: #3fa9a3;
  --qr212-teal-300: #7bc7c2;
  --qr212-teal-200: #b3e0dd;
  --qr212-teal-100: #dff2f0;

  --qr212-green-700: #1f6b3a;
  --qr212-green-600: #268047;
  --qr212-green-500: #2f9b57;
  --qr212-green-100: #e2f5e9;
  --qr212-amber-700: #8a5a00;
  --qr212-amber-600: #a96f00;
  --qr212-amber-500: #c98a00;
  --qr212-amber-100: #fcf1d8;
  --qr212-red-700: #9b1c1c;
  --qr212-red-600: #b72424;
  --qr212-red-500: #d0342c;
  --qr212-red-100: #fbe5e3;
  --qr212-blue-700: #1d4ed8;
  --qr212-blue-600: #2563eb;
  --qr212-blue-100: #e3ecfe;

  --qr212-saffron-700: #8c4a00;

  --qr212-saffron-500: #ffc268;

  --qr212-saffron-100: #fff0d1;

  --qr212-brand-500: #ff6b45;

  /* Spacing */
  --qr212-space-xxs: 2px;
  --qr212-space-xs: 4px;
  --qr212-space-sm: 8px;
  --qr212-space-md: 12px;
  --qr212-space-lg: 16px;
  --qr212-space-xl: 20px;
  --qr212-space-2xl: 24px;
  --qr212-space-3xl: 32px;
  --qr212-space-4xl: 40px;
  --qr212-space-5xl: 48px;
  --qr212-space-6xl: 64px;

  /* Radii */
  --qr212-radius-sm: 6px;
  --qr212-radius-md: 10px;
  --qr212-radius-lg: 14px;
  --qr212-radius-xl: 20px;
  --qr212-radius-full: 9999px;

  /* Type scale */
  --qr212-font-sans:
    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans Arabic', sans-serif;
  --qr212-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --qr212-text-display: 34px;
  --qr212-text-title1: 28px;
  --qr212-text-title2: 22px;
  --qr212-text-title3: 18px;
  --qr212-text-body: 16px;
  --qr212-text-callout: 14px;
  --qr212-text-caption: 12px;
  --qr212-text-overline: 11px;

  /* Sizing */
  --qr212-tap-target-min: 44px;
  --qr212-control-height: 48px;
  --qr212-control-height-lg: 56px;
  --qr212-header-height: 56px;

  /* Motion */
  --qr212-duration-fast: 120ms;
  --qr212-duration-normal: 200ms;
  --qr212-duration-slow: 320ms;
  --qr212-ease: cubic-bezier(0.2, 0, 0, 1);

  /* Breakpoints (reference only — media queries use literal CSS dimensions) */
  --qr212-breakpoint-sm: 640px;
  --qr212-breakpoint-md: 768px;
  --qr212-breakpoint-lg: 1024px;
  --qr212-breakpoint-xl: 1280px;

  /* Light theme semantic tokens */
  --qr212-color-canvas: #fffcf9;
  --qr212-color-surface: #ffffff;
  --qr212-color-surface-muted: #fff5ef;
  --qr212-color-surface-sunken: #f0e2d8;
  --qr212-color-overlay: rgba(23, 18, 14, 0.55);

  --qr212-color-text: #30211d;
  --qr212-color-text-muted: #766259;
  --qr212-color-text-subtle: #766259;
  --qr212-color-text-inverse: #ffffff;
  --qr212-color-border: #f0e2d8;
  --qr212-color-border-strong: #e9d2c3;

  --qr212-color-primary: #ce351b;
  --qr212-color-primary-hover: #b63016;
  --qr212-color-primary-active: #942c15;
  --qr212-color-primary-subtle: #fff0e8;
  --qr212-color-on-primary: #ffffff;

  --qr212-color-admin: #ce351b;
  --qr212-color-admin-hover: #b63016;
  --qr212-color-admin-subtle: #fff0e8;
  --qr212-color-on-admin: #ffffff;

  --qr212-color-success: #268047;
  --qr212-color-success-subtle: #e2f5e9;
  --qr212-color-warning: #c98a00;
  --qr212-color-warning-subtle: #fcf1d8;
  --qr212-color-danger: #d0342c;
  --qr212-color-danger-hover: #b72424;
  --qr212-color-danger-subtle: #fbe5e3;
  --qr212-color-info: #2563eb;
  --qr212-color-info-subtle: #e3ecfe;
}

[data-theme='dark'] {
  --qr212-color-canvas: #17120e;
  --qr212-color-surface: #211913;
  --qr212-color-surface-muted: #2e241b;
  --qr212-color-surface-sunken: #3f3226;
  --qr212-color-overlay: rgba(0, 0, 0, 0.65);

  --qr212-color-text: #f8f3eb;
  --qr212-color-text-muted: #bca992;
  --qr212-color-text-subtle: #98836c;
  --qr212-color-text-inverse: #17120e;
  --qr212-color-border: #3f3226;
  --qr212-color-border-strong: #574636;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --qr212-color-canvas: #17120e;
    --qr212-color-surface: #211913;
    --qr212-color-surface-muted: #2e241b;
    --qr212-color-surface-sunken: #3f3226;
    --qr212-color-overlay: rgba(0, 0, 0, 0.65);

    --qr212-color-text: #f8f3eb;
    --qr212-color-text-muted: #bca992;
    --qr212-color-text-subtle: #98836c;
    --qr212-color-text-inverse: #17120e;
    --qr212-color-border: #3f3226;
    --qr212-color-border-strong: #574636;
  }
}