/* ============================================================
   🎨 Pandero Design Tokens
   Definición de variables CSS reutilizables en todo el proyecto
   ============================================================ */

:root {
  /* ------------ COLORS ------------ */

  /* Primitive Colors - Primary */
  --pd-primary-100: #ccdaf1;
  --pd-primary-200: #99b5e3;
  --pd-primary-300: #5b87da;
  --pd-primary-400: #336cc8;
  --pd-primary-500: #0047ba;
  --pd-primary-600: #003995;
  --pd-primary-700: #002b70;
  --pd-primary-800: #001970;
  --pd-primary-900: #000e25;

  /* Primitive Colors - New */
  --pd-new-100: #ffcfd0;
  --pd-new-200: #ff9fa2;
  --pd-new-300: #ff7073;
  --pd-new-400: #ff4045;
  --pd-new-500: #ff1016;
  --pd-new-600: #cc0d12;
  --pd-new-700: #990a0d;
  --pd-new-800: #660609;
  --pd-new-900: #330304;

  /* Primitive Colors - House */
  --pd-house-100: #d3f6f3;
  --pd-house-200: #a7ede8;
  --pd-house-300: #7ae5dc;
  --pd-house-400: #4edcd1;
  --pd-house-500: #22d3c5;
  --pd-house-600: #1ba99e;
  --pd-house-700: #147f76;
  --pd-house-800: #0e544f;
  --pd-house-900: #072a27;

  /* Primitive Colors - Semi-New */
  --pd-semi-new-100: #ffeacc;
  --pd-semi-new-200: #ffd699;
  --pd-semi-new-300: #ffc166;
  --pd-semi-new-400: #ffad33;
  --pd-semi-new-500: #ff9800;
  --pd-semi-new-600: #cc7a00;
  --pd-semi-new-700: #995b00;
  --pd-semi-new-800: #663d00;
  --pd-semi-new-900: #331e00;

  /* Secondary */
  --pd-secondary-100: #ddf4fa;
  --pd-secondary-200: #bce9f6;
  --pd-secondary-300: #9adff1;
  --pd-secondary-400: #79d4ed;
  --pd-secondary-500: #57c9e8;
  --pd-secondary-600: #255669;
  --pd-secondary-800: #255b69;
  --pd-secondary-900: #14363e;

  /* Neutral */
  --pd-neutral-000: #ffffff;
  --pd-neutral-100: #f4f5f5;
  --pd-neutral-200: #d3d7d7;
  --pd-neutral-300: #bcc4c4;
  --pd-neutral-400: #a5b0b0;
  --pd-neutral-500: #909c9c;
  --pd-neutral-600: #747d7d;
  --pd-neutral-700: #575e5e;
  --pd-neutral-800: #3b4040;
  --pd-neutral-900: #1e2121;
  --pd-neutral-1000: #020202;
  --pd-neutral-black: #000000;
  --pd-neutral-base: #a6c0c0;

  /* Container */
  --pd-container-100: #f8f7f4;
  --pd-container-200: #f2eeea;
  --pd-container-300: #ebe6df;
  --pd-container-400: #e5ddd5;
  --pd-container-500: #ded5ca;
  --pd-container-600: #b4aca3;
  --pd-container-700: #89837c;
  --pd-container-800: #5f5a54;
  --pd-container-900: #34312d;

  /* Accent */
  --pd-accent-100: #e6d6d5;
  --pd-accent-200: #d0b3b1;
  --pd-accent-300: #b88f8c;
  --pd-accent-400: #a36c68;
  --pd-accent-500: #8c4942;
  --pd-accent-600: #703a36;
  --pd-accent-700: #552b28;
  --pd-accent-800: #381d1b;
  --pd-accent-900: #1c0e0c;

  /* Information */
  --pd-information-100: #d4ecfa;
  --pd-information-200: #a9d9f5;
  --pd-information-300: #7dc5f0;
  --pd-information-400: #52b2eb;
  --pd-information-500: #279fe6;
  --pd-information-600: #1f7fb8;
  --pd-information-700: #175f8a;
  --pd-information-800: #10405c;
  --pd-information-900: #08202e;

  /* Warning */
  --pd-warning-100: #faf2d4;
  --pd-warning-200: #f5e4a9;
  --pd-warning-300: #f0d77d;
  --pd-warning-400: #ebc952;
  --pd-warning-500: #e6bc27;
  --pd-warning-600: #b8961f;
  --pd-warning-700: #8a7117;
  --pd-warning-800: #5c4b10;
  --pd-warning-900: #2e2608;

  /* Success */
  --pd-success-100: #e5f6db;
  --pd-success-200: #cbecb7;
  --pd-success-300: #b0e394;
  --pd-success-400: #96d970;
  --pd-success-500: #7cd04c;
  --pd-success-600: #63a63d;
  --pd-success-700: #4a7d2e;
  --pd-success-800: #32531e;
  --pd-success-900: #192a0f;

  /* Error */
  --pd-error-100: #f6d8d8;
  --pd-error-200: #edb0b1;
  --pd-error-300: #e38989;
  --pd-error-400: #da6162;
  --pd-error-500: #d13a3b;
  --pd-error-600: #a72e2f;
  --pd-error-700: #7d2323;
  --pd-error-800: #541718;
  --pd-error-900: #2a0c0c;

  /* ---------- TYPOGRAPHY ---------- */
  --pd-font-primary: "Geometrica", sans-serif;
  --pd-font-secondary: "Montserrat", sans-serif;

  /* ---------- FONT SIZES ---------- */
  --pd-font-size-2xs: 0.625rem; /* 10px */
  --pd-font-size-xs: 0.75rem; /* 12px */
  --pd-font-size-sm: 0.875rem; /* 14px */
  --pd-font-size-base: 1rem; /* 16px */
  --pd-font-size-md: 1.125rem; /* 18px */
  --pd-font-size-lg: 1.25rem; /* 20px */
  --pd-font-size-xl: 1.375rem; /* 22px */
  --pd-font-size-2xl: 1.5rem; /* 24px */
  --pd-font-size-3xl: 1.625rem; /* 26px */
  --pd-font-size-4xl: 1.75rem; /* 28px */
  --pd-font-size-5xl: 2rem; /* 32px */
  --pd-font-size-6xl: 2.25rem; /* 36px */
  --pd-font-size-7xl: 2.5rem; /* 40px */
  --pd-font-size-8xl: 2.75rem; /* 44px */
  --pd-font-size-9xl: 3.5rem; /* 56px */

  /* ---------- FONT WEIGHTS ---------- */
  --pd-font-weight-light: 300;
  --pd-font-weight-regular: 350;
  --pd-font-weight-normal: 400;
  --pd-font-weight-medium: 500;
  --pd-font-weight-semi-bold: 600;
  --pd-font-weight-bold: 700;
  --pd-font-weight-extra-bold: 800;

  /* ---------- SPACING ---------- */
  --pd-spacing-1: 0.25rem; /* 4px */
  --pd-spacing-2: 0.5rem; /* 8px */
  --pd-spacing-3: 0.75rem; /* 12px */
  --pd-spacing-4: 1rem; /* 16px */
  --pd-spacing-5: 1.25rem; /* 20px */
  --pd-spacing-6: 1.5rem; /* 24px */
  --pd-spacing-8: 2rem; /* 32px */
  --pd-spacing-9: 2.25rem; /* 36px */
  --pd-spacing-10: 2.5rem; /* 40px */
  --pd-spacing-12: 3rem; /* 48px */
  --pd-spacing-16: 4rem; /* 64px */

  /* ---------- GLOBAL BREAKPOINTS ---------- */
  --pd-bp-mobile: 320px; /* desde 320px hasta 767px */
  --pd-bp-tablet: 768px; /* desde 768px hasta 1023px */
  --pd-bp-desktop: 1024px; /* desde 1024px en adelante */

  /* ---------- LAYOUT ---------- */
  --pd-container-max-width: 1024px;

  @media (min-width: 1280px) {
    --pd-container-max-width: 1280px;
  }
}

/*
 * Tipografía global: Montserrat vive en fonts-montserrat.css (dependencia del handle pandero-tokens).
 * Antes body solo se fijaba en components.css (carga condicional), así que fuera de esas vistas
 * el texto seguía la fuente del navegador aunque los .woff2 cargaran bien.
 */
body {
  font-family: var(--pd-font-secondary);
  font-weight: var(--pd-font-weight-normal);
}