/* tokens.css — design tokens del sistema rediseñado (Asistencias Cosmopolis)
   Variables CSS reusables: paleta, espaciados, radios, sombras, breakpoints.
   No define selectores; solo :root variables. */

:root {
    /* === Paleta primaria === */
    --primary:        #1E40AF;
    --primary-700:    #1E3A8A;
    --primary-600:    #1E40AF;
    --primary-500:    #3B5BDB;
    --primary-100:    #DBE4FF;
    --primary-50:     #EFF4FF;

    /* === Neutrales (Slate) === */
    --slate-900: #0F172A;
    --slate-800: #1E293B;
    --slate-700: #334155;
    --slate-600: #475569;
    --slate-500: #64748B;
    --slate-400: #94A3B8;
    --slate-300: #CBD5E1;
    --slate-200: #E2E8F0;
    --slate-100: #F1F5F9;
    --slate-50:  #F8FAFC;
    --white:     #FFFFFF;

    /* === Semánticos === */
    --ok:        #10B981;
    --ok-50:     #ECFDF5;
    --warn:      #F59E0B;
    --warn-50:   #FFFBEB;
    --err:       #EF4444;
    --err-50:    #FEF2F2;
    --info:      #3B82F6;
    --info-50:   #EFF6FF;
    --muted:     #94A3B8;

    /* === Alias semánticos (uso preferido por componentes) === */
    --bg:           var(--slate-50);
    --surface:      var(--white);
    --surface-alt:  var(--slate-100);
    --text:         var(--slate-800);
    --text-muted:   var(--slate-500);
    --text-soft:    var(--slate-400);
    --border:       var(--slate-200);
    --border-soft:  var(--slate-100);

    /* === Espaciado (escala 4) === */
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  20px;
    --sp-6:  24px;
    --sp-8:  32px;
    --sp-10: 40px;
    --sp-12: 48px;

    /* === Radios === */
    --radius-sm: 4px;
    --radius:    6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 9999px;

    /* === Sombras === */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow:    0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -1px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.10), 0 4px 6px -2px rgba(15, 23, 42, 0.05);

    /* === Tipografía === */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

    --fs-xs:   12px;
    --fs-sm:   13px;
    --fs-base: 14px;
    --fs-md:   15px;
    --fs-lg:   17px;
    --fs-xl:   20px;
    --fs-2xl:  24px;
    --fs-3xl:  30px;

    --lh-tight:  1.2;
    --lh-snug:   1.4;
    --lh-normal: 1.55;

    /* === Transiciones === */
    --transition-fast:  120ms ease-out;
    --transition:       180ms ease-out;
    --transition-slow:  260ms ease-out;

    /* === Z-index === */
    --z-base:    1;
    --z-sticky:  100;
    --z-overlay: 900;
    --z-modal:   1000;
    --z-toast:   1100;
}