/* ===================================================================== tarjetea.me — Identidad de marca (Credencial nítida) Self-host de fuentes + paleta rojo intenso + tipografías. Se incluye al final del para ganar por orden de cascada y redefinir las variables --amber-* / --tj-* que ya usan las vistas. ===================================================================== */ /* ---------- Fuentes self-host ---------- */ @font-face{font-family:'Clash Display';src:url('/fonts/brand/clashdisplay-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'Clash Display';src:url('/fonts/brand/clashdisplay-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:'Clash Display';src:url('/fonts/brand/clashdisplay-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:'General Sans';src:url('/fonts/brand/generalsans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'General Sans';src:url('/fonts/brand/generalsans-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'General Sans';src:url('/fonts/brand/generalsans-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:'JetBrains Mono';src:url('/fonts/brand/jetbrainsmono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'JetBrains Mono';src:url('/fonts/brand/jetbrainsmono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap} /* ---------- Paleta: ámbar -> rojo intenso (Credencial nítida) ---------- Las vistas usan var(--amber-*) y var(--tj-primary/--tj-accent); al redefinirlas aquí, todo el sitio se recolorea sin tocar cada regla. --amber-500 es el rojo pedido: oklch(0.65 0.3 19.04). Los tonos 600/700 son más oscuros para mantener contraste AA del texto blanco en botones. */ :root{ --amber-50: oklch(0.971 0.013 25); --amber-100: oklch(0.936 0.034 24); --amber-300: oklch(0.823 0.115 24); --amber-400: oklch(0.740 0.190 22); --amber-500: oklch(0.65 0.3 19.04); --amber-600: oklch(0.565 0.225 23); --amber-700: oklch(0.490 0.190 24); /* NO redefinimos --tj-primary/--tj-accent: en el perfil público esos tokens los fija el tema personal de cada dueño y deben respetarse. */ } /* ---------- Tipografías ---------- */ body{font-family:'General Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif !important} h1,h2,h3,h4,h5,h6,.brand,.hero h1,.hero-title,.preview-name{font-family:'Clash Display','General Sans',sans-serif !important;letter-spacing:-0.02em} .mono,code,kbd,pre,samp,.hash,.ticket,.pf-hash{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace !important} /* ---------- Contraste de botones primarios ---------- El rojo brillante (--amber-500) con texto blanco queda en el borde de AA; los botones usan un tono algo más oscuro para texto blanco legible. */ .btn-amber{background:var(--amber-600) !important;border-color:var(--amber-600) !important;color:#fff !important} .btn-amber:hover{background:var(--amber-700) !important;border-color:var(--amber-700) !important} /* ---------- Área autenticada (Tailwind compilado): mi-cuenta, dashboard, login ---------- El bundle Vite no se puede recompilar en prod (sin Node); recoloreamos las utilidades amber observadas y forzamos la familia tipográfica de marca. */ .font-sans{font-family:'General Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif !important} .bg-amber-50{background-color:oklch(0.971 0.013 25) !important} .bg-amber-100{background-color:oklch(0.936 0.034 24) !important} .border-amber-200{border-color:oklch(0.885 0.05 24) !important} .text-amber-600{color:oklch(0.565 0.225 23) !important} .text-amber-700{color:oklch(0.49 0.19 24) !important} .text-amber-800{color:oklch(0.44 0.16 25) !important} .hover\:bg-amber-700:hover{background-color:oklch(0.49 0.19 24) !important} /* ---------- Botón primario de marca (Breeze x-primary-button, login/registro) ---------- */ .tj-btn-primary{background-color:var(--amber-600) !important;border-color:var(--amber-600) !important;color:#fff !important} .tj-btn-primary:hover,.tj-btn-primary:focus{background-color:var(--amber-700) !important} /* ---------- El ".me" de la marca siempre en el color predominante ---------- */ .tj-dot{color:var(--amber-500) !important}