/* ============================================================================ FANPASS — Design Tokens (archivo de identidad) FUENTE ÚNICA de color, tipografía, espaciado y elevación. Cargar SIEMPRE antes de main.css. Doc legible: FANPASS_DESIGN_SYSTEM.md Modelo de 2 capas: 1) tokens CRUDOS → la paleta real (no usar directo en componentes). 2) tokens SEMÁNTICOS → lo que la UI consume (var(--bg), var(--text)…), reasignados por TEMA mediante [data-theme] en . El tema oscuro es el default (:root) y conserva EXACTAMENTE los valores que la app ya tenía → la migración a tokens no cambia nada visualmente en oscuro. ============================================================================ */ /* ───────────────── 1) TOKENS CRUDOS (paleta base, no-temáticos) ───────────── */ :root { /* Marca FANPASS */ --brand-500: #E8462A; /* naranja de marca */ --brand-600: #C0341C; /* naranja oscuro (degradados / hover / pressed) */ --brand-300: #F2A28F; /* coral suave (texto/acento sobre oscuro) */ /* Tipografía (Inter) — escala fluida */ --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --fs-xs: clamp(0.62rem, 2.4vw, 0.69rem); /* ~10-11px */ --fs-sm: clamp(0.72rem, 3.0vw, 0.81rem); /* ~11.5-13px */ --fs-base: clamp(0.81rem, 3.5vw, 0.94rem); /* ~13-15px */ --fs-md: clamp(0.88rem, 3.8vw, 1.00rem); /* ~14-16px */ --fs-lg: clamp(1.00rem, 4.4vw, 1.20rem); /* Espaciado fluido / radios / layout */ --sp-1: clamp(4px, 1.2vw, 6px); --sp-2: clamp(6px, 2vw, 10px); --sp-3: clamp(10px, 3vw, 14px); --sp-4: clamp(14px, 4vw, 20px); --radius: clamp(14px, 4.5vw, 18px); --page-px: clamp(12px, 4vw, 16px); --gap: clamp(8px, 2.6vw, 10px); --card-w: min(92vw, 420px); } /* ───────────── 2) TOKENS SEMÁNTICOS — TEMA OSCURO (default) ───────────────── */ :root, [data-theme="dark"] { color-scheme: dark; /* Superficies (de la más baja a la más elevada) */ --bg: #0B0B0C; /* fondo de página */ --surface: #121214; /* superficie base (panel del concierge) */ --surface-raised: #1A1B1E; /* elevado (Medical ID; era el viejo --primary gris) */ --card: #16161A; /* tarjetas de catálogo */ --well: #1C1C20; /* contenedor de imagen / input well */ --border: #232328; --border-strong: #2A2A30; --frame: #131313; /* letterbox del marco tipo teléfono en escritorio */ /* Texto */ --text: #F5F5F7; --muted: #8A8F98; --text-subtle: #6B7280; /* Marca / acción */ --primary: #E8462A; /* naranja de marca (antes --primary era GRIS, ya corregido) */ --primary-strong: #C0341C; --on-primary: #FFFFFF; /* Estados */ --danger: #EF4444; --danger-soft: #F2A28F; --success: #34D399; --warning: #F59E0B; --info: #3B82F6; /* Efectos */ --overlay: rgba(0,0,0,.6); --shadow: 0 6px 24px rgba(0,0,0,.35); --shadow-sm: 0 2px 10px rgba(0,0,0,.25); } /* ───────────────── 2) TOKENS SEMÁNTICOS — TEMA CLARO ─────────────────────── */ [data-theme="light"] { color-scheme: light; --bg: #F4F5F7; --surface: #FFFFFF; --surface-raised: #FFFFFF; --card: #FFFFFF; --well: #EEF1F5; --border: #E5E7EB; --border-strong: #CBD5E1; --frame: #E8EAEE; --text: #1A1A2E; --muted: #6B7280; --text-subtle: #94A3B8; --primary: #E8462A; --primary-strong: #C0341C; --on-primary: #FFFFFF; --danger: #DC2626; --danger-soft: #B91C1C; --success: #059669; --warning: #D97706; --info: #2563EB; --overlay: rgba(15,23,42,.45); --shadow: 0 6px 24px rgba(16,24,40,.10); --shadow-sm: 0 2px 10px rgba(16,24,40,.08); }