/* ============================================
   101Guest — Design Tokens
   Fuente de verdad para colores, tipografía,
   spacing, sombras y radios de todo el sistema.
   ============================================ */

:root {
   /* ========================================
       BRAND — Colores principales de 101Guest
       Inspirados en la paleta Mondelez
       ======================================== */
   --brand-primary: #4b0072;
   --brand-primary-dark: #250038;
   --brand-primary-light: #724D8D;
   --brand-primary-pale:   #D8C0EB;
   --brand-primary-soft: rgba(75, 0, 114, 0.08);
   --brand-primary-hover: #8e1eab;

   /* ========================================
       ACCENTS — Paleta Mondelez extendida
       ======================================== */
   --color-golden-wheat: #E8B79F;
   --color-go-green: #287B19;
   --color-cocoa-brown: #623E23;
   --color-tasty-red: #A52323;
   --color-cool-blue: #2D6EAA;
   --color-sunny-grain: #E6AF23;
   --color-cool-grey: #666666;

   /* ========================================
       SEMANTIC — Estados y feedback
       ======================================== */
   --color-success: #287B19;
   --color-warning: #E6AF23;
   --color-danger: #A52323;
   --color-info: #2D6EAA;

   /* ========================================
       NEUTRALS — Texto, fondos, bordes
       ======================================== */
   --text-primary: #111111;
   --text-secondary: #666666;
   --text-muted: #999999;
   --text-inverse: #FFFFFF;

   --border-color: #E5E5E5;
   --border-strong: #CCCCCC;

   --bg-white: #FFFFFF;
   --bg-light: #F9F9F9;
   --bg-page: #E2DFD9;
   --bg-dark: #111111;

   /* ========================================
       TYPOGRAPHY
       ======================================== */
   --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

   --font-size-xs: 0.75rem;
   --font-size-sm: 0.875rem;
   --font-size-base: 1rem;
   --font-size-lg: 1.125rem;
   --font-size-xl: 1.25rem;
   --font-size-2xl: 1.5rem;
   --font-size-3xl: 1.875rem;
   --font-size-4xl: 2.25rem;

   --font-weight-normal: 400;
   --font-weight-medium: 500;
   --font-weight-semibold: 600;
   --font-weight-bold: 700;
   --font-weight-extrabold: 800;

   --line-height-tight: 1.2;
   --line-height-normal: 1.5;
   --line-height-relaxed: 1.7;

   /* ========================================
       SPACING — Escala base 4px
       ======================================== */
   --space-1: 4px;
   --space-2: 8px;
   --space-3: 12px;
   --space-4: 16px;
   --space-5: 20px;
   --space-6: 24px;
   --space-8: 32px;
   --space-10: 40px;
   --space-12: 48px;
   --space-16: 64px;
   --space-20: 80px;

   /* ========================================
       BORDER RADIUS
       ======================================== */
   --radius-sm: 8px;
   --radius-md: 14px;
   --radius-lg: 20px;
   --radius-full: 999px;

   /* ========================================
       SHADOWS
       ======================================== */
   --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
   --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.08);
   --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12);
   --shadow-focus: 0 0 0 3px rgba(75, 0, 114, 0.15);

   /* ========================================
       GRADIENTS
       ======================================== */
   --gradient-page: linear-gradient(180deg, #2c0042 0%, #1a0033 40%, #0d001a 100%);

   /* ========================================
       TRANSITIONS
       ======================================== */
   --transition-fast: 0.15s ease;
   --transition-base: 0.2s ease;
   --transition-slow: 0.3s ease;

   /* ========================================
       LAYOUT
       ======================================== */
   --container-max: 1100px;
   --header-height: 60px;
}