/*
  COPIA DERIVADA - NO EDITAR AQUI. Fuente de verdad unidireccional:
    .claude/skills/ui-ux/templates/tokens.css
    (repositorio Smart and Simple, GBM Corporation)

  Fecha de copia:   2026-08-12
  Commit del repo:  4285c4fc4
  Tamano original:  7147 bytes (CRLF) = 6937 bytes con saltos normalizados a LF
  Normalizacion:    CRLF -> LF. El contenido es identico byte a byte tras normalizar.

  Si la skill cambia, esta copia queda INVALIDA y hay que re-sincronizar.
  NUNCA editar esta copia y llevar el cambio a la skill: el flujo es de una
  sola direccion, skill -> este proyecto.

  Contexto completo y procedimiento de re-sync: README.md en la raiz de este proyecto.
*/

/* ============================================================
   GBM Design Tokens — Smart and Simple
   Valores autoritativos de la marca GBM (paleta, tipografia,
   spacing, radios, sombras, transiciones, z-index, breakpoints).

   Uso:
   - Copiar este archivo al modulo nuevo como base.
   - O referenciar los tokens --gbm-* directamente desde el CSS
     del modulo si ya estan cargados globalmente.
   - Para scope local, redeclarar con prefijo propio dentro de
     .{module}-root (ver ejemplo al final).

   Fuente de verdad:
   - "Guia de Estilo GBM" (PDF oficial)
   - .claude/skills/ui-ux/references/design-tokens.md
   ============================================================ */

