/**
 * ═══════════════════════════════════════════════════════════
 * BLACK BIRD AGENCIA DIGITAL — Design Tokens
 * Methodology: CSS Custom Properties (layer 0)
 * ═══════════════════════════════════════════════════════════
 *
 * Nomenclatura:
 *   --bb-[categoría]-[propiedad]-[variante]
 *
 * Categorías:
 *   color, space, type, radius, shadow, transition, z
 * ═══════════════════════════════════════════════════════════
 */

:root {

  /* ─── PALETA CROMÁTICA ────────────────────────────────────
   * Escala de grises: 30% → 80% sobre base blanca
   * Azul corporativo: BlackBird One #1A237E
   * ──────────────────────────────────────────────────────── */

  /* Blancos y casi-blancos (base de página unificada a Gray-10) */
  --bb-color-surface:          #E6E6E6;      /* unificado 10% grey */
  --bb-color-surface-low:      #E6E6E6;      /* unificado 10% grey */
  --bb-color-surface-mid:      #E6E6E6;      /* unificado 10% grey */
  --bb-color-surface-high:     #D9D9D9;      /* unificado — ligero contraste para bordes */

  /* Escala de grises (10% → 100%) */
  --bb-color-gray-10:          #E6E6E6;      /* Gris muy claro */
  --bb-color-gray-20:          #CCCCCC;      /* Gris claro */
  --bb-color-gray-30:          #B3B3B3;      /* placeholder, decorativos */
  --bb-color-gray-40:          #999999;      /* bordes suaves */
  --bb-color-gray-50:          #808080;      /* texto secundario medio */
  --bb-color-gray-60:          #666666;      /* texto secundario principal */
  --bb-color-gray-70:          #4D4D4D;      /* texto de apoyo */
  --bb-color-gray-80:          #333333;      /* texto cuerpo */
  --bb-color-gray-90:          #1A1A1A;      /* texto principal */
  --bb-color-gray-100:         #0A0A0A;      /* negro casi-puro */

  /* Aliases semánticos de texto */
  --bb-text-primary:           #212121;      /* Gris 80%+ — titulares, cuerpo */
  --bb-text-secondary:         #616161;      /* Gris 50% — subtítulos, meta */
  --bb-text-tertiary:          #9E9E9E;      /* Gris 30% — placeholders */
  --bb-text-inverse:           #FFFFFF;      /* sobre fondos oscuros */
  --bb-text-accent:            var(--bb-color-blue-primary);

  /* Azul Corporativo BlackBird One */
  --bb-color-blue-deepest:     #0D1257;      /* sombras, hover */
  --bb-color-blue-primary:     #1A237E;      /* BlackBird One — CTA, acentos */
  --bb-color-blue-mid:         #283593;      /* variante media */
  --bb-color-blue-light:       #3949AB;      /* variante clara */
  --bb-color-blue-tint:        #E8EAF6;      /* fondos tintados */
  --bb-color-blue-tint-light:  #F3F4FC;      /* hover tintado */

  /* Estado / Feedback */
  --bb-color-success:          #2E7D32;
  --bb-color-error:            #C62828;
  --bb-color-warning:          #E65100;

  /* ─── ESPACIADO — Escala 4px × rem ───────────────────────
   * Múltiplos de 4 para ritmo visual consistente
   * ──────────────────────────────────────────────────────── */
  --bb-space-1:    0.25rem;   /*  4px */
  --bb-space-2:    0.5rem;    /*  8px */
  --bb-space-3:    0.75rem;   /* 12px */
  --bb-space-4:    1rem;      /* 16px */
  --bb-space-5:    1.25rem;   /* 20px */
  --bb-space-6:    1.5rem;    /* 24px */
  --bb-space-8:    2rem;      /* 32px */
  --bb-space-10:   2.5rem;    /* 40px */
  --bb-space-12:   3rem;      /* 48px */
  --bb-space-16:   4rem;      /* 64px */
  --bb-space-20:   5rem;      /* 80px */
  --bb-space-24:   6rem;      /* 96px */
  --bb-space-32:   8rem;      /* 128px */
  --bb-space-40:   10rem;     /* 160px */

  /* Alias de espacio para secciones */
  --bb-section-gap:    var(--bb-space-12); /* Reducido de 24 a 12 para evitar exceso de espacio negativo */
  --bb-section-gap-sm: var(--bb-space-8);
  --bb-container-pad:  var(--bb-space-6);

  /* ─── TIPOGRAFÍA ──────────────────────────────────────────
   * Familia: IBM Plex Sans + IBM Plex Serif
   * Escala modular con ratio ~1.25 (Major Third)
   * ──────────────────────────────────────────────────────── */
  --bb-font-sans:   'Outfit', 'Helvetica Neue', Arial, sans-serif;
  --bb-font-serif:  'IBM Plex Serif', Georgia, serif;
  --bb-font-mono:   'IBM Plex Mono', 'Courier New', monospace;

  /* Tamaños */
  --bb-text-xs:    0.6875rem;  /* 11px — legal, footnotes */
  --bb-text-sm:    0.75rem;    /* 12px — labels, meta */
  --bb-text-base:  0.875rem;   /* 14px — body default */
  --bb-text-md:    1rem;       /* 16px — body prominente */
  --bb-text-lg:    1.125rem;   /* 18px — lead */
  --bb-text-xl:    1.25rem;    /* 20px — subheading */
  --bb-text-2xl:   1.5rem;     /* 24px — heading sm */
  --bb-text-3xl:   2rem;       /* 32px — heading md */
  --bb-text-4xl:   2.5rem;     /* 40px — heading lg */
  --bb-text-5xl:   3.5rem;     /* 56px — display */
  --bb-text-6xl:   4.5rem;     /* 72px — hero */
  --bb-text-7xl:   6rem;       /* 96px — jumbo */

  /* Pesos */
  --bb-weight-light:    300;
  --bb-weight-regular:  400;
  --bb-weight-medium:   500;
  --bb-weight-semibold: 600;
  --bb-weight-bold:     700;

  /* Interlineado */
  --bb-leading-tight:    1.2;
  --bb-leading-snug:     1.35;
  --bb-leading-normal:   1.5;
  --bb-leading-relaxed:  1.65;
  --bb-leading-loose:    1.8;

  /* Tracking */
  --bb-tracking-tight:   -0.04em;
  --bb-tracking-normal:  0;
  --bb-tracking-wide:    0.025em;
  --bb-tracking-wider:   0.05em;
  --bb-tracking-widest:  0.12em;

  /* ─── RADIOS DE BORDE ─────────────────────────────────────
   * Sistema Carbon-inspired: mínimos, funcionales
   * ──────────────────────────────────────────────────────── */
  --bb-radius-none:  0;
  --bb-radius-sm:    0.125rem;  /* 2px */
  --bb-radius-md:    0.25rem;   /* 4px — Carbon default */
  --bb-radius-lg:    0.5rem;    /* 8px */
  --bb-radius-xl:    0.75rem;   /* 12px */
  --bb-radius-full:  9999px;    /* pastillas */

  /* ─── SOMBRAS ─────────────────────────────────────────────
   * Ambient only — sin drop shadows decorativos
   * ──────────────────────────────────────────────────────── */
  --bb-shadow-1:  0 1px 3px rgba(26, 35, 126, 0.06);
  --bb-shadow-2:  0 4px 12px rgba(26, 35, 126, 0.08);
  --bb-shadow-3:  0 8px 24px rgba(26, 35, 126, 0.10);
  --bb-shadow-4:  0 16px 40px rgba(26, 35, 126, 0.12);
  --bb-shadow-blue: 0 4px 20px rgba(26, 35, 126, 0.25);

  /* ─── TRANSICIONES ────────────────────────────────────────
   * Curva Antigravity: cubic-bezier(0.4, 0, 0.2, 1)
   * ──────────────────────────────────────────────────────── */
  --bb-ease-out:     cubic-bezier(0.4, 0, 0.2, 1);
  --bb-ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --bb-ease-in-out:  cubic-bezier(0.4, 0, 0.6, 1);

  --bb-duration-fast:   150ms;
  --bb-duration-base:   250ms;
  --bb-duration-slow:   400ms;
  --bb-duration-reveal: 700ms;

  /* ─── Z-INDEX SCALE ───────────────────────────────────────
   * Capas explícitas — no magic numbers
   * ──────────────────────────────────────────────────────── */
  --bb-z-base:     0;
  --bb-z-raised:   10;
  --bb-z-dropdown: 100;
  --bb-z-sticky:   200;
  --bb-z-modal:    300;
  --bb-z-toast:    400;

  /* ─── LAYOUT ──────────────────────────────────────────────
   * Grid de 12 columnas, max-width consistente
   * ──────────────────────────────────────────────────────── */
  --bb-container-max:       1280px;
  --bb-container-narrow:    880px;
  --bb-container-wide:      1440px;
  --bb-grid-columns:        12;
  --bb-grid-gap:            var(--bb-space-8);

  /* ─── BREAKPOINTS (referencia para JS) ───────────────────
   * Usado en antigravity.js y media queries
   * ──────────────────────────────────────────────────────── */
  --bb-bp-sm:  480px;
  --bb-bp-md:  768px;
  --bb-bp-lg:  1024px;
  --bb-bp-xl:  1280px;
  --bb-bp-2xl: 1536px;

}

/* ─── Modo oscuro (preparado para futuro) ────────────────── */
/* @media (prefers-color-scheme: dark) { ... } */

/* ─── Reduced motion — respeto a preferencias ───────────────
   Antigravity detecta esto y desactiva animaciones
   ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --bb-duration-fast:   0ms;
    --bb-duration-base:   0ms;
    --bb-duration-slow:   0ms;
    --bb-duration-reveal: 0ms;
  }
}