/* ==========================================================================
   ALUPOL DESIGN TOKENS & VARIABLES
   ========================================================================== */

:root {
  /* Colors */
  --color-primary: #0071BA;
  --color-primary-dark: #005B96;
  --color-primary-light: #EBF5FF;
  --color-secondary: #131B26;
  --color-secondary-soft: #1C2636;
  --color-secondary-surface: #253347;
  
  --color-accent: #FBBF24;
  --color-accent-hover: #F59E0B;
  --color-accent-text: #0F172A;
  
  --color-text: #131B26;
  --color-text-main: #475569;
  --color-text-dark: #131B26;
  --color-text-muted: #64748B;
  --color-text-light: #FFFFFF;
  --color-text-dim: #CBD5E1;
  
  --color-bg-light: #F7FAFC;
  --color-bg-card: #FFFFFF;
  --color-bg-dark: #131B26;
  --color-bg-form: #131B26;
  --color-bg-form-inner: #1a2236;
  
  --color-border: #E1EEF4;
  --color-border-subtle: #EDF2F7;
  --color-border-dark: #2A334B;

  /* Typography */
  --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Spacing */
  --section-spacing-y: 5rem;
  --section-spacing-y-sm: 3.5rem;
  --container-max-width: 1320px;
  --container-padding-x: 1.25rem;

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

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(13, 12, 34, 0.04);
  --shadow-md: 0 8px 24px rgba(13, 12, 34, 0.08);
  --shadow-lg: 0 16px 40px rgba(13, 12, 34, 0.12);
  --shadow-card-hover: 0 20px 40px rgba(0, 150, 255, 0.12);
  --shadow-accent: 0 4px 14px rgba(251, 191, 36, 0.3);

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}