/*
 * Design tokens for Branded QR.
 * Brand purple/blue (#6a11cb / #2575fc) is the only pre-existing brand signal
 * (no logo assets exist) — kept here as accent-only tokens, not a page background.
 */
:root {
  /* Surfaces */
  --color-bg: #F7F7FB;
  --color-surface: #FFFFFF;
  --color-surface-muted: #F1F0F7;
  --color-surface-sunken: #ECEAF4;

  /* Text */
  --color-text: #1B1730;
  --color-text-muted: #635F77;
  --color-text-subtle: #726D89;
  --color-text-on-primary: #FFFFFF;

  /* Borders */
  --color-border: #E4E2ED;
  --color-border-strong: #D3D0E0;

  /* Brand accent */
  --color-primary: #6A11CB;
  --color-primary-hover: #57109F;
  --color-primary-active: #470D85;
  --color-primary-soft: #F1E9FC;
  --color-accent: #2575FC;
  --color-accent-soft: #E8F0FE;

  /* Semantic — text values verified at 4.5:1+ against their -soft background at badge text size (12px) */
  --color-success: #12744A;
  --color-success-soft: #E5F5EE;
  --color-warning: #8A5A12;
  --color-warning-soft: #FBF0DC;
  --color-danger: #C4331F;
  --color-danger-hover: #A32A19;
  --color-danger-soft: #FBEAE7;
  --color-info: #1857C4;
  --color-info-soft: #E8F0FE;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(27,23,48,0.06), 0 1px 1px rgba(27,23,48,0.04);
  --shadow-md: 0 6px 16px rgba(27,23,48,0.10), 0 2px 4px rgba(27,23,48,0.04);
  --shadow-lg: 0 16px 40px rgba(27,23,48,0.16), 0 4px 10px rgba(27,23,48,0.06);

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

  /* Type */
  --font-sans: 'Montserrat', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.875rem;
  --text-3xl: 2.25rem;
  --leading-tight: 1.25;
  --leading-normal: 1.5;

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

  /* Layout */
  --container-max: 1180px;
  --header-height: 60px;
  --touch-target: 44px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #14121F;
    --color-surface: #1C1930;
    --color-surface-muted: #241F3D;
    --color-surface-sunken: #100E1A;
    --color-text: #F1EFF9;
    --color-text-muted: #B4AFC9;
    --color-text-subtle: #8A86A0;
    --color-border: #322C4C;
    --color-border-strong: #423A63;
    --color-primary: #9257E8;
    --color-primary-hover: #A874ED;
    --color-primary-active: #7B3FD1;
    --color-primary-soft: #2C2149;
    --color-accent: #5B9BFF;
    --color-accent-soft: #1C2C4D;
    --color-success: #4ADE94;
    --color-success-soft: #123425;
    --color-warning: #E3A73F;
    --color-warning-soft: #3A2C0F;
    --color-danger: #F0776A;
    --color-danger-soft: #3A1712;
    --color-info: #5B9BFF;
    --color-info-soft: #1C2C4D;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}