:root {
  /* ── Color base (paleta oficial GBM) ── */
  --gbm-blue: #1964ff;
  --gbm-blue-mid: #0a5ced;
  --gbm-blue-dark: #0050dd;
  --gbm-dark-blue: #080d2b;
  --gbm-dark-blue-light: #141c3f;
  --gbm-dark-blue-mid: #1c2651;
  --gbm-mint: #98f4b6;
  --gbm-mint-mid: #83eaa1;
  --gbm-mint-dark: #85e09e;
  --gbm-pink: #ce5aca;
  --gbm-pink-mid: #c64ec6;
  --gbm-pink-dark: #bc46bc;
  --gbm-dark-gray: #333333;
  --gbm-light-gray: #efefef;
  --gbm-white: #ffffff;

  /* ── Color semantico (texto, superficies, bordes) ── */
  --gbm-text-heading: #080d2b;
  --gbm-text-body: #333333;
  --gbm-text-muted: #6b7280;
  --gbm-text-subtle: #6b7280;
  --gbm-surface: #ffffff;
  --gbm-surface-alt: #f8f9fa;
  --gbm-border: #e2e8f0;
  --gbm-border-light: #efefef;

  /* ── Color semantico (estados) ── */
  --gbm-success: #98f4b6;
  --gbm-success-bg: #d1fae5;
  --gbm-success-text: #065f46;
  --gbm-info: #0a5ced;
  --gbm-info-bg: #dbeafe;
  --gbm-info-text: #1e40af;
  --gbm-warning: #c64ec6;
  --gbm-warning-bg: #fef3c7;
  --gbm-warning-text: #92400e;
  /* 2026-08-11: era #bc46bc (pink-dark). Ese magenta se reporto como defecto visual
     de estado de error en los Sprints 2-5 de hiring-request y se corrigio a #d63649
     en el Sprint 6; el token quedaba contradiciendo al fix. Se fija aqui el rojo
     semantico oficial antes del Sprint 12 (rediseño visual). Cambia SOLO este token:
     --gbm-error-bg y --gbm-error-text ya eran familia roja.
     Pendiente de alineacion: references/design-tokens.md:58 aun lista #BC46BC
     (fuera del alcance de cambio aprobado el 2026-08-11). */
  --gbm-error: #d63649;
  --gbm-error-bg: #fee2e2;
  --gbm-error-text: #991b1b;

  /* ── Alfas sobre blue ── */
  --gbm-blue-10: rgba(25, 100, 255, 0.1);
  --gbm-blue-15: rgba(25, 100, 255, 0.15);
  --gbm-blue-20: rgba(25, 100, 255, 0.2);
  --gbm-blue-06: rgba(25, 100, 255, 0.06);
  --gbm-blue-03: rgba(25, 100, 255, 0.03);

  /* ── Gradientes firma ── */
  --gbm-blue-gradient: linear-gradient(135deg, #1964ff, #080d2b);
  --gbm-accent-gradient: linear-gradient(135deg, #1964ff, #ce5aca);
  --gbm-mint-gradient: linear-gradient(135deg, #98f4b6, #1964ff);

  /* ── Tipografia ── */
  --gbm-font-family: "Chivo", Verdana, Arial, Corbel, sans-serif;
  --gbm-font-family-mono: ui-monospace, SFMono-Regular, "Courier New", monospace;

  /* ── Type scale (base 16px) ── */
  --gbm-font-size-2xs: 0.65rem;   /* 10.4px */
  --gbm-font-size-xs: 0.75rem;    /* 12px */
  --gbm-font-size-sm: 0.8125rem;  /* 13px */
  --gbm-font-size-base: 0.875rem; /* 14px */
  --gbm-font-size-md: 1rem;       /* 16px */
  --gbm-font-size-lg: 1.125rem;   /* 18px */
  --gbm-font-size-xl: 1.25rem;    /* 20px */
  --gbm-font-size-2xl: 1.5rem;    /* 24px */
  --gbm-font-size-3xl: 2rem;      /* 32px */

  /* ── Font weights ── */
  --gbm-font-light: 300;
  --gbm-font-regular: 400;
  --gbm-font-medium: 500;
  --gbm-font-semibold: 600;
  --gbm-font-bold: 700;

  /* ── Line heights ── */
  --gbm-line-height-tight: 1.1;
  --gbm-line-height-snug: 1.25;
  --gbm-line-height-normal: 1.5;
  --gbm-line-height-relaxed: 1.6;

  /* ── Spacing (base 4px) ── */
  --gbm-spacing-1: 4px;
  --gbm-spacing-2: 8px;
  --gbm-spacing-3: 12px;
  --gbm-spacing-4: 16px;
  --gbm-spacing-5: 20px;
  --gbm-spacing-6: 24px;
  --gbm-spacing-7: 32px;
  --gbm-spacing-8: 48px;
  --gbm-spacing-9: 64px;

  /* ── Border radius ── */
  --gbm-radius-xs: 6px;
  --gbm-radius-sm: 8px;
  --gbm-radius-md: 12px;
  --gbm-radius-lg: 16px;
  --gbm-radius-xl: 24px;
  --gbm-radius-pill: 50px;
  --gbm-radius-circle: 50%;

  /* ── Shadows ── */
  --gbm-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --gbm-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --gbm-shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.1);
  --gbm-shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.15);
  --gbm-shadow-primary: 0 6px 20px rgba(25, 100, 255, 0.35);

  /* ── Transitions ── */
  --gbm-transition-fast: 0.15s ease;
  --gbm-transition-base: 0.2s ease;
  --gbm-transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Z-index ── */
  --gbm-z-dropdown: 1000;
  --gbm-z-sticky: 1020;
  --gbm-z-fixed: 1030;
  --gbm-z-modal-backdrop: 1040;
  --gbm-z-modal: 1050;
  --gbm-z-popover: 1060;
  --gbm-z-toast: 1070;
}

/* ============================================================
   Scope tipografico — aplicar a la raiz del modulo
   (usar en App.jsx o en el contenedor principal del modulo)
   ============================================================ */
.gbm-root {
  font-family: var(--gbm-font-family);
  color: var(--gbm-text-body);
}

/* ============================================================
   Focus visible global (accesibilidad WCAG AA)
   ============================================================ */
.gbm-root *:focus-visible {
  outline: 2px solid var(--gbm-blue);
  outline-offset: 2px;
}

.gbm-root button:focus-visible,
.gbm-root a:focus-visible {
  outline: 2px solid var(--gbm-blue);
  outline-offset: 2px;
}

/* Los inputs usan border + box-shadow en lugar de outline */
.gbm-root input:focus-visible,
.gbm-root select:focus-visible,
.gbm-root textarea:focus-visible {
  outline: none;
  border-color: var(--gbm-blue);
  box-shadow: 0 0 0 2px var(--gbm-blue-10);
}

/* ============================================================
   Reduced motion (obligatorio)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .gbm-root *,
  .gbm-root *::before,
  .gbm-root *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   Scope local con prefijo de modulo — EJEMPLO
   Si el modulo necesita aislar sus tokens (ej. para variaciones
   puntuales), redeclarar con prefijo propio dentro del root
   scoped:
   ============================================================ */

/*
.my-module-root {
  --my-module-primary: var(--gbm-blue);
  --my-module-spacing: var(--gbm-spacing-4);
  --my-module-radius: var(--gbm-radius-lg);

  font-family: var(--gbm-font-family);
  color: var(--gbm-text-body);
}
*/