@layer reset, tokens, base, layout, components, utilities;

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/montserrat-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/lato-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/lato-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@layer tokens {
  :root {
    color-scheme: dark;

    /* Contrastes medidos sobre --bg y sobre --surface-2 */
    --bg: #01082D;
    --bg-sunken: #01061F;
    --surface: #041D56;
    --surface-2: #0F2573;
    --ink: #ADE1FB;          /* 13.9:1 */
    --ink-2: #7CC4EE;        /* 10.2:1, 7.2:1 sobre --surface-2 */
    --ink-3: #5AA7D6;        /* 7.4:1, 5.2:1 sobre --surface-2 */
    --line: #123064;
    --line-strong: #266CA9;  /* 3.5:1, bordes de control y foco */
    --accent: #266CA9;       /* 3.5:1: solo gráficos, bordes y foco, nunca texto sobre el */
    --accent-ink: #ADE1FB;   /* texto sobre --surface-2, 9.8:1 */
    --link: #7CC4EE;         /* 10.2:1 */
    /* Ronda de diseño 01: naranja de accion y neutros */
    --cta: #F16913;          /* 6.3:1 sobre --bg, 6.0:1 sobre --carbon */
    --cta-ink: #0B0C0F;      /* 6.3:1 sobre --cta: el texto de la pastilla */
    --cta-hover: #FD8D3C;    /* 8.4:1 con --cta-ink */
    --carbon: #101216;       /* fondo de la banda de cierre */
    --chalk: #F7F8FA;
    --gray: #C9CDD3;
    --pill-line: #6E747C;    /* 3.97:1 sobre --carbon */
    --radius-band: 18px;     /* unica excepcion a --radius: 2px */

    --paper: #FFFFFF;        /* solo print.css */
    --paper-ink: #000000;    /* solo print.css */

    --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
    --font-body: "Lato", "Helvetica Neue", Arial, sans-serif;
    /* Solo para codigo: la monoespaciada del sistema, sin webfont extra */
    --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "DejaVu Sans Mono", monospace;

    --fs-xs: 0.8125rem;
    --fs-sm: 0.9375rem;
    --fs-base: 1.0625rem;
    --fs-md: 1.25rem;
    --fs-lg: 1.5rem;
    --fs-xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
    --fs-2xl: clamp(2.25rem, 1.6rem + 3.2vw, 3.75rem);
    --fs-3xl: clamp(2.25rem, 1rem + 4.2vw, 4rem);
    --fs-mono: 0.78125rem;

    --lh-body: 1.6;
    --lh-title: 1.1;
    --lh-ui: 1.5;

    --tracking-title: -0.03em;
    --tracking-logo: -0.04em;

    --wght-body: 400;
    --wght-title: 600;
    --wght-logo: 700;

    --measure-article: 68ch;
    --measure-prose: 72ch;

    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.25rem;
    --s-6: 1.5rem;
    --s-8: 2rem;
    --s-10: 2.5rem;
    --s-12: 3rem;
    --s-16: 4rem;
    --s-section: clamp(3.5rem, 8vw, 7rem);

    --container: min(100% - clamp(1.5rem, 5vw, 5rem), 1180px);
    --header-h: 4rem;
    --tap: 2.75rem;

    --radius: 2px;
    --border: 1px solid var(--line);
    --border-strong: 1px solid var(--line-strong);
    --shadow-1: 0 1px 0 var(--line);

    --ease: cubic-bezier(.2, 0, 0, 1);
    --dur-hover: 160ms;
    --dur-state: 240ms;

    --focus: 2px solid var(--accent);
    --focus-offset: 3px;
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --dur-hover: 0ms;
      --dur-state: 0ms;
    }
  }

  @media (prefers-contrast: more) {
    :root {
      --ink-2: var(--ink);
      --ink-3: var(--ink-2);
      --line: var(--line-strong);
    }
  }
}