/* =============================================================
   TEMA TRAMOYA · v1 · 2026-08-29
   Tokens internos derivados de la marca opheliapastrana.com
   El escenario es lo que ve el público; esto es la tramoya.
   Contraste verificado WCAG AA en ambos modos (peor par: 4.52:1).
   Leyes de la casa en copy de UI: sin guiones largos; español
   inclusivo por reformulación (ver hoja de reglas).
   ============================================================= */

/* ---- Fuentes autoalojadas (SIL OFL: alojarlas es legal;
        incluir OFL.txt junto a los archivos en /o/assets/fonts/) */
@font-face {
  font-family: "Archivo";
  src: url("/o/assets/fonts/Archivo-VF.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/o/assets/fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/o/assets/fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

/* ================= MODO CLARO (base) ================= */
:root {
  color-scheme: light;

  /* Superficies */
  --bg: #F4F4F3;            /* haze, el claro del sitio */
  --surface-1: #FFFFFF;     /* tarjeta, fila, panel */
  --surface-2: #FBFBFA;     /* zebra, celdas alternas, headers de tabla */
  --surface-3: #FFFFFF;     /* modal, sheet: se eleva con --shadow-3 */
  --border: #E2E1DE;
  --border-strong: #C8C6C1;

  /* Texto */
  --text: #121212;          /* ink */
  --text-2: #454543;        /* secundario */
  --text-3: #6B6A66;        /* muted: glosas, nunca montos */
  --text-on-accent: #FFFFFF;

  /* Acento (señal). Atención de marca y alarma son la misma familia. */
  --accent: #D32F2F;
  --accent-hover: #B32424;
  --focus: var(--accent);

  /* Semánticos, grado texto: AA sobre superficie y sobre su tinta */
  --ok: #1B7A3D;       --ok-tint: #E6F4EA;      /* conciliado, al corriente */
  --warn: #8A6420;     --warn-tint: #F6ECD9;    /* por vencer (familia candilejas) */
  --danger: #CB2B2B;   --danger-tint: #FBE9E7;  /* vencido, error (señal, corte AA) */
  --info: #2F6CAD;     --info-tint: #E8F0F8;    /* azul plano, guiño tramoya */

  /* Tipografía */
  --font-display: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-0: 0.75rem;    /* 12: etiquetas mono, insignias */
  --fs-1: 0.875rem;   /* 14: cuerpo denso */
  --fs-2: 1rem;       /* 16: inputs (mínimo iOS anti-zoom) y cuerpo cómodo */
  --fs-3: 1.125rem;   /* 18: subtítulos */
  --fs-4: 1.375rem;   /* 22: totales, título de sección */
  --fs-5: 1.75rem;    /* 28: display Archivo 800 */
  --lh-tight: 1.2;
  --lh-dense: 1.35;   /* tablas y listas densas */
  --lh-body: 1.45;
  --w-reg: 400; --w-med: 500; --w-semi: 600; --w-display: 800;
  --track-label: 0.06em;   /* etiquetas mono en mayúsculas */

  /* Espaciado, radios, sombras, movimiento, tacto */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;
  --radius: 0;              /* la marca es rectilínea: todo es caja */
  --radius-round: 999px;    /* solo puntos de estado y avatares */
  --shadow-1: 0 1px 2px rgba(12,12,12,.06);
  --shadow-2: 0 2px 8px rgba(12,12,12,.09);
  --shadow-3: 0 10px 28px rgba(12,12,12,.14);
  --speed-1: 120ms; --speed-2: 180ms;
  --ease-out: cubic-bezier(.2,.7,.3,1);
  --tap: 44px;
}

/* ================= MODO OSCURO =================
   Bloque gemelo: mantener sincronizados los dos selectores. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0C0C0C;            /* stage */
    --surface-1: #161616;
    --surface-2: #1D1D1D;
    --surface-3: #242424;
    --border: #262626;
    --border-strong: #3A3A3A;
    --text: #F4F4F3;          /* haze: la base sobre oscuro */
    --text-2: #BDBCB8;
    --text-3: #94938F;
    --text-on-accent: #121212;
    --accent: #FF5C4D;
    --accent-hover: #FF7669;
    --focus: var(--accent);
    --ok: #4CC38A;       --ok-tint: #10291C;
    --warn: #D9B36A;     --warn-tint: #2A2113;
    --danger: #FF5C4D;   --danger-tint: #331512;
    --info: #7FB2E5;     --info-tint: #142230;
    --shadow-1: 0 1px 2px rgba(0,0,0,.5);
    --shadow-2: 0 2px 10px rgba(0,0,0,.55);
    --shadow-3: 0 12px 32px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0C0C0C;
  --surface-1: #161616;
  --surface-2: #1D1D1D;
  --surface-3: #242424;
  --border: #262626;
  --border-strong: #3A3A3A;
  --text: #F4F4F3;
  --text-2: #BDBCB8;
  --text-3: #94938F;
  --text-on-accent: #121212;
  --accent: #FF5C4D;
  --accent-hover: #FF7669;
  --focus: var(--accent);
  --ok: #4CC38A;       --ok-tint: #10291C;
  --warn: #D9B36A;     --warn-tint: #2A2113;
  --danger: #FF5C4D;   --danger-tint: #331512;
  --info: #7FB2E5;     --info-tint: #142230;
  --shadow-1: 0 1px 2px rgba(0,0,0,.5);
  --shadow-2: 0 2px 10px rgba(0,0,0,.55);
  --shadow-3: 0 12px 32px rgba(0,0,0,.6);
}

/* Override manual, 3 líneas de JS (localStorage):
   const t = localStorage.getItem("tema");
   if (t) document.documentElement.dataset.theme = t;
   // guardar: localStorage.setItem("tema", "dark" | "light");  */

/* ================= Recetas mínimas ================= */
body {
  background: var(--bg);
  color: var(--text);
  font: var(--w-reg) var(--fs-1) / var(--lh-body) var(--font-ui);
  -webkit-text-size-adjust: 100%;
}
.money {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}