/**
 * Connect Design System Tokens
 * Matches exact Connect brand identity: Red, Deep Red, Soft Rose & Pure White
 */

:root {
  /* Brand Colors */
  --connect-red: #F20D43;
  --connect-deep-red: #C90835;
  --connect-soft-rose: #FFF0F3;
  --connect-pure-white: #FFFFFF;
  --connect-primary-text: #17171C;
  --connect-secondary-text: #70717A;
  --connect-border: #F0DDE2;
  --connect-bg-light: #FAFAFC;
  
  /* Status Colors */
  --connect-success: #16A36A;
  --connect-warning: #F3A712;
  --connect-info: #3278F6;
  
  /* Gradients */
  --connect-gradient-primary: linear-gradient(135deg, #F20D43 0%, #C90835 100%);
  --connect-gradient-glow: linear-gradient(180deg, rgba(242, 13, 67, 0.12) 0%, rgba(242, 13, 67, 0) 100%);
  --connect-gradient-card-overlay: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.85) 100%);
  --connect-gradient-surface: linear-gradient(180deg, #FFFFFF 0%, #FFF5F7 100%);

  /* Typography */
  --connect-font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --connect-font-weight-regular: 400;
  --connect-font-weight-medium: 500;
  --connect-font-weight-semibold: 600;
  --connect-font-weight-bold: 700;
  --connect-font-weight-black: 800;

  /* Elevation & Shadows */
  --connect-shadow-sm: 0 2px 8px rgba(23, 23, 28, 0.04);
  --connect-shadow-md: 0 4px 16px rgba(23, 23, 28, 0.08);
  --connect-shadow-lg: 0 12px 32px rgba(242, 13, 67, 0.12);
  --connect-shadow-card: 0 8px 24px rgba(242, 13, 67, 0.07), 0 2px 6px rgba(0, 0, 0, 0.04);
  --connect-shadow-button: 0 6px 20px rgba(242, 13, 67, 0.35);

  /* Radii */
  --connect-radius-sm: 8px;
  --connect-radius-md: 14px;
  --connect-radius-lg: 22px;
  --connect-radius-xl: 32px;
  --connect-radius-pill: 9999px;

  /* Transitions */
  --connect-transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
  --connect-transition-base: 250ms cubic-bezier(0.16, 1, 0.3, 1);
  --connect-transition-spring: 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* Layout & Safe Areas */
  --connect-header-height: 68px;
  --connect-bottom-nav-height: 74px;
  --connect-safe-bottom: env(safe-area-inset-bottom, 0px);
}