/* 
   AyaSend Design System — CSS Tokens v1.0
   Single source of truth for colors, spacing, and radii.
*/

:root {
  /* Colors - Blue Scale (Primary Brand) */
  --aya-primary: #2563EB;
  --aya-primary-light: #3B82F6;
  --aya-primary-dark: #1D4ED8;
  --aya-primary-glow: rgba(37, 99, 235, 0.35);

  /* Semantic Colors */
  --aya-success: #0F9D78;
  --aya-success-light: #22C55E;
  --aya-warning: #F6AD55;
  --aya-destructive: #E53E3E;

  /* Backgrounds */
  --aya-bg-primary: #0A0A1A;
  --aya-bg-card: #11112E;
  --aya-bg-elevated: #16163A;
  --aya-bg-glass: rgba(255, 255, 255, 0.06);
  --aya-border-glass: rgba(255, 255, 255, 0.12);

  /* Text Colors */
  --aya-text-primary: #FFFFFF;
  --aya-text-secondary: #8888AA;
  --aya-text-tertiary: #555570;

  /* Spacing (8pt grid) */
  --aya-spacing-xs: 4px;
  --aya-spacing-sm: 8px;
  --aya-spacing-md: 16px;
  --aya-spacing-lg: 24px;
  --aya-spacing-xl: 32px;
  --aya-spacing-xxl: 48px;

  /* Corner Radius */
  --aya-radius-tag: 8px;
  --aya-radius-button: 12px;
  --aya-radius-input: 12px;
  --aya-radius-card: 16px;
  --aya-radius-premium-card: 24px;
  --aya-radius-hero: 28px;
  --aya-radius-avatar: 9999px;

  /* Shadows */
  --aya-shadow-card: 0 4px 12px rgba(0, 0, 0, 0.30);
  --aya-shadow-premium: 0 12px 24px rgba(0, 0, 0, 0.35);
  --aya-shadow-glow: 0 6px 16px rgba(37, 99, 235, 0.45);

  /* Motion */
  --aya-duration-fast: 150ms;
  --aya-duration-base: 300ms;
  --aya-duration-slow: 500ms;
}

/* Base dark mode support if applicable */
html.dark {
  --aya-bg-primary: #0A0A1A;
  --aya-bg-card: #11112E;
  --aya-bg-elevated: #16163A;
}