/* ============================================================================ * Centinela V2 — Design Tokens (capa canónica reutilizable) * * Extraído del :root de control-center.css (Palette B, 2026-05-26) para que * CUALQUIER página standalone (mis-datos, alerts, signup, login…) pueda adoptar * los componentes canónicos `c-*` de components.css, que dependen de estas * variables. * * Orden de carga obligatorio en el : * 1) /static/tokens.css (este archivo — define las variables) * 2) /static/components.css (los c-* que consumen las variables) * * NOTA: control-center.html y superadmin.html siguen usando el :root inline de * control-center.css (idéntico a este). Unificar ambos (que control-center.css * haga @import de tokens.css) es un refactor posterior; este archivo NO cambia * el comportamiento de esas dos páginas. * * Fuente de verdad de los valores: docs/design-system/01-tokens.md + * docs/design-system/tokens/figma-tokens.json. * ========================================================================== */ :root { /* === Brand (Palette B — +20% luminance) === */ --deep: #0A4259; --primary: #11577B; --secondary: #5C8A9E; --mid: #555555; --light: #C1C1C1; --white: #FFFFFF; --black: #000000; --border: rgba(92,138,158,0.35); /* secondary @ 35% */ --gradient: linear-gradient(135deg,var(--primary),var(--secondary)); /* === Grays === */ --gray-50: #F8FAFC; --gray-100: #F1F5F9; --gray-200: #E0E0E0; --gray-300: #CBD5E1; --gray-400: #94A3B8; --gray-500: #7A9BAA; /* gris-azulado canónico del proyecto */ --gray-600: #475569; --gray-700: #334155; --gray-800: #1E293B; --gray-900: #0F172A; /* === Status colors === */ --red: #DC2626; --red-light: #EF4444; --red-bright: #F87171; --green: #16A34A; --green-light: #22C55E; --green-bright: #4ADE80; --amber: #F59E0B; --amber-light: #EAB308; --blue: #3B82F6; --blue-light: #60A5FA; --emerald: #10B981; /* === Status semantic aliases === */ --status-ok: #16a34a; --status-warn: #eab308; --status-err: #dc2626; /* === Spacing (escala base 4px) === */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* === Typography === */ --text-xs: 11px; --text-sm: 12px; --text-base: 14px; --text-md: 15px; --text-lg: 16px; --text-xl: 18px; --text-2xl: 22px; --text-3xl: 28px; --text-4xl: 48px; /* === Border radius === */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 20px; --radius-pill: 999px; --radius-full: 50%; /* === Shadow === */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 4px 6px rgba(0,0,0,0.1); --shadow-lg: 0 10px 15px rgba(0,0,0,0.15); /* === Transitions === */ --duration-fast: 150ms; --duration-base: 250ms; --duration-slow: 400ms; --ease: cubic-bezier(0.4, 0, 0.2, 1); }