/* ==============================
   VARIABLES.CSS – DESIGN SYSTEM
   ============================== */

:root {
  /* 🎮 Brand colors */
  --color-bg-main: #FFFFFF ;
  --color-bg-secondary: #F3F4F6;
  --color-bg-secondary-dark: #0F172A;
  --color-bg-card: #FFFFFF;

  --color-primary: #0F172A;
  --color-primary-hover: #1d486c;

  --color-accent: #1E3A8A; /* prize / success */
  --color-danger: #ef4444;

  /* Text dark */
  --color-text-main: #374151;
  --color-text-muted: #6b7280;
  --color-text-heading: #0F172A;

  /* Text light */
  --color-text-inverted: #FFFFFF;
  --color-text-inverted-muted: #D3D6D3;


  /* Borders */
  --color-border-soft: rgba(0,0,0,0.08);
  --color-border-strong: rgba(0,0,0,0.15);

  /* Typography */
  --font-main: 'Inter', system-ui, sans-serif;
  --font-title: 'Playfair Display' !important;
  --font-subtitles: 'Cormorant Garamond', system-ui, sans-serif;

  /* Playfair Display (títulos) */
  --fw-playfair-light: 300;    
  --fw-playfair-regular: 400;  
  --fw-playfair-medium: 500; 
  --fw-playfair-bold: 700;     
  --fw-playfair-black: 900;    

  /* Cormorant Garamond (subtítulos) */
  --fw-cormorant-light: 300;
  --fw-cormorant-regular: 400;
  --fw-cormorant-medium: 500;
  --fw-cormorant-bold: 700;

  /* Inter (texto general) */
  --fw-inter-thin: 100;
  --fw-inter-light: 300;
  --fw-inter-regular: 400; 
  --fw-inter-medium: 500;
  --fw-inter-semibold: 600;
  --fw-inter-bold: 700;
  --fw-inter-extrabold: 800;
  --fw-inter-black: 900;

  /* 🔥 FONT SYSTEM (CLAVE) */
  --fs-xs: clamp(0.75rem, 0.8vw, 0.85rem); /* 12px */
  --fs-sm: clamp(0.9rem, 1vw, 1rem); /* 14px */
  --fs-base: clamp(1rem, 1.2vw, 1.125rem); /* 16px */
  --fs-md: clamp(1.2rem, 1.5vw, 1.4rem); /* 20px */
  --fs-lg: clamp(1.5rem, 2vw, 2rem); /* 24px */
  --fs-xl: clamp(2rem, 3vw, 3rem); /* 32px */
  --fs-xxl: clamp(2.5rem, 4vw, 4rem); /* 40px * /
  
   /* 🔥 SPACING SYSTEM (MUY IMPORTANTE) */
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 20px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-xxl: 80px;


  /* Sizes */
  --container-width: 1200px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  /* Shadows */
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.4);
  --shadow-strong: 0 20px 60px rgba(0, 0, 0, 0.6);

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
}