/**
 * Credì Design System Tokens & Variables
 */
:root {
  /* Brand Palette */
  --color-primary: #2762AC;
  --color-primary-dark: #1A518F;
  --color-primary-light: #407BBF;
  --color-accent: #36AFE3;
  --color-accent-light: #5BC7F2;
  
  /* Neutral Palette */
  --color-white: #FFFFFF;
  --color-bg-page: #EDF2F8;
  --color-bg-surface: #F9FBFD;
  --color-card-blue: #EEF4FB;
  --color-card-dark: #0F1923;
  --color-border-subtle: rgba(0, 0, 0, 0.06);
  --color-border-focus: #A7C5EA;
  
  /* Text Colors */
  --color-text-main: #0A0A0A;
  --color-text-muted: #5A6A7E;
  --color-text-light: #8E9BAE;
  --color-text-white: #FFFFFF;
  --color-text-white-muted: rgba(255, 255, 255, 0.82);

  /* Gradients */
  --gradient-hero: linear-gradient(125.35deg, #2862AD 8.13%, #2878BB 50%, #36AFE3 91.87%);
  --gradient-cta: linear-gradient(135deg, #1A518F 7.7%, #2862AD 47.5%, #2BA6DC 92.3%);
  --gradient-circle: radial-gradient(circle at center, rgba(40, 98, 173, 0.35) 0%, rgba(54, 175, 227, 0) 70%);

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

  /* Elevations & Shadows */
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 8px 24px rgba(39, 98, 172, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 16px 40px rgba(39, 98, 172, 0.12), 0 4px 16px rgba(0, 0, 0, 0.05);
  --shadow-phone: 0 32px 64px rgba(39, 98, 172, 0.18), 0 8px 24px rgba(0, 0, 0, 0.08);

  /* Radii */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 100px;
  --radius-phone: 36px;

  /* Layout Dimensions */
  --container-max-width: 1320px;
  --section-spacing-y: clamp(4rem, 8vw, 7.5rem);
  --section-spacing-x: clamp(1.25rem, 4vw, 3rem);

  /* Animation Timings */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
