/*
 * OriginQR design tokens — shared visual language.
 * See DESIGN_SYSTEM.md in the repo root for rationale and usage rules.
 * Every page should load this before its own stylesheet and build on top
 * of these custom properties rather than hardcoding new colors/spacing.
 */
:root {
  /* Color */
  --color-primary: #2554FF;
  --color-primary-dark: #1A3FCC;
  --color-primary-light: #EEF2FF;
  --color-ink: #0B1220;
  --color-body: #475569;
  --color-muted: #94A3B8;
  --color-bg: #F7F9FC;
  --color-surface: #FFFFFF;
  --color-border: #E3E8EF;
  --color-success: #16A34A;
  --color-danger: #DC2626;
  --color-warning: #D97706;
  --color-neutral: #64748B;

  /* Status tints (12% opacity versions for badge backgrounds) */
  --color-success-tint: rgba(22, 163, 74, 0.12);
  --color-danger-tint: rgba(220, 38, 38, 0.12);
  --color-warning-tint: rgba(217, 119, 6, 0.12);
  --color-neutral-tint: rgba(100, 116, 139, 0.12);

  /* Typography */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

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

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.10);
}