/* =============================================================================
   tokens.css — Segurally Design System
   -----------------------------------------------------------------------------
   Único archivo fuente de verdad para colores, tipografías, espaciados, radios
   y sombras. Todas las pantallas DEBEN consumir estas variables (nunca hardcodear).
   Referencia: CLAUDE.md §5.
   ============================================================================= */

:root {
  /* ---------------------------------------------------------------------------
     COLORES — PRIMARIOS (Marca Segurally — Navy corporativo)
     --------------------------------------------------------------------------- */
  --primary-900: #0F1F4B;     /* Navy profundo — fondos headers admin, hero login */
  --primary-700: #1B2B5E;     /* Navy medio — variantes de header */
  --primary-500: #243872;     /* Navy claro */
  --primary-100: #E0E6F3;     /* Lavanda suave — fondos cards destacados */

  /* ---------------------------------------------------------------------------
     COLORES — ACENTO PRINCIPAL (Gamificación / CTA)
     --------------------------------------------------------------------------- */
  --accent-500: #6C5CE7;      /* Violeta vibrante — CTAs, niveles, XP bar */
  --accent-300: #A29BFE;      /* Violeta claro — hover, fondos suaves */

  /* ---------------------------------------------------------------------------
     COLORES — ACENTO DORADO (Monedas, premios, VIP)
     --------------------------------------------------------------------------- */
  --gold-500:   #C9A84C;      /* Dorado Bonafide — monedas, badges */
  --gold-300:   #E8D38A;      /* Dorado claro */

  /* ---------------------------------------------------------------------------
     COLORES — ESTADOS
     --------------------------------------------------------------------------- */
  --success-500: #00C896;     /* Verde menta — completado */
  --success-100: #D4F5E9;     /* Verde menta suave — fondo completado */
  --warning-500: #FFB547;     /* Naranja — en curso, atención */
  --danger-500:  #FF5C5C;     /* Rojo coral — vencido, alerta */
  --info-500:    #5EB3FF;     /* Celeste — informativo */

  /* ---------------------------------------------------------------------------
     COLORES — NEUTROS
     --------------------------------------------------------------------------- */
  --neutral-900: #0A0E1F;     /* Texto principal */
  --neutral-700: #3D4663;     /* Texto secundario */
  --neutral-500: #7A839E;     /* Texto terciario, placeholders */
  --neutral-300: #C5CBD9;     /* Bordes, dividers */
  --neutral-100: #F4F6FB;     /* Fondos suaves */
  --neutral-0:   #FFFFFF;     /* Blanco puro */

  /* ---------------------------------------------------------------------------
     COLORES — GAMIFICACIÓN ESPECÍFICA
     --------------------------------------------------------------------------- */
  --xp-bar:        #6C5CE7;   /* Barra de XP (alias de accent-500) */
  --streak-fire:   #FF6B35;   /* Color de racha (fuego) */
  --level-bronze:   #CD7F32;
  --level-silver:   #C0C0C0;
  --level-gold:     #FFD700;
  --level-platinum: #E5E4E2;
  --level-diamond:  #B9F2FF;
  --level-legend:   #9D4EDD;

  /* ---------------------------------------------------------------------------
     TIPOGRAFÍA
     --------------------------------------------------------------------------- */
  --font-display: 'Archivo Black', 'Inter', sans-serif;   /* Números grandes, niveles, headlines */
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;

  --text-xs:   0.75rem;   /* 12px — labels, captions */
  --text-sm:   0.875rem;  /* 14px — texto auxiliar */
  --text-base: 1rem;      /* 16px — cuerpo */
  --text-lg:   1.125rem;  /* 18px — subtítulos */
  --text-xl:   1.25rem;   /* 20px — títulos card */
  --text-2xl:  1.5rem;    /* 24px — títulos sección */
  --text-3xl:  2rem;      /* 32px — números destacados */
  --text-4xl:  2.5rem;    /* 40px — números hero */
  --text-5xl:  3.5rem;    /* 56px — "LEVEL 3" display */

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.5;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;

  /* ---------------------------------------------------------------------------
     ESPACIADO (escala 4)
     --------------------------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;

  /* ---------------------------------------------------------------------------
     RADIOS
     --------------------------------------------------------------------------- */
  --radius-sm:   8px;       /* Inputs, chips */
  --radius-md:   12px;      /* Botones */
  --radius-lg:   16px;      /* Cards */
  --radius-xl:   24px;      /* Modales, contenedores grandes */
  --radius-full: 9999px;    /* Pills, avatares */

  /* ---------------------------------------------------------------------------
     SOMBRAS
     --------------------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px  rgba(15, 31, 75, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 31, 75, 0.08);
  --shadow-lg: 0 8px 24px rgba(15, 31, 75, 0.12);
  --shadow-xl: 0 16px 40px rgba(15, 31, 75, 0.16);

  /* Sombras especiales para gamificación (con tinte de marca) */
  --shadow-accent: 0 8px 24px rgba(108, 92, 231, 0.28);
  --shadow-gold:   0 8px 24px rgba(201, 168, 76, 0.28);

  /* ---------------------------------------------------------------------------
     TAMAÑOS DE ICONOS (Lucide)
     --------------------------------------------------------------------------- */
  --icon-xs: 16px;
  --icon-sm: 20px;
  --icon-md: 24px;
  --icon-lg: 32px;
  --icon-xl: 48px;
  --icon-2xl: 64px;

  /* ---------------------------------------------------------------------------
     TRANSICIONES
     --------------------------------------------------------------------------- */
  --transition-fast:   120ms ease-out;
  --transition-base:   200ms ease-out;
  --transition-slow:   320ms ease-out;

  /* ---------------------------------------------------------------------------
     LAYOUT MOBILE FRAME (iPhone 14)
     --------------------------------------------------------------------------- */
  --frame-width:  390px;
  --frame-height: 844px;
  --safe-area-top:    44px;   /* Status bar */
  --safe-area-bottom: 34px;   /* Home indicator */

  /* ---------------------------------------------------------------------------
     Z-INDEX
     --------------------------------------------------------------------------- */
  --z-base:       1;
  --z-sticky:     10;
  --z-fixed:      20;
  --z-modal:      40;
  --z-toast:      60;
}