/* ==========================================================================
   Sistema visual — tokens
   --------------------------------------------------------------------------
   Sistema nuevo, creado para este portafolio. Registro sobrio y editorial:
   el contenido es el que tiene que llamar la atención, no la interfaz.

   Contraste: todos los pares de texto sobre fondo declarados acá superan
   4.5:1 (AA para texto normal). Si cambiás un color, verificá el par antes
   de publicar.
   ========================================================================== */

:root {
  /* --- Color: modo claro ------------------------------------------------ */
  --paper:       #fbfbfa;  /* fondo de página */
  --surface:     #ffffff;  /* tarjetas y bloques elevados */
  --surface-alt: #f3f3f1;  /* bandas alternas y chips */

  --ink:    #16181d;  /* títulos y texto principal   — 15.1:1 sobre paper */
  --ink-2:  #40454f;  /* cuerpo secundario           —  9.2:1 sobre paper */
  --ink-3:  #5c6270;  /* metadatos y etiquetas       —  5.2:1 sobre paper */

  --rule:    #e4e4e1;  /* bordes y separadores */
  --rule-2:  #d3d3cf;  /* bordes con más presencia */

  --accent:      #1f5ae0;  /* enlaces y acentos       —  5.6:1 sobre paper */
  --accent-ink:  #ffffff;  /* texto sobre --accent    —  5.9:1 */
  --accent-soft: #eaf0fe;  /* fondo tenue de acento */

  --todo-bg:   #fff3cd;  /* marcador de contenido pendiente */
  --todo-ink:  #5c4400;  /* 8.4:1 sobre --todo-bg */
  --todo-rule: #d9a400;

  --focus: #1f5ae0;

  /* --- Tipografía -------------------------------------------------------
     Stack del sistema: sin peticiones de red, sin salto de fuente, y se ve
     nativa en la máquina del reclutador. */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  /* Escala fluida: mobile-first, crece con el viewport sin media queries. */
  --text-xs:   0.8125rem;                              /* 13px */
  --text-sm:   0.875rem;                               /* 14px */
  --text-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --text-lg:   clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem);
  --text-xl:   clamp(1.3125rem, 1.22rem + 0.45vw, 1.5rem);
  --text-2xl:  clamp(1.5rem, 1.35rem + 0.75vw, 1.9375rem);
  --text-3xl:  clamp(1.9375rem, 1.65rem + 1.4vw, 2.75rem);

  --leading-tight: 1.18;
  --leading-snug:  1.35;
  --leading-body:  1.65;

  --tracking-tight: -0.018em;
  --tracking-wide:   0.08em;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-bold:   650;

  /* --- Espaciado: escala de 4px ---------------------------------------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  3rem;
  --space-8:  4rem;
  --space-9:  6rem;

  /* Aire entre secciones: más chico en móvil, más generoso en escritorio. */
  --section-gap: clamp(3.5rem, 2.5rem + 5vw, 6.5rem);

  /* --- Layout ----------------------------------------------------------- */
  --measure:    68ch;   /* ancho máximo de un párrafo legible */
  --container:  60rem;
  --gutter:     clamp(1.25rem, 0.9rem + 1.8vw, 2.5rem);

  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 14px;

  --border: 1px solid var(--rule);

  --shadow-sm: 0 1px 2px rgb(16 18 21 / 0.05);
  --shadow:    0 2px 8px rgb(16 18 21 / 0.06);

  /* --- Movimiento -------------------------------------------------------
     Curvas de salida para lo que entra en pantalla: rápido al principio y
     desacelerando, que es como se lee natural. Todo esto queda anulado bajo
     `prefers-reduced-motion`. */
  --dur:       180ms;
  --dur-slow:  520ms;
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* --- Color: modo oscuro -------------------------------------------------
   Se activa con la preferencia del sistema. Sin toggle y sin JS: una cosa
   menos que pueda fallar en la máquina de otro. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper:       #101215;
    --surface:     #171a1f;
    --surface-alt: #1d2127;

    --ink:    #edeef0;  /* 16.4:1 sobre paper */
    --ink-2:  #b6bbc4;  /*  9.6:1 sobre paper */
    --ink-3:  #949aa5;  /*  6.4:1 sobre paper */

    --rule:    #262a31;
    --rule-2:  #343943;

    --accent:      #7ba4ff;  /*  7.7:1 sobre paper */
    --accent-ink:  #0b0d10;
    --accent-soft: #182236;

    --todo-bg:   #33280a;
    --todo-ink:  #ffdf8a;  /* 8.9:1 sobre --todo-bg */
    --todo-rule: #8a6d13;

    --focus: #7ba4ff;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow:    0 2px 8px rgb(0 0 0 / 0.45);
  }
}