/* Identidad visual Oi (Manual de identidad visual 2024): colores, tipografías y logo.
   Todas las páginas de OiSchool cargan este archivo antes de sus propios estilos. */

@font-face { font-family: "Avenir"; src: url("fonts/avenir-book.ttf") format("truetype"); font-weight: 300 400; font-display: swap; }
@font-face { font-family: "Avenir"; src: url("fonts/avenir-regular.ttf") format("truetype"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "Avenir"; src: url("fonts/avenir-heavy.ttf") format("truetype"); font-weight: 700 800; font-display: swap; }
@font-face { font-family: "Avenir"; src: url("fonts/avenir-black.ttf") format("truetype"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Druk Wide"; src: url("fonts/druk-wide-bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

:root {
  /* Paleta del manual */
  --oi-purple: #562D8B;      /* primario, PMS 2607 */
  --oi-lilac: #B696C6;       /* secundario, PMS 2567 */
  --oi-navy: #1F1C55;        /* secundario, PMS 2766 */
  --oi-orange-red: #F15A2B;  /* complementarios */
  --oi-orange: #F7941D;
  --oi-green: #009245;
  --oi-yellow: #EDEB7D;
  --oi-blue: #7199CF;
  --oi-indigo: #5653A6;

  --font-body: "Avenir", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-display: "Druk Wide", "Avenir", "Segoe UI", system-ui, sans-serif;

  /* Roles que usan las páginas */
  --paper: #F8F5FB;
  --surface: #FFFFFF;
  --ink: var(--oi-navy);
  --muted: #5E5980;
  --rule: #E2D9EC;
  --track: #ECE6F3;
  --line: var(--oi-purple);
  --on-line: #FFFFFF;
  --focus: var(--oi-purple);
  --ok: #00783A;             /* verde complementario, oscurecido para leerse sobre blanco */
  --ok-bg: #E3F4EA;
  --bad: #C8401A;            /* naranja rojizo complementario, oscurecido para texto */
  --bad-bg: #FDE9E2;
  --phone: var(--oi-navy);

  /* Colores de curso en el portal (index.html) */
  --line-cobalt: var(--oi-purple);
  --line-teal: var(--oi-green);
  --line-magenta: var(--oi-orange-red);
  --line-yellow: var(--oi-orange);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #15133B; --surface: #1F1C55; --ink: #FFFFFF; --muted: #B9B3D6; --rule: #37326E; --track: #2A2660;
    --line: var(--oi-lilac); --on-line: #15133B; --focus: var(--oi-lilac);
    --ok: #4CC38A; --ok-bg: #123A2B; --bad: #FF8A5C; --bad-bg: #3E2018; --phone: #0C0B26;
    --line-cobalt: var(--oi-lilac); --line-teal: #4CC38A; --line-magenta: #FF8A5C; --line-yellow: var(--oi-orange);
  }
}
:root[data-theme="dark"] {
  --paper: #15133B; --surface: #1F1C55; --ink: #FFFFFF; --muted: #B9B3D6; --rule: #37326E; --track: #2A2660;
  --line: var(--oi-lilac); --on-line: #15133B; --focus: var(--oi-lilac);
  --ok: #4CC38A; --ok-bg: #123A2B; --bad: #FF8A5C; --bad-bg: #3E2018; --phone: #0C0B26;
  --line-cobalt: var(--oi-lilac); --line-teal: #4CC38A; --line-magenta: #FF8A5C; --line-yellow: var(--oi-orange);
}

/* Banda morada de ancho completo (encabezado y portada). Redefine los roles para que todo lo
   que hay adentro se lea en blanco sobre el morado primario, sin tocar el HTML interno. */
.band {
  --ink: #FFFFFF; --muted: #E4D9F0; --rule: rgba(255, 255, 255, 0.28); --track: rgba(255, 255, 255, 0.2);
  --line: #FFFFFF; --on-line: var(--oi-purple); --surface: var(--oi-purple); --focus: #FFFFFF; --bad: #FFB59A;
  background: var(--oi-purple); color: var(--ink);
  box-shadow: 0 0 0 100vmax var(--oi-purple); clip-path: inset(0 -100vmax);
}
.band .brand img { filter: brightness(0) invert(1); }

/* Marca en el encabezado: logo Oi + "School" */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--line); }
.brand img { display: block; width: auto; height: 40px; }
.brand span { font-family: var(--font-body); font-weight: 900; font-size: 1.375rem; letter-spacing: -0.01em; line-height: 1; padding-top: 4px; }