/* Redlocal TV tokens. Six themes, one job per colour in each: the room, its raised surfaces, the
   controls, text (main and secondary), the focus fill (the one focus language), the brand accent,
   the selected state, the red «En vivo» dot and the favourite star. Noche, the default, comes from
   the SMPTE colour bars (a teal room, a bar-cyan brand). theme.js puts data-theme on <html> before
   the first paint; any element can carry data-theme too (the swatches in Ajustes draw themselves).
   Every pair of text and fill passes WCAG AA (tests/test_frontend.py checks it from this file).
   Logo plates (Placa, Placa clara) and the monogram tints never change: logos are baked on them.
   Reddit Sans (OFL 1.1, fonts/LICENSE-*): Condensed for the broadcast layer (numbers, names, chips),
   the normal width for reading. Latin + latin-ext by unicode-range. */
@font-face { font-family: 'Reddit Sans Condensed'; font-weight: 600; font-style: normal; font-display: swap;
  src: url(fonts/reddit-sans-condensed-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Reddit Sans Condensed'; font-weight: 600; font-style: normal; font-display: swap;
  src: url(fonts/reddit-sans-condensed-latin-ext-600-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Reddit Sans Condensed'; font-weight: 700; font-style: normal; font-display: swap;
  src: url(fonts/reddit-sans-condensed-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Reddit Sans Condensed'; font-weight: 700; font-style: normal; font-display: swap;
  src: url(fonts/reddit-sans-condensed-latin-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Reddit Sans Condensed'; font-weight: 900; font-style: normal; font-display: swap;
  src: url(fonts/reddit-sans-condensed-latin-900-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Reddit Sans Condensed'; font-weight: 900; font-style: normal; font-display: swap;
  src: url(fonts/reddit-sans-condensed-latin-ext-900-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Reddit Sans'; font-weight: 500; font-style: normal; font-display: swap;
  src: url(fonts/reddit-sans-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Reddit Sans'; font-weight: 500; font-style: normal; font-display: swap;
  src: url(fonts/reddit-sans-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Reddit Sans'; font-weight: 700; font-style: normal; font-display: swap;
  src: url(fonts/reddit-sans-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Reddit Sans'; font-weight: 700; font-style: normal; font-display: swap;
  src: url(fonts/reddit-sans-latin-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root, [data-theme="noche"] {
  --pantalla: #000000;     /* only behind the video */
  --placa: #263744;        /* the dark logo plate (baked into /logo PNGs: never themed) */
  --placa-clara: #E4E5E9;  /* the light logo plate */

  --sala: #16232C;         /* the room: the page, its bands */
  --sala-rgb: 22, 35, 44;
  --sala-alta: #1D2D38;    /* a raised surface: sheets, Marcar */
  --control: #263744;      /* chips, buttons, fields, keys at rest */
  --control-alta: #2F4352; /* a control under the pointer, an open group */
  --tiza: #F1F1F3;         /* text */
  --tiza-rgb: 241, 241, 243;
  --humo: #AAB4BE;         /* secondary text */
  --tinta: #0E171D;        /* dark text on light fills */
  --foco: #F1F1F3;         /* the focus fill */
  --foco-texto: #0E171D;
  --foco-suave: #3A4A56;   /* secondary text on the focus fill */
  --senal: #36C5D0;        /* brand, progress, the wheel's pointer */
  --senal-texto: #0E171D;
  --sel-fondo: #36C5D0;    /* selected (a chip, the main button at rest) */
  --sel-texto: #0E171D;
  --sel-suave: #173D44;    /* secondary text on the Sel fill (a selected chip's count) */
  --sel-borde: transparent;
  --aire: #D7261E;         /* the red dot and «En vivo» only */
  --aire-rgb: 215, 38, 30;
  --aire-texto: #FFFFFF;
  --estrella: #F5B83D;     /* favourites only */
  --estrella-foco: #A9740B;
  --linea: rgba(241, 241, 243, .14);
  --linea-fuerte: rgba(241, 241, 243, .5);
  --pista: #97A3AE;        /* placeholders */
  --interruptor: #3C5262;  /* a switch that is off */
  --apagado: #74828F;      /* the grey dot of a screen with no picture */
  --atenuado: #0E171E;     /* the bands of a 16:10 screen under a sheet */
  --velo-rgb: 22, 35, 44;  /* scrims over the picture */
  --sombra: rgba(0, 0, 0, .5);
}
/* Carbón: neutral graphite, white accents. White is the focus, so selected things wear a white ring. */
[data-theme="carbon"] {
  --sala: #1A1B1D; --sala-rgb: 26, 27, 29; --sala-alta: #232427;
  --control: #2E3033; --control-alta: #3A3C40;
  --tiza: #F4F4F5; --tiza-rgb: 244, 244, 245; --humo: #B1B4B9; --tinta: #111214;
  --foco: #FFFFFF; --foco-texto: #111214; --foco-suave: #45484D;
  --senal: #E9EAEC; --senal-texto: #111214;
  --sel-fondo: #3A3C40; --sel-texto: #FFFFFF; --sel-suave: #D4D4D5; --sel-borde: #FFFFFF;
  --aire: #D7261E; --aire-rgb: 215, 38, 30; --aire-texto: #FFFFFF;
  --estrella: #F5B83D; --estrella-foco: #A9740B;
  --linea: rgba(244, 244, 245, .14); --linea-fuerte: rgba(244, 244, 245, .5);
  --pista: #9A9DA3; --interruptor: #4A4D52; --apagado: #85888D; --atenuado: #101112;
  --velo-rgb: 26, 27, 29; --sombra: rgba(0, 0, 0, .55);
}
/* Claro: a light theme for daytime. The focus is a dark fill; the picture keeps a dark frame. */
[data-theme="claro"] {
  --sala: #EDF0F3; --sala-rgb: 237, 240, 243; --sala-alta: #FFFFFF;
  --control: #DCE2E8; --control-alta: #CDD5DD;
  --tiza: #14202A; --tiza-rgb: 20, 32, 42; --humo: #4C5A66; --tinta: #FFFFFF;
  --foco: #14202A; --foco-texto: #FFFFFF; --foco-suave: #C3CDD6;
  --senal: #00727E; --senal-texto: #FFFFFF;
  --sel-fondo: #00727E; --sel-texto: #FFFFFF; --sel-suave: #DBEBED; --sel-borde: transparent;
  --aire: #C41E17; --aire-rgb: 196, 30, 23; --aire-texto: #FFFFFF;
  --estrella: #9A6200; --estrella-foco: #F5B83D;
  --linea: rgba(20, 32, 42, .14); --linea-fuerte: rgba(20, 32, 42, .55);
  --pista: #56646F; --interruptor: #B8C3CD; --apagado: #8A97A2; --atenuado: #6F7477;
  --velo-rgb: 22, 35, 44; --sombra: rgba(20, 32, 42, .22);
}
/* Habana: deep sea teal with coral. */
[data-theme="habana"] {
  --sala: #0E2B30; --sala-rgb: 14, 43, 48; --sala-alta: #13363C;
  --control: #1C454C; --control-alta: #25545C;
  --tiza: #F6F0E7; --tiza-rgb: 246, 240, 231; --humo: #B0CAC7; --tinta: #0B1F23;
  --foco: #F6F0E7; --foco-texto: #0B1F23; --foco-suave: #3F5A5C;
  --senal: #FF8466; --senal-texto: #2A0D06;
  --sel-fondo: #FF8466; --sel-texto: #2A0D06; --sel-suave: #59271B; --sel-borde: transparent;
  --aire: #D7261E; --aire-rgb: 215, 38, 30; --aire-texto: #FFFFFF;
  --estrella: #F5B83D; --estrella-foco: #9C6A08;
  --linea: rgba(246, 240, 231, .14); --linea-fuerte: rgba(246, 240, 231, .5);
  --pista: #9DB8B5; --interruptor: #2F5F67; --apagado: #6F9493; --atenuado: #081B1F;
  --velo-rgb: 14, 43, 48; --sombra: rgba(0, 0, 0, .5);
}
/* Atardecer: Miami dusk, deep violet with warm pink. */
[data-theme="atardecer"] {
  --sala: #1F1534; --sala-rgb: 31, 21, 52; --sala-alta: #291C42;
  --control: #352650; --control-alta: #41305F;
  --tiza: #F8EFF6; --tiza-rgb: 248, 239, 246; --humo: #C4B5D0; --tinta: #1A0D22;
  --foco: #F8EFF6; --foco-texto: #1A0D22; --foco-suave: #5B4969;
  --senal: #FF72AA; --senal-texto: #2A0716;
  --sel-fondo: #FF72AA; --sel-texto: #2A0716; --sel-suave: #591F37; --sel-borde: transparent;
  --aire: #D7261E; --aire-rgb: 215, 38, 30; --aire-texto: #FFFFFF;
  --estrella: #FFC14D; --estrella-foco: #9A6A06;
  --linea: rgba(248, 239, 246, .14); --linea-fuerte: rgba(248, 239, 246, .5);
  --pista: #A493B1; --interruptor: #4A3868; --apagado: #8A7A99; --atenuado: #130C21;
  --velo-rgb: 31, 21, 52; --sombra: rgba(0, 0, 0, .5);
}
/* Alto contraste: black, white and yellow, for people who see less. Yellow is the focus; selected
   things wear a yellow ring on black. */
[data-theme="contraste"] {
  --sala: #000000; --sala-rgb: 0, 0, 0; --sala-alta: #0D0D0D;
  --control: #1C1C1C; --control-alta: #2C2C2C;
  --tiza: #FFFFFF; --tiza-rgb: 255, 255, 255; --humo: #E8E8E8; --tinta: #000000;
  --foco: #FFE600; --foco-texto: #000000; --foco-suave: #000000;
  --senal: #FFE600; --senal-texto: #000000;
  --sel-fondo: #000000; --sel-texto: #FFE600; --sel-suave: #FFE600; --sel-borde: #FFE600;
  --aire: #E00000; --aire-rgb: 224, 0, 0; --aire-texto: #FFFFFF;
  --estrella: #FFE600; --estrella-foco: #000000;
  --linea: rgba(255, 255, 255, .5); --linea-fuerte: #FFFFFF;
  --pista: #CFCFCF; --interruptor: #4D4D4D; --apagado: #BDBDBD; --atenuado: #04080A;
  --velo-rgb: 0, 0, 0; --sombra: rgba(0, 0, 0, .7);
}
/* In Claro the picture keeps a dark frame: the preview box, the full screen and its bar are a TV.
   A re-themed scope also sets its own text colour: `color` inherits the page's computed (dark) value,
   not the token. */
[data-theme="claro"] .stage, [data-theme="claro"] .osd, [data-theme="claro"] .scrim, [data-theme="claro"] .is-full .topbar {
  color: var(--tiza);
  --sala: #16232C; --sala-rgb: 22, 35, 44; --sala-alta: #1D2D38;
  --control: #263744; --control-alta: #2F4352;
  --tiza: #F1F1F3; --tiza-rgb: 241, 241, 243; --humo: #AAB4BE; --tinta: #0E171D;
  --foco: #F1F1F3; --foco-texto: #0E171D; --foco-suave: #3A4A56;
  --senal: #36C5D0; --senal-texto: #0E171D;
  --sel-fondo: #36C5D0; --sel-texto: #0E171D; --sel-suave: #173D44;
  --aire: #D7261E; --aire-rgb: 215, 38, 30;
  --estrella: #F5B83D; --estrella-foco: #A9740B;
  --linea: rgba(241, 241, 243, .14); --linea-fuerte: rgba(241, 241, 243, .5);
  --apagado: #74828F; --velo-rgb: 22, 35, 44;
}

:root {
  /* The colour-bar band, the only decoration (the same in every theme). */
  --bar-1: #B9BEC6; --bar-2: #E2C541; --bar-3: #36C5D0; --bar-4: #4DB86A;
  --bar-5: #C25BC9; --bar-6: #D9483E; --bar-7: #3D63D6;

  --f-cond: 'Reddit Sans Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --f-text: 'Reddit Sans', 'Segoe UI', Roboto, Arial, sans-serif;

  --ease-in: cubic-bezier(.05, .7, .1, 1);
  --ease-out: cubic-bezier(.3, 0, .8, .15);
  --t-focus: 120ms;
  --t-in: 250ms;
  --t-out: 180ms;
  --t-wheel: 240ms;
}