/* =========================================================================
   tokens.css — Contrato de valores del Design System V1
   Fuente: docs/DESIGN_SYSTEM.md (Final / Accepted / Visual freeze)

   Este archivo contiene SÓLO valores. No define familia, peso, semántica
   ni layout: eso vive en base.css (estilos semánticos) y en system.css.

   Estrategia mobile-first: :root declara los valores mobile y el único
   breakpoint de V1 redefine EXCLUSIVAMENTE los 10 size tokens. Ningún
   color, spacing o layout se escribe dos veces.
   ========================================================================= */

:root {
  /* -----------------------------------------------------------------------
     Color — los 13 tokens semánticos de V1. No hay más.
     Sin success genérico. Sin warning, danger, info, disabled, selected
     ni brand-secondary.
     ----------------------------------------------------------------------- */
  --bg: #171613;
  --bg-subtle: #1d1b17;
  --surface-media: #211e1a;
  --border: #2e2b26;
  --text-primary: #f0ebe1;
  --text-secondary: #a09a8e;
  --accent: #e2714a;
  --status-published: #7fa36b;
  --inverted-bg: #ede8de;
  --inverted-text: #171613;
  --inverted-text-secondary: #4a463f;
  --inverted-border: #cfc8bb;
  --accent-on-inverted: #a6431f;

  /* -----------------------------------------------------------------------
     Size tokens — valores MOBILE. Representan tamaño y nada más.
     ----------------------------------------------------------------------- */
  --fs-1: 37px;
  --fs-2: 29px;
  --fs-3: 27px;
  --fs-4: 22px;
  --fs-5: 18px;
  --fs-6: 16px;
  --fs-7: 15px;
  --fs-8: 14px;
  --fs-9: 15px;
  --fs-10: 10px;

  /* -----------------------------------------------------------------------
     Spacing
     ----------------------------------------------------------------------- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;

  /* -----------------------------------------------------------------------
     Layout
     --bp queda declarado como parte del contrato documentado, pero las
     media queries usan el literal 900px: CSS no admite custom properties
     dentro de una condición de media.
     ----------------------------------------------------------------------- */
  --page-max: 1280px;
  --gutter: 72px;
  --gutter-sm: 22px;
  --measure: 56ch;
  --bp: 900px;

  /* -----------------------------------------------------------------------
     Movimiento
     ----------------------------------------------------------------------- */
  --duration-interaction: 160ms;
  --easing: ease;

  /* -----------------------------------------------------------------------
     Radios
     ----------------------------------------------------------------------- */
  --radius-control: 4px;
  --radius-media: 12px;
  --radius-figure: 5px;
}

/* -------------------------------------------------------------------------
   Único breakpoint de V1: 900px.
   Redefine sólo los size tokens. No se crea un breakpoint tablet hasta que
   una pantalla real lo requiera.
   ------------------------------------------------------------------------- */
@media (min-width: 900px) {
  :root {
    --fs-1: 60px;
    --fs-2: 42px;
    --fs-3: 36px;
    --fs-4: 28px;
    --fs-5: 22px;
    --fs-6: 18px;
    --fs-7: 16px;
    --fs-8: 14px;
    --fs-9: 15px;
    --fs-10: 10.5px;
  }
}