/*
 * La marca del login en el tablero: cada slot sale de una variable de public/estilos.css («Sala de mensajeros»).
 * Sin decisiones visuales nuevas. Diseño puede reemplazar esta carpeta sin tocar nada más de public/cuenta/.
 * Los valores se copian (no se enlazan): esta hoja la cargan también las pantallas del login, que no cargan estilos.css.
 */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 800;font-stretch:75% 100%;font-display:swap;src:url('fuentes/bricolage-grotesque.woff2') format('woff2')}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('fuentes/schibsted-grotesk.woff2') format('woff2')}

:root{
  --color-bg:          oklch(0.185 0.018 255);  /* --fondo */
  --color-surface:     oklch(0.215 0.02 255);   /* --capa */
  --color-surface-alt: oklch(0.245 0.022 255);  /* --capa-2 */
  --color-fg:          oklch(0.93 0.008 250);   /* --tinta */
  --color-fg-muted:    oklch(0.76 0.015 250);   /* --tinta-2 */
  --color-border:      oklch(0.33 0.02 255);    /* --linea */
  --color-primary:     oklch(0.82 0.15 162);    /* --esmeralda */
  --color-primary-fg:  oklch(0.22 0.05 162);    /* --esmeralda-tinta */
  --color-accent:      oklch(0.88 0.012 250);   /* --azogue */
  --color-accent-fg:   oklch(0.185 0.018 255);  /* --fondo */
  --color-accent-ink:  oklch(0.88 0.012 250);   /* --azogue: los enlaces */
  --color-success:     oklch(0.82 0.15 162);    /* --esmeralda */
  --color-warning:     oklch(0.83 0.12 78);     /* --ambar */
  --color-danger:      oklch(0.83 0.12 78);     /* --ambar: el tablero no tiene rojo y no se inventa uno (consulta 1, respondida) */
  --font-display: 'Bricolage Grotesque', 'Schibsted Grotesk', sans-serif;  /* --f-display */
  --font-body:    'Schibsted Grotesk', sans-serif;                          /* --f-texto */
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 8px;  /* --radio-chico, --radio, --radio: el tablero no tiene un tercer radio (consulta 1, respondida) */
  --logo-src: url('/cuenta/marca/logo.png');   /* absoluta: un url() dentro de una variable se resuelve desde donde se USA */
  --logo-ancho: 122px; --logo-alto: 30px;      /* lo que mide «☿ Mercurio» en la barra */
}