:root {
  /* Brand */
  --volet-900: #2E1065;
  --volet-800: #3B0764;
  --volet-700: #4C1D95;
  --volet-600: #5B21B6;
  --volet-500: #6D28D9;
  --volet-400: #7C3AED;
  --volet-300: #8B5CF6;
  --volet-200: #A78BFA;
  --volet-100: #DDD6FE;
  --volet-50:  #F5F3FF;

  /* Business accent */
  --biz-500: #2563EB;
  --biz-400: #0EA5E9;

  /* Semantic */
  --color-bg: #FAFAFA;
  --color-surface: #FFFFFF;
  --color-surface-2: #F4F4F6;
  --color-text-primary: #0F0A23;
  --color-text-secondary: #6B6880;
  --color-text-tertiary: #A09DB8;
  --color-border: #E8E6F0;
  /* iOS system status palette */
  --color-success: #34C759;
  --color-warning: #FF9500;
  --color-error: #FF3B30;

  /* Semantic aliases (iOS additive) — trỏ về biến gốc, tự kế thừa dark qua body.dark */
  --label: var(--color-text-primary);
  --secondary-label: var(--color-text-secondary);
  --tertiary-label: var(--color-text-tertiary);
  --system-background: var(--color-bg);
  --secondary-system-background: var(--color-surface);
  --secondary-system-grouped-background: var(--color-surface-2);
  --separator: var(--color-border);
  --fill-tertiary: var(--color-surface-2);

  /* Typography */
  --font-display: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;

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

  /* Radius */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 24px; --r-full: 9999px;

  /* Blur / material tokens (iOS) */
  --mat-thin-blur: 12px;
  --mat-thin-bg: rgba(255,255,255,0.6);
  --mat-regular-blur: 20px;
  --mat-regular-bg: rgba(255,255,255,0.82);
  --mat-thick-blur: 30px;
  --mat-thick-bg: rgba(255,255,255,0.92);

  /* Shadows — neutral, soft (bỏ tint tím) */
  --shadow-card: 0 1px 2px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.06);
  --shadow-float: 0 2px 8px rgba(0,0,0,0.06), 0 12px 32px rgba(0,0,0,0.1);
  --shadow-sheet: 0 -8px 40px rgba(0,0,0,0.14);

  /* Tier gradients */
  --tier-bronze: linear-gradient(135deg, #CD7F32, #A0612A);
  --tier-silver: linear-gradient(135deg, #D8D8D8, #A8A8B0);
  --tier-gold: linear-gradient(135deg, #FFD700, #E0A800);
  --tier-diamond: linear-gradient(135deg, #B9F2FF, #A78BFA);

  /* Safe area */
  --sa-bottom: env(safe-area-inset-bottom, 20px);

  /* Motion */
  --motion-fast: 150ms;
  --motion-base: 220ms;
  --motion-slow: 300ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

body.dark {
  --color-bg: #0B0712;
  --color-surface: #15101F;
  --color-surface-2: #1E1830;
  --color-text-primary: #F5F3FF;
  --color-text-secondary: #A89FC0;
  --color-text-tertiary: #6B6483;
  --color-border: #2A2340;
  --mat-thin-bg: rgba(21,16,31,0.6);
  --mat-regular-bg: rgba(15,10,35,0.78);
  --mat-thick-bg: rgba(11,7,18,0.9);
  --shadow-card: 0 2px 12px rgba(0,0,0,0.4);
  --shadow-float: 0 8px 32px rgba(0,0,0,0.5);
}