/*
 * Identidad visual de LedApp: tipografías y colores de marca.
 * Las tipografías están guardadas dentro de la app (assets/vendor/fonts), así
 * funcionan también sin internet (por ejemplo, en el mini PC del local).
 */

/* Chakra Petch: títulos, con aire de cartel. */
@font-face {
    font-family: "Chakra Petch";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/assets/vendor/fonts/chakra-petch-600.woff2") format("woff2");
}
@font-face {
    font-family: "Chakra Petch";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/assets/vendor/fonts/chakra-petch-700.woff2") format("woff2");
}

/* Figtree: texto, cómoda de leer. Un solo archivo trae todos los grosores. */
@font-face {
    font-family: "Figtree";
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url("/assets/vendor/fonts/figtree.woff2") format("woff2");
}

/* Lo que tiene el atributo hidden no se muestra (también los íconos SVG). */
[hidden] {
    display: none !important;
}

:root {
    /* Colores de marca (los mismos del ícono). */
    --brand-bg: #111419;          /* fondo general, gris azulado muy oscuro */
    --brand-surface: #1a1f26;     /* tarjetas y paneles */
    --brand-surface-2: #232932;   /* campos de formulario */
    --brand-line: #2e3540;        /* bordes */
    --brand-led-on: #ffb300;      /* ámbar: LED encendido, color principal */
    --brand-led-glow: rgba(255, 179, 0, 0.45);
    --brand-led-off: #2c323b;     /* LED apagado */
    --brand-text: #eef0f3;
    --brand-muted: #9aa3ae;
    --brand-on-accent: #1a1300;   /* texto sobre un botón ámbar */
    --brand-online: #3ddc84;      /* verde "en línea" */
    --brand-danger: #ff6b6b;

    --brand-font-display: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
    --brand-font-body: "Figtree", "Segoe UI", system-ui, sans-serif;
}