/* ============================================================ VALIDA · DESIGN TOKENS — espejo del index.css de producción (Valida Legal). Base gris Tailwind + marca Valida. Light y dark. Importar antes de valida-componentes.css. El modo oscuro se activa con la clase .dark en (igual que producción). ============================================================ */ @font-face{ font-family:"Geist Sans"; src:url("assets/fonts/Geist[wght].woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; } @font-face{ font-family:"Geist Mono"; src:url("assets/fonts/GeistMono[wght].woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; } :root{ --font-sans:'Geist Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; --font-mono:'Geist Mono',ui-monospace,SFMono-Regular,'Roboto Mono',Menlo,Monaco,Consolas,monospace; /* Superficies (light) */ --color-surface:#FAFAFA; --color-surface-secondary:#F3F4F6; --color-surface-elevated:#FFFFFF; --color-surface-card:#FFFFFF; --color-input-bg:#F9FAFB; --color-hover-bg:#F3F4F6; /* Bordes (light) */ --color-border-subtle:#E5E7EB; /* gray-200 */ --color-border-default:#D1D5DB; /* gray-300 */ --color-border-hover:#9CA3AF; /* gray-400 */ /* Texto (light) */ --color-text-primary:#111827; /* gray-900 */ --color-text-secondary:#6B7280; /* gray-500 */ --color-text-muted:#9CA3AF; /* gray-400 */ --color-text-hint:#D1D5DB; /* gray-300 */ --color-lockup-rail:#AEB6C1; /* Marca */ --color-brand-navy:#0E3D66; --color-brand-green:#2A8F64; --color-brand-green-light:#4FB185; --color-brand-accent:#2A8F64; --color-brand-accent-hover:#247856; --color-accent-soft:rgba(42,143,100,.08); --color-wordmark:#263247; --color-focus-ring:0 0 0 2px #2A8F64; /* Semántica · badges tipo pill con borde (ver sección 5 de la guía) */ --tone-success-bg:#E6F4EE; --tone-success-tx:#247856; --tone-success-bd:#A9D9BF; --tone-warning-bg:#FFF8E6; --tone-warning-tx:#70521A; --tone-warning-bd:#E9D7A8; --tone-danger-bg:#FFF1F1; --tone-danger-tx:#9A2F2F; --tone-danger-bd:#F0B8B8; --tone-info-bg:#EEF7FB; --tone-info-tx:#0C4A5A; --tone-info-bd:#B8D8E8; --tone-neutral-bg:#F1F5F9; --tone-neutral-tx:#334155; --tone-neutral-bd:#E2E8F0; --tone-purple-bg:#F4F3FF; --tone-purple-tx:#5925DC; --tone-purple-bd:#D9D6FE; /* Radios (producción) */ --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:14px; --r-full:9999px; } .dark{ --color-surface:#0C0E14; --color-surface-secondary:#111318; --color-surface-elevated:#1A1F28; --color-surface-card:#141720; --color-input-bg:#1C2029; --color-hover-bg:#1E2330; --color-border-subtle:rgba(255,255,255,.06); --color-border-default:rgba(255,255,255,.08); --color-border-hover:rgba(255,255,255,.12); --color-text-primary:#F0F0F2; --color-text-secondary:rgba(255,255,255,.55); --color-text-muted:rgba(255,255,255,.35); --color-text-hint:rgba(255,255,255,.20); --color-lockup-rail:#9CA3AF; --color-brand-navy:#F8FAFC; /* wordmark en dark */ --color-brand-green:#3FB07E; --color-brand-green-light:#6FD3A0; --color-brand-accent:#6FD3A0; --color-brand-accent-hover:#7EE0AB; --color-accent-soft:rgba(111,211,160,.12); --color-wordmark:#F3F5F8; --color-focus-ring:0 0 0 2px #6FD3A0; --tone-success-bg:rgba(63,176,126,.15); --tone-success-tx:#6FD3A0; --tone-success-bd:rgba(63,176,126,.34); --tone-warning-bg:rgba(245,158,11,.15); --tone-warning-tx:#FBBF6B; --tone-warning-bd:rgba(245,158,11,.30); --tone-danger-bg:rgba(239,68,68,.15); --tone-danger-tx:#F98F8F; --tone-danger-bd:rgba(239,68,68,.30); --tone-info-bg:rgba(107,166,217,.15); --tone-info-tx:#8FC0E6; --tone-info-bd:rgba(107,166,217,.32); --tone-neutral-bg:rgba(148,163,184,.14);--tone-neutral-tx:#C2CAD6; --tone-neutral-bd:rgba(148,163,184,.26); --tone-purple-bg:rgba(139,92,246,.15); --tone-purple-tx:#C4B5FD; --tone-purple-bd:rgba(139,92,246,.30); }