/* brand-mtf.css — capa de marca de MTF by Kelvis.
 *
 * Se carga DESPUÉS de apple-tokens.css y solo reescribe color y superficie:
 *
 *   <link rel="stylesheet" href="apple-tokens.css">
 *   <link rel="stylesheet" href="brand-mtf.css">
 *
 * La rejilla, los radios, los objetivos táctiles y la escala tipográfica NO se tocan.
 * Ese es el patrón para cualquier marca: se cambian los colores, nunca las medidas —
 * son las medidas las que hacen que algo se sienta de Apple, no el azul.
 *
 * La marca es negro y ÁMBAR (#FFB020), tema "Terminal", elegido el 11-sep-2026 entre cinco
 * opciones en _generador/demo-temas. El bloque claro conserva el oro clásico por si vuelve.
 *
 * EL DORADO NO SE USA IGUAL EN LOS DOS TEMAS, y esto no es una preferencia:
 *   #c9a24b sobre blanco → 2.40:1   reprueba WCAG AA, no vale para texto
 *   #c9a24b sobre negro  → 8.75:1   perfecto
 *   negro sobre #c9a24b  → 8.75:1   perfecto (botón dorado con etiqueta negra)
 * Por eso en claro el dorado de TEXTO se oscurece a #876D32 (4.93:1) y el original
 * queda para rellenos y filetes, donde el umbral de 4.5:1 no aplica.
 */

:root {
  /* Claro: el blanco/negro clásico del sitio. */
  --bg: #FFFFFF;
  --bg-secondary: #F7F6F3;
  --bg-tertiary: #FFFFFF;
  --bg-grouped: #F7F6F3;
  --bg-grouped-secondary: #FFFFFF;
  --bg-grouped-tertiary: #F7F6F3;

  --label: #0C0B09;
  --label-secondary: rgba(12, 11, 9, 0.64);
  --label-tertiary: rgba(12, 11, 9, 0.38);
  --label-quaternary: rgba(12, 11, 9, 0.18);

  --separator: rgba(12, 11, 9, 0.14);
  --separator-opaque: #E2DED6;

  --fill: rgba(120, 110, 90, 0.20);
  --fill-secondary: rgba(120, 110, 90, 0.15);
  --fill-tertiary: rgba(120, 110, 90, 0.11);
  --fill-quaternary: rgba(120, 110, 90, 0.07);

  /* El dorado de marca, tal cual. Solo para rellenos, filetes y superficies. */
  --oro: #FFB020;
  /* El dorado legible como texto sobre fondo claro. Pasa en las DOS superficies
     claras: 4.93:1 sobre blanco y 4.56:1 sobre el fondo secundario. */
  --accent: #876D32;
  /* Etiqueta sobre un relleno dorado. */
  --on-accent: #0C0B09;

  --up: #0F7A3D;
  --down: #C42B2B;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #080808;
    --bg-secondary: #101010;
    --bg-tertiary: #171717;
    --bg-grouped: #080808;
    --bg-grouped-secondary: #101010;
    --bg-grouped-tertiary: #171717;

    --label: #F3F1EA;
    --label-secondary: rgba(243, 241, 234, 0.66);
    --label-tertiary: rgba(243, 241, 234, 0.40);
    --label-quaternary: rgba(243, 241, 234, 0.18);

    --separator: rgba(243, 241, 234, 0.14);
    --separator-opaque: #2A2A2A;

    --fill: rgba(255, 176, 32, 0.22);
    --fill-secondary: rgba(255, 176, 32, 0.16);
    --fill-tertiary: rgba(255, 176, 32, 0.12);
    --fill-quaternary: rgba(255, 176, 32, 0.08);

    /* En oscuro el dorado de marca ya pasa de sobra: 8.75:1 */
    --accent: #FFB020;
    --on-accent: #0A0700;

    --up: #3DDC84;
    --down: #FF5C5C;
  }
}

:root[data-theme="dark"] {
  --bg: #080808;
  --bg-secondary: #101010;
  --bg-tertiary: #171717;
  --bg-grouped: #080808;
  --bg-grouped-secondary: #101010;
  --bg-grouped-tertiary: #171717;

  --label: #F3F1EA;
  --label-secondary: rgba(243, 241, 234, 0.66);
  --label-tertiary: rgba(243, 241, 234, 0.40);
  --label-quaternary: rgba(243, 241, 234, 0.18);

  --separator: rgba(243, 241, 234, 0.14);
  --separator-opaque: #2A2A2A;

  --fill: rgba(255, 176, 32, 0.22);
  --fill-secondary: rgba(255, 176, 32, 0.16);
  --fill-tertiary: rgba(255, 176, 32, 0.12);
  --fill-quaternary: rgba(255, 176, 32, 0.08);

  --accent: #FFB020;
  --on-accent: #0A0700;

  --up: #3DDC84;
  --down: #FF5C5C;
}