@font-face {
        font-family: 'Petit Frere Narrow';
        src: url('/fonts/PetitFrereNarrow-Black.woff2') format('woff2'),
             url('/fonts/PetitFrereNarrow-Black.woff') format('woff');
        font-weight: 900;
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'Haas Grot Display Web';
        src: url('/fonts/NeueHaasGroteskDisplay-55Roman-Web.woff2') format('woff2');
        font-weight: 500;
        font-style: normal;
        font-display: swap;
    }
    @font-face {
        font-family: 'Haas Grot Display Web';
        src: url('/fonts/NeueHaasGroteskDisplay-65Medium-Web.woff2') format('woff2');
        font-weight: 600;
        font-style: normal;
        font-display: swap;
    }

    :root {
        --coral: #FF5741;
        --magenta: #ff52fa;
        --rosa: #ffa7fe;
        --negro: #0A0A0A;
        --blanco: #FFFFFF;
        --gris: #f4f4f1;
        --display: 'Petit Frere Narrow', 'Arial Narrow', Arial, sans-serif;
        --body: 'Haas Grot Display Web', 'Helvetica Neue', Helvetica, Arial, sans-serif;

        /* Alias usados en vistas del panel */
        --navy: var(--negro);
        --accent: var(--coral);
        --blue: var(--coral);
        --cyan: var(--magenta);
        --surface: var(--blanco);
        --card: var(--blanco);
        --text: var(--negro);
        --muted: rgba(10, 10, 10, 0.58);
        --border: var(--negro);
    }