/* ==========================================================================
   Praxis — tokens de diseño (ruta C · La pieza, D-022)
   Fuente: marca/paleta.md (Cowork, 07/10/2026). Transcripción sin interpretar,
   salvo lo marcado [PROPUESTA DE CODE]: valores que paleta.md no define, a validar por Cowork.
   Verificación: el control de contrastes de marca/ (falla si un contraste baja de lo escrito).
   No se editan los colores acá sin cambiar antes paleta.md.
   ========================================================================== */

:root {
  color-scheme: light;   /* A-LAUNCH-001: los controles nativos (selectores, barras) siguen el tema elegido */
  /* ---- Colores de la paleta (paleta.md, "Colores") ---- */
  --px-grafito: #1E1F1C;        /* texto principal, signo, títulos, bordes fuertes */
  --px-amarillo: #F2B806;       /* acento: formas, placas, subrayados. NUNCA texto sobre blanco (1,81:1) */
  --px-amarillo-texto: #7A5A00; /* texto de acento sobre blanco o piedra. Nunca fondo */
  --px-blanco: #FFFFFF;         /* fondo de documentos, web y tablas */
  --px-piedra: #EDEBE4;         /* superficies secundarias. Nunca texto */
  --px-linea: #CFCBC0;          /* líneas de tabla y separadores (decorativo, 1,62:1). Nunca texto */
  --px-gris-texto: #5C5D57;     /* texto secundario, pies, metadatos. Nunca títulos */
  --px-ok: #1F6B3A;             /* estado bien (semántico). Nunca decoración */
  --px-error: #B3261E;          /* estado mal o alerta (semántico). Nunca decoración */

  /* ---- Modo oscuro (paleta.md, "Modo oscuro") ---- */
  --px-noche: #141513;            /* reemplaza a blanco (fondo) */
  --px-noche-superficie: #22231F; /* reemplaza a piedra */
  --px-noche-texto: #EDEBE4;      /* reemplaza a grafito (texto) */
  --px-noche-gris: #A9A79F;       /* reemplaza a gris-texto */
  /* [PROPUESTA DE CODE] paleta.md no define estados ni línea en oscuro: ok y error dan 2,8:1 sobre noche.
     Mismo tono, aclarado hasta AA; la línea repite la proporción decorativa del modo claro (1,6:1). */
  --px-ok-noche: #2D9C55;         /* 5,23:1 sobre noche · 4,52:1 sobre noche-superficie */
  --px-error-noche: #E35E57;      /* 5,24:1 sobre noche · 4,52:1 sobre noche-superficie */
  --px-linea-noche: #3D392E;      /* 1,59:1 sobre noche (en claro: linea/blanco 1,62) */

  /* ---- Roles (lo que usan las páginas). Modo claro ---- */
  --px-fondo: var(--px-blanco);
  --px-superficie: var(--px-piedra);
  --px-texto: var(--px-grafito);
  --px-texto-secundario: var(--px-gris-texto);
  --px-acento: var(--px-amarillo);              /* formas y fondos de placa */
  --px-acento-texto: var(--px-amarillo-texto);  /* texto de acento */
  --px-sobre-acento: var(--px-grafito);         /* texto encima de una placa amarilla (9,18:1) */
  --px-borde: var(--px-linea);
  --px-estado-ok: var(--px-ok);
  --px-estado-error: var(--px-error);

  /* ---- Tipografía (paleta.md, "Tipografía") ---- */
  --px-fuente-marca: "Fraunces", Georgia, "Times New Roman", serif;
  --px-fuente-texto: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --px-peso-titulo: 600;          /* Fraunces 600: títulos de sección */
  --px-peso-titulo-fuerte: 700;   /* Fraunces 700: títulos de página */
  --px-peso-texto: 400;           /* Inter 400 */
  --px-peso-medio: 500;           /* Inter 500 */
  --px-peso-subtitulo: 600;       /* Inter 600: subtítulos, botones */
  --px-numeros: tabular-nums;     /* font-variant-numeric en columnas de cifras */

  /* ---- Escala (razón 1,25, base 16 px) ---- */
  --px-t-xs: 0.75rem;     /* 12 px: etiquetas en mayúscula, pies */
  --px-t-sm: 0.875rem;    /* 14 px: tablas, metadatos */
  --px-t-base: 1rem;      /* 16 px: texto */
  --px-t-md: 1.25rem;     /* 20 px: subtítulos (Inter 600) */
  --px-t-lg: 1.5625rem;   /* 25 px: títulos de sección (Fraunces 600) */
  --px-t-xl: 1.953rem;    /* 31 px: títulos de página (Fraunces 700) */
  --px-t-2xl: 2.441rem;   /* 39 px: portada de documento */
  --px-t-3xl: 3.052rem;   /* 49 px: cifra protagonista de un caso */
  --px-tracking-etiqueta: 0.06em; /* etiquetas en mayúscula (--px-t-xs) */
  --px-interlineado-texto: 1.5;
  --px-interlineado-titulo: 1.15; /* paleta.md: 1,1–1,2 */
  --px-ancho-parrafo: 65ch;       /* ~65 caracteres */

  /* ---- Forma (paleta.md, "Forma") ---- */
  --px-radio-icono: 22%;
  --px-radio-tarjeta: 12px;
  --px-radio-boton: 10px;
  --px-radio-tabla: 0;
  --px-borde-tabla: 1px solid var(--px-borde);
  --px-borde-encabezado: 2px solid var(--px-texto); /* bajo el encabezado de un documento */
  /* [PROPUESTA DE CODE] paleta.md pide "una muy suave para papel" sin valor: solo documentos de ejemplo en la web. */
  --px-sombra-papel: 0 1px 2px rgb(30 31 28 / 0.06), 0 4px 12px rgb(30 31 28 / 0.06);
}

/* ---- Modo oscuro por preferencia del sistema: SOLO con data-theme="auto" (A-LAUNCH-001: la presentación inicial es clara; la persona elige Claro / Oscuro / Automático en el menú) ---- */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    color-scheme: dark;
    --px-fondo: var(--px-noche);
    --px-superficie: var(--px-noche-superficie);
    --px-texto: var(--px-noche-texto);
    --px-texto-secundario: var(--px-noche-gris);
    --px-acento: var(--px-amarillo);
    --px-acento-texto: var(--px-amarillo);      /* en oscuro el amarillo sí sirve para texto (10,15:1) */
    --px-sobre-acento: var(--px-grafito);
    --px-borde: var(--px-linea-noche);
    --px-estado-ok: var(--px-ok-noche);
    --px-estado-error: var(--px-error-noche);
    --px-sombra-papel: none;
  }
}

/* ---- Modo oscuro forzado por la página ---- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --px-fondo: var(--px-noche);
  --px-superficie: var(--px-noche-superficie);
  --px-texto: var(--px-noche-texto);
  --px-texto-secundario: var(--px-noche-gris);
  --px-acento: var(--px-amarillo);
  --px-acento-texto: var(--px-amarillo);
  --px-sobre-acento: var(--px-grafito);
  --px-borde: var(--px-linea-noche);
  --px-estado-ok: var(--px-ok-noche);
  --px-estado-error: var(--px-error-noche);
  --px-sombra-papel: none;
}