/* ============================================================
   Tokens base — compartidos por la web pública y el panel (D2).
   Paleta oficial: referencias/img/SVG/Recurso 2.svg (#B2040D · #000000 · #8E8D8D).
   Composición y tipografía: mockup aprobado de Stitch. docs/01-design-tokens.md §1.
   ============================================================ */

@layer tokens, base, atoms, molecules, organisms, templates, utilities;

@layer tokens {
  @font-face {
    font-family: "Archivo";
    src: url("../../fonts/archivo-var-latin.woff2") format("woff2");
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Space Grotesk";
    src: url("../../fonts/space-grotesk-var-latin.woff2") format("woff2");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Newsreader";
    src: url("../../fonts/newsreader-italic-var-latin.woff2") format("woff2");
    font-weight: 300 700;
    font-style: italic;
    font-display: swap;
  }
  @font-face {
    font-family: "Space Mono";
    src: url("../../fonts/space-mono-400-latin.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Space Mono";
    src: url("../../fonts/space-mono-700-latin.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }

  :root {
    color-scheme: dark;

    /* --- Color: paleta oficial y derivados accesibles --- */
    --c-black: #000000;          /* oficial */
    --c-bg: #101012;             /* lienzo (negro oficial suavizado, Stitch) */
    --c-surface-1: #161619;
    --c-surface-2: #1c1c20;
    --c-surface-3: #222226;
    --c-line: rgba(244, 241, 236, 0.12);
    --c-line-strong: rgba(244, 241, 236, 0.24);
    --c-ink: #f4f1ec;            /* 16,87:1 */
    --c-ink-2: #a6a4a0;          /* 7,64:1 */
    --c-gray: #8e8d8d;           /* oficial · 5,74:1 */
    --c-red: #b2040d;            /* oficial · solo rellenos (texto encima en --c-ink: 6,39:1) */
    --c-red-hover: #8f030a;
    --c-red-line: #c1363d;       /* derivado · líneas, íconos y texto ≥ 24px (3,5:1) */
    --c-white: #ffffff;          /* solo logos */
    --c-focus: #f4f1ec;

    /* --- Tipografía --- */
    --f-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
    --f-sans: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
    --f-serif: "Newsreader", Georgia, "Times New Roman", serif;
    --f-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
    --display-stretch: 78%;

    /* Escala (DESIGN.md), fluida entre 390 y 1440 px */
    --fs-display: clamp(2.5rem, 1.57rem + 3.81vw, 4.5rem);       /* 40 → 72 */
    --lh-display: 1.04;
    --fs-h1: clamp(2.25rem, 1.6rem + 2.67vw, 3.75rem);           /* 36 → 60 */
    --fs-h2: clamp(1.875rem, 1.48rem + 1.62vw, 2.75rem);         /* 30 → 44 */
    --fs-h3: clamp(1.375rem, 1.2rem + 0.71vw, 1.75rem);          /* 22 → 28 */
    --fs-h4: 1.25rem;
    --fs-quote: clamp(1.25rem, 1.11rem + 0.57vw, 1.5rem);        /* 20 → 24 */
    --fs-body-lg: 1.125rem;
    --fs-body: 1rem;
    --fs-small: 0.875rem;
    --fs-meta: 0.75rem;          /* mínimo de 12 px (RNF-ACC-06) */
    --lh-body: 1.62;
    --tracking-tight: -0.03em;
    --tracking-meta: 0.12em;

    /* --- Espaciado (DESIGN.md) --- */
    --s-xs: 0.25rem;
    --s-sm: 0.5rem;
    --s-md: 1rem;
    --s-lg: 1.5rem;
    --s-xl: 2.5rem;
    --s-2xl: 4rem;
    --s-3xl: 6rem;
    --s-section: clamp(4rem, 2.6rem + 5.7vw, 8rem);
    --gutter: clamp(1rem, 0.77rem + 0.95vw, 1.5rem);
    --page-margin: clamp(1rem, -0.4rem + 5.7vw, 3rem);           /* 16 px a 390 px */
    --container: 1440px;
    --container-text: 1200px;
    --measure: 66ch;

    /* --- Formas: radio 0 y chaflanes --- */
    --radius: 0;
    --cut-sm: 8px;
    --cut-md: 16px;
    --cut-lg: 36px;
    --cut-xl: 64px;

    /* --- Motion --- */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast: 250ms;
    --dur-base: 500ms;
    --dur-slow: 700ms;

    /* --- Capas --- */
    --z-header: 50;
    --z-menu: 60;
    --z-modal: 80;
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --dur-fast: 0ms;
      --dur-base: 0ms;
      --dur-slow: 0ms;
    }
  }
}

@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: 6rem;
  }

  body {
    margin: 0;
    background: var(--c-bg);
    color: var(--c-ink);
    font-family: var(--f-sans);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: clip;
  }

  img,
  svg,
  video,
  picture {
    display: block;
    max-width: 100%;
    height: auto;
  }

  h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--f-display);
    font-stretch: var(--display-stretch);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
  }

  p {
    margin: 0;
    text-wrap: pretty;
  }

  a {
    color: inherit;
    text-decoration-color: var(--c-red-line);
    text-underline-offset: 0.2em;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
    color: inherit;
  }

  :focus-visible {
    outline: 2px solid var(--c-focus);
    outline-offset: 3px;
  }

  ::selection {
    background: var(--c-red);
    color: var(--c-ink);
  }

  hr {
    border: 0;
    border-top: 1px solid var(--c-line);
    margin: var(--s-xl) 0;
  }

  .visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .skip-link {
    position: absolute;
    left: var(--s-md);
    top: -100px;
    z-index: 100;
    padding: var(--s-sm) var(--s-md);
    background: var(--c-ink);
    color: var(--c-bg);
    font-weight: 700;
  }
  .skip-link:focus {
    top: var(--s-md);
  }

  /* Honeypot de AntiSpam: fuera de pantalla, nunca display:none (algunos bots lo detectan) */
  .hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
}