/* =============================================================================
   SABORA · TOKENS DE DISEÑO
   -----------------------------------------------------------------------------
   Única fuente de verdad del lenguaje visual. Ningún otro fichero debería
   declarar un color, un radio, una sombra ni un z-index en crudo: todos salen
   de aquí. Si un valor no está en esta lista, es que no forma parte del sistema.

   Se carga la primera, antes que cualquier otra hoja.
   ========================================================================== */

:root {
    /* ---------------------------------------------------------- Paleta cruda
       Escalas base. No usar directamente en componentes: usar los alias
       semánticos de más abajo, que son los que dan significado. */

    /* Marca (rojo Sabora) */
    --sb-brand-50:  #fff5f2;
    --sb-brand-100: #ffe4dc;
    --sb-brand-200: #fecaca;
    --sb-brand-400: #ff6b45;
    --sb-brand-500: #e0300a;
    --sb-brand-600: #c82800;   /* color principal de la marca */
    --sb-brand-700: #ab2200;
    --sb-brand-800: #8f1c00;

    /* Neutros (slate) */
    --sb-neutral-0:   #ffffff;
    --sb-neutral-25:  #fafbfc;
    --sb-neutral-50:  #f8fafc;
    --sb-neutral-100: #f1f5f9;
    --sb-neutral-120: #edf2f7;   /* base del esqueleto de carga */
    --sb-neutral-150: #eef1f6;
    --sb-neutral-200: #e2e8f0;
    --sb-neutral-250: #e7ebf1;
    --sb-neutral-300: #cbd5e1;
    --sb-neutral-400: #94a3b8;
    --sb-neutral-500: #64748b;
    --sb-neutral-600: #475569;
    --sb-neutral-700: #334155;
    --sb-neutral-800: #1e293b;
    --sb-neutral-850: #172632;
    --sb-neutral-900: #0f172a;

    /* Verde / éxito */
    --sb-green-50:  #ecfdf5;
    --sb-green-100: #dcfce7;
    --sb-green-200: #a7f3d0;
    --sb-green-500: #10b981;
    --sb-green-600: #16a34a;
    --sb-green-700: #047857;
    --sb-green-800: #166534;

    /* Rojo / error */
    --sb-red-50:  #fef2f2;
    --sb-red-100: #fee2e2;
    --sb-red-200: #fecaca;
    --sb-red-500: #ef4444;
    --sb-red-600: #dc2626;
    --sb-red-700: #b91c1c;
    --sb-red-800: #991b1b;

    /* Ámbar / aviso */
    --sb-amber-50:  #fffbeb;
    --sb-amber-100: #fef3c7;
    --sb-amber-200: #fde68a;
    --sb-amber-500: #f59e0b;
    --sb-amber-600: #d97706;
    --sb-amber-700: #b45309;

    /* Azul / información */
    --sb-blue-50:  #eff6ff;
    --sb-blue-100: #dbeafe;
    --sb-blue-200: #bfdbfe;
    --sb-blue-500: #3b82f6;
    --sb-blue-600: #2563eb;
    --sb-blue-700: #1d4ed8;


    /* ------------------------------------------------ Colores de dominio
       Fuera de la escala neutra/semántica porque significan algo concreto del
       negocio, no un estado. Tenerlos nombrados evita que se vuelvan a colar
       como literales sueltos por las pantallas. */
    --sb-role-leader:   #2563eb;   /* lídereres en clases de baile */
    --sb-role-follower: #db2777;   /* followers */
    --sb-gold:          #e8a41c;   /* valoraciones, distintivos premium */
    --sb-gold-strong:   #cf9013;
    --sb-whatsapp:        #075e54; /* identidad de WhatsApp: no es nuestra, no se toca */
    --sb-whatsapp-bubble: #d9fdd3;
    --sb-whatsapp-canvas: #efeae2;

    /* Degradado de marca y borde de las superficies tintadas. */
    --sb-brand-gradient-end:      #ff5722;
    --sb-brand-gradient-end-dark: #e64a19;
    --sb-brand-border:            #f3c9bd;

    /* Componentes de vitrina (insignias de gamificación, tarjeta 3D). No son
       colores de marca: son decoración de esos dos componentes concretos. */
    --sb-accent-violet: #8b5cf6;
    --sb-accent-sky:    #38bdf8;
    --sb-accent-night:  #1e1b4b;
    --sb-accent-plum:   #31101e;
    --sb-accent-ember:  #ff4500;
    --sb-accent-flame:  #ff8c00;

    /* ---------------------------------------------------- Alias semánticos */

    /* Superficies */
    --sb-canvas:            var(--sb-neutral-150);  /* fondo de la aplicación */
    --sb-surface:           var(--sb-neutral-0);    /* tarjetas, paneles, modales */
    --sb-surface-subtle:    var(--sb-neutral-50);   /* filas alternas, cabeceras */
    --sb-surface-muted:     var(--sb-neutral-100);  /* chips, campos deshabilitados */
    --sb-surface-inverse:   var(--sb-neutral-850);  /* barras oscuras, tooltips */

    /* Texto */
    --sb-text:              var(--sb-neutral-900);  /* texto principal */
    --sb-text-strong:       var(--sb-neutral-800);
    --sb-text-muted:        var(--sb-neutral-500);  /* secundario */
    --sb-text-subtle:       var(--sb-neutral-400);  /* placeholders, metadatos */
    --sb-text-on-brand:     var(--sb-neutral-0);
    --sb-text-on-inverse:   var(--sb-neutral-0);

    /* Bordes */
    --sb-border:            var(--sb-neutral-200);
    --sb-border-subtle:     var(--sb-neutral-100);
    --sb-border-strong:     var(--sb-neutral-300);
    --sb-border-brand:      var(--sb-brand-600);

    /* Marca */
    --sb-brand:             var(--sb-brand-600);
    --sb-brand-hover:       var(--sb-brand-700);
    --sb-brand-active:      var(--sb-brand-800);
    --sb-brand-surface:     var(--sb-brand-50);
    --sb-brand-accent:      var(--sb-brand-400);

    /* Estados: cada uno con su terna superficie / borde / texto */
    --sb-success:           var(--sb-green-600);
    --sb-success-surface:   var(--sb-green-50);
    --sb-success-border:    var(--sb-green-200);
    --sb-success-text:      var(--sb-green-700);

    --sb-danger:            var(--sb-red-600);
    --sb-danger-surface:    var(--sb-red-50);
    --sb-danger-border:     var(--sb-red-200);
    --sb-danger-text:       var(--sb-red-700);

    --sb-warning:           var(--sb-amber-600);
    --sb-warning-surface:   var(--sb-amber-50);
    --sb-warning-border:    var(--sb-amber-200);
    --sb-warning-text:      var(--sb-amber-700);

    --sb-info:              var(--sb-blue-600);
    --sb-info-surface:      var(--sb-blue-50);
    --sb-info-border:       var(--sb-blue-200);
    --sb-info-text:         var(--sb-blue-700);

    /* --------------------------------------------------------- Tipografía */
    --sb-font: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --sb-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

    --sb-text-2xs: 0.6875rem;  /* 11px · etiquetas en mayúsculas */
    --sb-text-xs:  0.75rem;    /* 12px · metadatos */
    --sb-text-sm:  0.8125rem;  /* 13px · texto secundario */
    --sb-text-md:  0.875rem;   /* 14px · cuerpo */
    --sb-text-base:0.9375rem;  /* 15px · campos */
    --sb-text-lg:  1.0625rem;  /* 17px · títulos de tarjeta */
    --sb-text-xl:  1.25rem;    /* 20px · títulos de sección */
    --sb-text-2xl: 1.5rem;     /* 24px · título de página */
    --sb-text-3xl: 1.875rem;   /* 30px · cifras destacadas */

    --sb-weight-normal: 400;
    --sb-weight-medium: 500;
    --sb-weight-semibold: 600;
    --sb-weight-bold: 700;
    --sb-weight-black: 800;

    --sb-leading-tight: 1.2;
    --sb-leading-normal: 1.5;
    --sb-leading-relaxed: 1.65;

    /* -------------------------------------------------------- Espaciado
       Escala de 4 px. Usar siempre múltiplos de la escala. */
    --sb-space-0: 0;
    --sb-space-1: 4px;
    --sb-space-2: 8px;
    --sb-space-3: 12px;
    --sb-space-4: 16px;
    --sb-space-5: 20px;
    --sb-space-6: 24px;
    --sb-space-8: 32px;
    --sb-space-10: 40px;
    --sb-space-12: 48px;
    --sb-space-16: 64px;

    /* ----------------------------------------------------------- Radios */
    --sb-radius-xs: 6px;
    --sb-radius-sm: 8px;
    --sb-radius-md: 10px;   /* botones y campos */
    --sb-radius-lg: 12px;   /* paneles pequeños, menús */
    --sb-radius-xl: 16px;   /* tarjetas */
    --sb-radius-2xl: 20px;  /* modales */
    --sb-radius-full: 999px;

    /* ---------------------------------------------------------- Sombras */
    --sb-shadow-xs: 0 1px 2px rgb(15 23 42 / 0.04);
    --sb-shadow-sm: 0 1px 4px rgb(15 23 42 / 0.06);
    --sb-shadow-md: 0 4px 12px rgb(15 23 42 / 0.08);
    --sb-shadow-lg: 0 14px 30px rgb(15 23 42 / 0.16);
    --sb-shadow-xl: 0 24px 60px rgb(15 23 42 / 0.22);
    --sb-shadow-brand: 0 8px 20px rgb(200 40 0 / 0.28);

    /* ------------------------------------------------------------- Foco
       Un único anillo de foco para toda la aplicación. */
    --sb-focus-ring-color: var(--sb-blue-700);
    --sb-focus-ring-width: 3px;
    --sb-focus-ring-offset: 2px;

    /* --------------------------------------------------------- Movimiento */
    --sb-duration-fast: 120ms;
    --sb-duration-normal: 180ms;
    --sb-duration-slow: 280ms;
    --sb-ease: cubic-bezier(0.2, 0, 0.2, 1);

    /* ------------------------------------------------------------ Capas
       Escala única de apilamiento. Antes convivían 36 valores distintos
       (de 1 a 999999) peleándose a base de !important; cualquier elemento
       nuevo que necesite apilarse debe elegir uno de estos, no inventar. */
    --sb-z-below: -1;        /* decoración detrás del contenido */
    --sb-z-base: 0;
    --sb-z-raised: 10;        /* celdas fijas, elementos elevados dentro del flujo */
    --sb-z-sticky: 100;       /* cabeceras de tabla y barras pegajosas */
    --sb-z-header: 500;       /* cabecera de la aplicación */
    --sb-z-nav: 900;          /* menú lateral rail */
    --sb-z-backdrop: 1100;    /* velo de cierre y oscurecimiento */
    --sb-z-drawer: 1200;      /* paneles laterales, menú expandido y FAB */
    --sb-z-dropdown: 1300;    /* desplegables, popovers, menús contextuales */
    --sb-z-modal: 1400;       /* diálogos */
    --sb-z-spotlight: 1500;   /* buscador global */
    --sb-z-toast: 1600;       /* avisos */
    --sb-z-tooltip: 1700;     /* siempre por encima de todo */

    /* ----------------------------------------------------------- Medidas */
    --sb-container-max: 1380px;
    --sb-header-height: 64px;
    --sb-sidebar-width: 260px;
    --sb-sidebar-width-collapsed: 72px;
    --sb-control-height: 40px;      /* alto mínimo táctil de botones y campos */
    --sb-tap-target: 44px;          /* área táctil mínima recomendada */

    /* Separación lateral que declara un envoltorio de contenido dentro de una
       tarjeta. La publica el envoltorio y la cancelan los elementos que deben
       ir a sangre (la tabla). Por defecto, ninguna. */
    --sb-card-inline-padding: 0px;
}