/*
 * RAudio — design system «Senyal» aplicat al tema Fluent de DevExpress.
 * Font de veritat: https://claude.ai/artifact/Xpkwqx9ExunuCQ9ZoufKzX (tokens.json).
 * Es registra dins el tema (App.razor → AddFilePaths), així es carrega just després del Fluent.
 *
 *  1. Fonts pròpies (servides per la mateixa web, sense Google: privacitat i xarxa local).
 *  2. Tokens de Senyal (--ra-*), tema clar. Els estils de la web fan servir aquests noms.
 *  3. DevExpress: fonts i escala de grisos tenyida amb el blau-verd del logo.
 *     Cada gris conserva la luminància de l'original de DevExpress: res perd contrast.
 */

/* ── 1. Fonts (OFL, fitxers a wwwroot/fonts) ─────────────────────────── */
@font-face { font-family: "Archivo"; src: url("../fonts/Archivo-Regular.ttf") format("truetype");  font-weight: 400; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/Archivo-Medium.ttf") format("truetype");   font-weight: 500; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/Archivo-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/Archivo-Bold.ttf") format("truetype");     font-weight: 700; font-display: swap; }
@font-face { font-family: "Martian Mono"; src: url("../fonts/MartianMono-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Martian Mono"; src: url("../fonts/MartianMono-Medium.ttf") format("truetype");  font-weight: 500; font-display: swap; }

:root {
    /* ── 2. Tokens de Senyal (tema clar) ──────────────────────────────── */
    --ra-ground-0: #eef2f3;     /* fons de pàgina */
    --ra-ground-1: #ffffff;     /* panells, targetes */
    --ra-ground-2: #e6ecee;     /* elements elevats */
    --ra-ground-3: #d6dee1;     /* hover */
    --ra-line: #c4cfd3;         /* separadors decoratius */
    --ra-line-strong: #6f7e84;  /* vores de control (3:1) */
    --ra-ink: #0e161a;
    --ra-ink-muted: #4a5a61;
    --ra-ink-faint: #76858b;    /* només placeholder/desactivat */

    --ra-blue: #0057de;       --ra-on-blue: #ffffff;   --ra-blue-text: #0050cc;   --ra-blue-soft: #dce8fd;
    --ra-green: #45d737;      --ra-on-green: #08200a;  --ra-green-text: #1b7a12;  --ra-green-soft: #ddf6da;
    --ra-teal: #0f7568;       --ra-on-teal: #ffffff;
    --ra-red: #c9231f;        --ra-on-red: #ffffff;    --ra-red-text: #b81f1b;    --ra-red-soft: #fbe0de;
    --ra-amber: #f2a516;      --ra-on-amber: #1a1300;  --ra-amber-text: #8a5800;  --ra-amber-soft: #fcefd3;
    /* Farciment neutre per a insígnies i etiquetes sense senyal (fora de línia, cançó) */
    --ra-neutral-fill: var(--ra-ink-muted);  --ra-on-neutral-fill: #ffffff;   /* 7:1 */

    /* Barra lateral: sempre fosca, amb els fons foscos de Senyal */
    --ra-sidebar-top: #11171a;
    --ra-sidebar-bottom: #0a0e10;

    /* Tipus d'event de la graella (calendari, tauler, editor d'events).
       A l'aire = vermell, pre-gravat = blau, pendent = ambre, repetició = turquesa. */
    --ra-event-live: var(--ra-red);          --ra-on-event-live: var(--ra-on-red);
    --ra-event-recorded: var(--ra-blue);     --ra-on-event-recorded: var(--ra-on-blue);
    --ra-event-pending: var(--ra-amber);     --ra-on-event-pending: var(--ra-on-amber);
    --ra-event-repeat: var(--ra-teal);       --ra-on-event-repeat: var(--ra-on-teal);
    --ra-event-default: var(--ra-neutral-fill); --ra-on-event-default: var(--ra-on-neutral-fill);

    --ra-font-sans: "Archivo", "Segoe UI", system-ui, sans-serif;
    --ra-font-mono: "Martian Mono", "Cascadia Mono", Consolas, monospace;

    /* ── 3. DevExpress Fluent ──────────────────────────────────────────── */
    --dxds-font-family-sans-serif: var(--ra-font-sans);
    --dxds-font-family-mono: var(--ra-font-mono);

    --dxds-neutral-10: #ffffff;
    --dxds-neutral-20: #f2f4f5;
    --dxds-neutral-30: #e5e9eb;
    --dxds-neutral-40: #d9dfe1;
    --dxds-neutral-50: #ccd4d8;
    --dxds-neutral-60: #bfc9ce;
    --dxds-neutral-70: #b4c0c5;
    --dxds-neutral-80: #a7b5bb;
    --dxds-neutral-90: #9babb2;
    --dxds-neutral-100: #8fa1a9;
    --dxds-neutral-110: #8397a0;
    --dxds-neutral-120: #778d96;
    --dxds-neutral-130: #6c848d;
    --dxds-neutral-140: #647982;
    --dxds-neutral-150: #5c7078;
    --dxds-neutral-160: #54656d;
    --dxds-neutral-170: #4c5d63;
    --dxds-neutral-180: #445359;
    --dxds-neutral-190: #3d4a4f;
    --dxds-neutral-200: #354145;
    --dxds-neutral-210: #2e373b;
    --dxds-neutral-220: #273033;
    --dxds-neutral-230: #1f2629;
    --dxds-neutral-240: #191e21;
    --dxds-neutral-250: #131718;
}

body {
    font-family: var(--ra-font-sans);
}

/* Xifres que canvien o es comparen en columna: en mono, que no ballen */
.ra-mono, .ra-num {
    font-family: var(--ra-font-mono);
    font-variant-numeric: tabular-nums;
}
/* Cel·les de temps a les taules de DevExpress (SenyalGrid.Mono). Martian Mono és més ampla i
   alta que Archivo: una mica més petita perquè la fila no creixi. */
.dxbl-grid .dxbl-grid-table > tbody > tr > td.ra-num {
    font-family: var(--ra-font-mono);
    font-size: 0.92em;
    font-variant-numeric: tabular-nums;
}

/* ── Planificador de DevExpress (calendari, graelles de programació i playlists) ──
   Les etiquetes (SenyalColors.cs) pinten el fons del bloc al 80 % i DevExpress hi posa sempre
   text fosc: sobre vermell, blau, turquesa o gris no es llegeix. Als blocs amb color d'etiqueta,
   fons opac i text blanc (≥ 5:1); a l'ambre (pendent), text fosc. */
.dxbl-scheduler .dxbl-sc-apt:has(.dxbl-apt-bg[style]) .dxbl-apt-bg { opacity: 1; }
.dxbl-scheduler .dxbl-sc-apt-hovered:has(.dxbl-apt-bg[style]) .dxbl-apt-bg { opacity: 0.88; }
.dxbl-scheduler .dxbl-sc-apt:has(.dxbl-apt-bg[style]) :is(.dxbl-sc-apt-subject, .dxbl-sc-apt-time, .dxbl-sc-apt-description) {
    color: #ffffff;
}
.dxbl-scheduler .dxbl-sc-apt:has(.dxbl-apt-bg[style*="242, 165, 22"]) :is(.dxbl-sc-apt-subject, .dxbl-sc-apt-time, .dxbl-sc-apt-description) {
    color: var(--ra-on-amber);
}