/* ══════════════════════════════════════════════════════════════
   EL OTRO BANDO — Design Tokens
   Neo-Brutalismo Urbano Premium
   ══════════════════════════════════════════════════════════════ */

/* ── Google Fonts Import ── */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,700;12..96,800&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,700;1,9..40,400&display=swap');

:root {
  /* ═══ PALETA CROMÁTICA ═══ */
  --color-accent:         #FF4D00;
  --color-accent-hover:   #E64500;
  --color-accent-light:   #FF6B2B;
  --color-accent-glow:    rgba(255, 77, 0, 0.15);

  --color-bg-dark:        #1A1A1A;
  --color-bg-darker:      #111111;
  --color-bg-cream:       #F5F3F2;
  --color-bg-cream-alt:   #EDE9E6;

  --color-black:          #000000;
  --color-white:          #FFFFFF;

  --color-gray-100:       #F7F7F7;
  --color-gray-200:       #E5E5E5;
  --color-gray-300:       #D4D4D4;
  --color-gray-400:       #A3A3A3;
  --color-gray-500:       #737373;
  --color-gray-600:       #525252;
  --color-gray-700:       #404040;
  --color-gray-800:       #262626;
  --color-gray-900:       #171717;

  --color-text-on-dark:   #F5F3F2;
  --color-text-on-light:  #1A1A1A;
  --color-text-muted:     #737373;

  --color-success:        #22C55E;
  --color-warning:        #FACC15;
  --color-error:          #EF4444;
  --color-info:           #3B82F6;

  /* ═══ TIPOGRAFÍA ═══ */
  --font-headline:        'Bricolage Grotesque', 'Arial Black', sans-serif;
  --font-body:            'DM Sans', 'Helvetica Neue', Arial, sans-serif;

  /* Tamaños — escala fluid con clamp */
  --text-xs:              0.75rem;     /* 12px */
  --text-sm:              0.875rem;    /* 14px */
  --text-base:            1rem;        /* 16px */
  --text-lg:              1.125rem;    /* 18px */
  --text-xl:              1.25rem;     /* 20px */
  --text-2xl:             clamp(1.5rem, 2vw + 0.5rem, 1.75rem);    /* 24-28px */
  --text-3xl:             clamp(1.875rem, 3vw + 0.5rem, 2.25rem);  /* 30-36px */
  --text-4xl:             clamp(2.25rem, 4vw + 0.5rem, 3rem);      /* 36-48px */
  --text-5xl:             clamp(3rem, 5vw + 1rem, 4rem);            /* 48-64px */
  --text-6xl:             clamp(3.5rem, 7vw + 1rem, 5.5rem);       /* 56-88px */
  --text-hero:            clamp(3.5rem, 8vw + 1rem, 7rem);          /* 56-112px */

  /* Weights */
  --weight-regular:       400;
  --weight-medium:        500;
  --weight-bold:          700;
  --weight-extrabold:     800;

  /* Line heights */
  --leading-none:         1;
  --leading-tight:        1.05;
  --leading-snug:         1.15;
  --leading-normal:       1.5;
  --leading-relaxed:      1.65;

  /* Letter spacing */
  --tracking-tight:       -0.03em;
  --tracking-normal:      0;
  --tracking-wide:        0.05em;
  --tracking-wider:       0.1em;

  /* ═══ NEO-BRUTALISMO — Bordes y Sombras ═══ */
  --border-width:         3px;
  --border-width-thick:   4px;
  --border-color:         var(--color-black);
  --border-base:          var(--border-width) solid var(--border-color);
  --border-thick:         var(--border-width-thick) solid var(--border-color);

  /* Sombras duras (sin blur) */
  --shadow-hard:          4px 4px 0px 0px var(--color-black);
  --shadow-hard-sm:       2px 2px 0px 0px var(--color-black);
  --shadow-hard-lg:       6px 6px 0px 0px var(--color-black);
  --shadow-hard-xl:       8px 8px 0px 0px var(--color-black);
  --shadow-hard-accent:   4px 4px 0px 0px var(--color-accent);
  --shadow-hard-accent-sm:2px 2px 0px 0px var(--color-accent);
  --shadow-none:          0px 0px 0px 0px var(--color-black);

  /* ═══ SPACING ═══ */
  --space-2xs:            0.125rem;  /* 2px */
  --space-xs:             0.25rem;   /* 4px */
  --space-sm:             0.5rem;    /* 8px */
  --space-md:             1rem;      /* 16px */
  --space-lg:             1.5rem;    /* 24px */
  --space-xl:             2rem;      /* 32px */
  --space-2xl:            3rem;      /* 48px */
  --space-3xl:            4rem;      /* 64px */
  --space-4xl:            6rem;      /* 96px */
  --space-5xl:            8rem;      /* 128px */

  /* ═══ LAYOUT ═══ */
  --container-max:        1200px;
  --container-wide:       1400px;
  --container-narrow:     800px;
  --container-padding:    clamp(1rem, 3vw, 2rem);
  --grid-gap:             clamp(1rem, 2vw, 1.5rem);

  /* ═══ BORDER RADIUS ═══ */
  --radius-none:          0;
  --radius-sm:            2px;
  --radius-base:          4px;

  /* ═══ TRANSITIONS ═══ */
  --transition-fast:      0.15s ease;
  --transition-base:      0.2s ease;
  --transition-slow:      0.4s ease;
  --transition-reveal:    0.6s cubic-bezier(0.16, 1, 0.3, 1);

  /* ═══ Z-INDEX SCALE ═══ */
  --z-base:               1;
  --z-dropdown:           10;
  --z-sticky:             20;
  --z-overlay:            30;
  --z-modal:              40;
  --z-whatsapp:           50;
  --z-nav:                60;
  --z-toast:              70;
}