@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@300;400;500;600;700;800&display=swap');

:root {
  /* Brand Typography */
  --font-primary: 'Inter', sans-serif;
  --font-display: 'Outfit', sans-serif;

  /* Brand Colors */
  --color-primary: #004b8b;         /* Royal brand blue */
  --color-primary-rgb: 0, 75, 139;
  --color-primary-dark: #003664;    /* Dark royal blue */
  --color-primary-light: #257bc8;   /* Light royal blue */
  
  /* Background / Neutral Colors */
  --color-bg-warm: #f7f3e8;         /* Primary brand warm cream */
  --color-bg-warm-dark: #eee9db;    /* Slightly darker cream for borders/cards */
  --color-bg-white: #ffffff;
  --color-bg-white-translucent: rgba(255, 255, 255, 0.8);
  
  /* Accent Colors (Inspired by Projects) */
  --color-accent-blue: #edf5f8;     /* Light blue (Conectar para Avanzar) */
  --color-accent-blue-dark: #012f6b;
  --color-accent-orange: #fdf4eb;   /* Light peach/orange (Donde descansa el cuidado) */
  --color-accent-orange-dark: #d35400;
  --color-accent-green: #f2f7ec;    /* Light sage green (Trenzando Culturas) */
  --color-accent-green-dark: #27ae60;
  
  /* Text Colors */
  --color-text-dark: #111827;       /* Primary text */
  --color-text-medium: #374151;     /* Secondary text */
  --color-text-muted: #6b7280;      /* Muted helper text */
  --color-text-white: #ffffff;      /* Light text on dark bg */
  
  /* UI Elements & Shadows */
  --border-radius-sm: 8px;
  --border-radius-md: 16px;
  --border-radius-lg: 24px;
  --border-radius-xl: 32px;
  --border-radius-circle: 50%;
  
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 10px 20px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.12);
  --shadow-glass: 0 8px 32px 0 rgba(0, 75, 139, 0.08);
  
  /* Animation Timing */
  --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.6s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Layout */
  --container-max-width: 1280px;
  --header-height: 80px;
}