/* ===========================================================================
   Bitacora de Ascenso · sistema de diseno
   Co-branding: producto de Jaime Barcenas, construido por AXENOR.

   La paleta de producto es la del imagotipo de Jaime Barcenas (verdes).
   La estructura tipografica, el ritmo de espaciado, los radios, el movimiento
   y las reglas de accesibilidad vienen del Manual de Marca AXENOR v1.0.

   Regla de contraste (fuente de verdad, medido sobre blanco #FFFFFF):
     --jb-ink        #172319   16.3:1   AAA   texto principal
     --jb-ink-soft   #3A4A3C    8.9:1   AAA   texto secundario
     --jb-ink-faint  #6B7A6D    4.6:1   AA    texto de apoyo, nunca bajo 14px
     --jb-sage-ink   #4F5C41    7.1:1   AAA   acento en texto pequeno
     --jb-sage       #6A7A58    4.6:1   AA    bordes, iconos, acentos grandes
     --verde         #1F7A4C    5.3:1   AA    semaforo en ruta
     --ambar         #8A6414    5.4:1   AA    semaforo atencion
     --rojo          #A32F27    7.0:1   AAA   semaforo desvio
   =========================================================================== */

/* --- Tipografia de marca, servida desde el propio origen -------------------
   No se cargan fuentes de terceros: evita fugas de IP hacia Google Fonts y
   permite una CSP sin `font-src` externo. */

@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-latin-opsz-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074,
    U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-latin-opsz-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/fonts/hanken-grotesk-latin-wght-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  /* --- paleta de producto (Jaime Barcenas) --- */
  --jb-ink: #172319;
  --jb-ink-2: #212e21;
  --jb-ink-soft: #3a4a3c;
  --jb-ink-faint: #6b7a6d;
  --jb-sage: #6a7a58;
  --jb-sage-ink: #4f5c41;
  --jb-sage-bright: #93a67e;
  --jb-bone: #e4e9e7;

  /* --- paleta de constructor (AXENOR), solo en el lockup y el pie --- */
  --ax-carbon: #2d2d2d;
  --ax-orange: #f27429;
  --ax-orange-ink: #b4500f;

  /* --- superficies --- */
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f5f6f4;
  --surface-3: #eceee9;
  --border: #dcdfd8;
  --border-strong: #c3c9bd;

  /* --- roles semanticos --- */
  --ink: var(--jb-ink);
  --ink-soft: var(--jb-ink-soft);
  --ink-faint: var(--jb-ink-faint);
  --accent: var(--jb-sage);
  --accent-ink: var(--jb-sage-ink);
  --accent-wash: #eef1e9;
  --on-accent: #ffffff;

  --verde: #1f7a4c;
  --verde-wash: #e8f4ee;
  --ambar: #8a6414;
  --ambar-wash: #f8f1e0;
  --rojo: #a32f27;
  --rojo-wash: #f9eae9;

  --focus: var(--jb-sage-ink);

  /* --- tipografia --- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:
    "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --fs-eyebrow: 0.75rem;
  --fs-small: 0.8125rem;
  --fs-body: 1rem;
  --fs-lead: 1.125rem;
  --fs-h3: 1.25rem;
  --fs-display-m: clamp(1.5rem, 1.1rem + 1.6vw, 2rem);
  --fs-display-l: clamp(2rem, 1.4rem + 2.6vw, 2.875rem);

  /* --- ritmo de espaciado 4 / 8 (manual AXENOR, seccion 06) --- */
  --sp-2xs: 0.5rem;
  --sp-xs: 0.75rem;
  --sp-sm: 1rem;
  --sp-md: 1.5rem;
  --sp-lg: 2.5rem;
  --sp-xl: 4rem;
  --sp-2xl: 6rem;

  /* --- radios casi rectos; la pastilla se reserva a etiquetas mono --- */
  --radius: 2px;
  --radius-lg: 4px;
  --radius-pill: 999px;

  /* --- contenedores --- */
  --container: 75rem;
  --container-narrow: 52rem;
  --gutter: clamp(1.25rem, 0.6rem + 2vw, 3rem);

  /* --- movimiento --- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur: 240ms;

  /* --- elevacion, muy contenida: la marca es editorial, no blanda --- */
  --shadow-1: 0 1px 2px rgba(23, 35, 25, 0.06);
  --shadow-2: 0 1px 2px rgba(23, 35, 25, 0.06), 0 10px 24px -16px rgba(23, 35, 25, 0.35);
  --shadow-modal: 0 24px 60px -24px rgba(23, 35, 25, 0.55);

  --topbar-h: 3.5rem;
}

/* --- Modo oscuro ---------------------------------------------------------
   Se activa por preferencia del sistema salvo que la persona haya elegido
   claro de forma explicita, y por el atributo data-theme cuando elige. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e140f;
    --surface: #172319;
    --surface-2: #1d2a1e;
    --surface-3: #243325;
    --border: #2c3c2e;
    --border-strong: #3e5140;

    --ink: #e8ece6;
    --ink-soft: #bcc7bb;
    --ink-faint: #90a08f;
    --accent: var(--jb-sage-bright);
    --accent-ink: #b3c49f;
    --accent-wash: #1f2c1f;
    --on-accent: #101710;

    --verde: #5fc98b;
    --verde-wash: #11291d;
    --ambar: #e0b158;
    --ambar-wash: #2b2313;
    --rojo: #ef8f88;
    --rojo-wash: #2f1917;

    --focus: var(--jb-sage-bright);

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 28px -18px rgba(0, 0, 0, 0.8);
    --shadow-modal: 0 28px 64px -24px rgba(0, 0, 0, 0.85);
  }
}

:root[data-theme="dark"] {
  --bg: #0e140f;
  --surface: #172319;
  --surface-2: #1d2a1e;
  --surface-3: #243325;
  --border: #2c3c2e;
  --border-strong: #3e5140;

  --ink: #e8ece6;
  --ink-soft: #bcc7bb;
  --ink-faint: #90a08f;
  --accent: var(--jb-sage-bright);
  --accent-ink: #b3c49f;
  --accent-wash: #1f2c1f;
  --on-accent: #101710;

  --verde: #5fc98b;
  --verde-wash: #11291d;
  --ambar: #e0b158;
  --ambar-wash: #2b2313;
  --rojo: #ef8f88;
  --rojo-wash: #2f1917;

  --focus: var(--jb-sage-bright);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 28px -18px rgba(0, 0, 0, 0.8);
  --shadow-modal: 0 28px 64px -24px rgba(0, 0, 0, 0.85);
}

/* --- Reduccion de movimiento: el contenido nunca depende de la animacion. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}