/**
 * Calm Commerce v1.0 Design Tokens
 * Conforming to mobile/src/theme/colors.ts and Woopanel Brand Guidelines
 */
:root {
  /* Brand Palette */
  --brand-deep: #2D085A;
  --brand-purple: #721DEA;
  --brand-lavender: #CDBAFD;
  --brand-mist: #F7F0FF;

  /* Surfaces */
  --surface-base: #F8F8FB;
  --surface-card: #FFFFFF;
  --surface-elevated: #FFFFFF;
  --surface-tinted: #F7F0FF;
  --surface-muted: #F2EFF7;

  /* Typography Colors */
  --text-primary: #21162F;
  --text-secondary: #71677E;
  --text-tertiary: #8E849C;

  /* Borders */
  --border-subtle: #E9E4F0;
  --border-strong: #D5CCE3;

  /* Actions */
  --action-primary: #721DEA;
  --action-primary-hover: #5B13C4;
  --action-primary-text: #FFFFFF;
  --action-secondary: #F1E8FF;
  --action-secondary-text: #2D085A;

  /* Status Tokens */
  --status-success: #137547;
  --status-success-bg: #E4F5EC;
  --status-warning: #9A5800;
  --status-warning-bg: #FFF2D8;
  --status-error: #B42335;
  --status-error-alt: #D92D20;
  --status-error-bg: #FCE8EA;
  --status-info: #145BA6;
  --status-info-bg: #E8F3FF;

  /* Typography & Tabular Numerals */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-family: var(--font-sans);
  --font-tabular: tabular-nums;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(45, 8, 90, 0.05);
  --shadow-md: 0 4px 12px rgba(45, 8, 90, 0.08);
  --shadow-lg: 0 10px 30px rgba(45, 8, 90, 0.12);
  --shadow-xl: 0 20px 40px -15px rgba(45, 8, 90, 0.16);
  --shadow-glow: 0 0 0 3px rgba(114, 29, 234, 0.15);

  /* Border Radii */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 9999px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
}