/* Compartido: fuentes y tokens de color (claro y oscuro) de las dos apps. Ver docs/diseno_inspector.md y Handbook_appautos.md. */
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-variable.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --bg: #F2F4F7; --surface: #FFFFFF; --surface-2: #E8ECF1; --surface-3: #DCE2E8;
  --ink: #0E1621; --ink-2: #4A5866; --ink-3: #6B7886; --line: #D5DCE3;
  --accent: #0B5F7A; --accent-2: #0E7A9C; --accent-soft: #DCEFF5; --accent-ink: #FFFFFF;
  --ok: #0A7A0A; --ok-soft: #E3F5E3; --leve: #8A5A00; --leve-soft: #FFF3D6; --media: #A4471F; --media-soft: #FDE8DF; --grave: #B42B21; --grave-soft: #FADFDD;
  --ok-fill: #0CA30C; --leve-fill: #FAB219; --media-fill: #EC835A; --grave-fill: #D03B3B;
  --focus: #F2B705;
  --shadow: 0 1px 2px rgb(14 22 33 / .06), 0 10px 28px -14px rgb(14 22 33 / .22);
  --shadow-lg: 0 18px 50px -18px rgb(14 22 33 / .45);
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --r: 16px; --r-sm: 12px; --tap: 48px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B1016; --surface: #141B23; --surface-2: #1C2530; --surface-3: #263241;
    --ink: #E8EDF2; --ink-2: #9AA9B8; --ink-3: #7D8B99; --line: #26323F;
    --accent: #4FB3D9; --accent-2: #7CC8E6; --accent-soft: #12303D; --accent-ink: #03141B;
    --ok: #5CD65C; --ok-soft: #10301A; --leve: #FFC94D; --leve-soft: #3A2C0A; --media: #F5A27F; --media-soft: #3D2116; --grave: #FF7B70; --grave-soft: #3D1714;
    --shadow: none; --shadow-lg: 0 18px 50px -18px rgb(0 0 0 / .7); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0B1016; --surface: #141B23; --surface-2: #1C2530; --surface-3: #263241;
  --ink: #E8EDF2; --ink-2: #9AA9B8; --ink-3: #7D8B99; --line: #26323F;
  --accent: #4FB3D9; --accent-2: #7CC8E6; --accent-soft: #12303D; --accent-ink: #03141B;
  --ok: #5CD65C; --ok-soft: #10301A; --leve: #FFC94D; --leve-soft: #3A2C0A; --media: #F5A27F; --media-soft: #3D2116; --grave: #FF7B70; --grave-soft: #3D1714;
  --shadow: none; --shadow-lg: 0 18px 50px -18px rgb(0 0 0 / .7); color-scheme: dark;
}