/* ============================================================
   SYNKTASK — DESIGN TOKENS
   Fuente: "Synktask — Brand Guidelines" (preliminar, 2026)
   docs/brand-guidelines.pdf
   ------------------------------------------------------------
   Único archivo a tocar cuando el brand kit evolucione.
   ============================================================ */

:root {
  /* ---- 1. COLOR · paleta de marca -----------------------
     Reparto declarado en el deck (05 — Color Palette):
     Bone 80% · Synk Orange 60% · Slate 30% · Ink 20% · Rust 10%   */
  /* Valores tomados de los SVG oficiales de marca (logo + favicon),
     que son la versión más reciente. El PDF preliminar documentaba
     #F04E1F / #A8351A; los assets mandan.                            */
  --synk-orange: #FF4C11;   /* PRIMARY · RGB 255 76 17 */
  --deep-rust:   #9C2400;   /* ACCENT  · RGB 156 36 0   */
  --ink:         #0E0E10;   /* TEXT      · RGB 14 14 16              */
  --bone:        #F5F1EA;   /* NEUTRAL   · RGB 245 241 234           */
  --slate:       #5A5D63;   /* SECONDARY · RGB 90 93 99              */
  --paper:       #FFFFFF;

  /* Derivados de sistema (no son colores de marca nuevos:
     son el mismo bone/ink a distintas densidades)            */
  --line:         #E8E4DD;                 /* borde sobre bone   */
  --line-strong:  #D6D0C6;
  --line-invert:  rgba(245,241,234,.18);
  --wash-orange:  rgba(240,78,31,.08);     /* fondo de realce    */
  --wash-ink:     rgba(14,14,16,.04);

  --ink-2:       var(--slate);
  --ink-muted:   #8A8D93;
  --on-dark:     #F5F1EA;
  --on-dark-2:   rgba(245,241,234,.62);
  /* REGLA DE CONTRASTE DEL NARANJA
     Blanco sobre #FF4C11 da 3.34:1 -> sólo texto grande (>=24px, o
     >=19px bold) y elementos gráficos. Ink sobre naranja da 5.78:1 y
     cumple AA en cualquier tamaño.
     Y al revés: naranja como TEXTO sobre bone da 2.96:1 y no vale para
     nada pequeño; ahí va Deep Rust, que da 7.0:1.                     */
  --on-orange:      #FFFFFF;              /* sólo display sobre naranja */
  --on-orange-body: rgba(14,14,16,.86);   /* cuerpo y meta sobre naranja */
  --accent-text:    var(--deep-rust);     /* acento de marca como texto */

  /* ---- 2. TIPOGRAFÍA -------------------------------------
     Space Grotesk = display + body + UI
     JetBrains Mono = captions + meta (cadencia técnica)      */
  --font-sans: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Escala modular del deck (07 — Type Scale)
     DISPLAY 96/88 -3% · H1 64/56 -2% · H2 40/36 -1%
     H3 28/26 0% · BODY 18/28 0% · CAPTION 14/22 +5% mono     */
  --fs-display: clamp(3rem,   1.9rem + 4.6vw, 6rem);      /* 48 → 96 */
  --fs-h1:      clamp(2.5rem, 1.8rem + 3vw,   4rem);      /* 40 → 64 */
  --fs-h2:      clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);   /* 28 → 40 */
  --fs-h3:      clamp(1.375rem, 1.25rem + .5vw, 1.75rem); /* 22 → 28 */
  --fs-h4:      1.25rem;                                  /* 20 */
  --fs-body:    1.125rem;                                 /* 18 */
  --fs-sm:      1rem;                                     /* 16 */
  --fs-caption: 0.875rem;                                 /* 14 */
  --fs-meta:    0.75rem;                                  /* 12 */

  --lh-display: 0.92;   /* 88/96 */
  --lh-h1:      0.875;  /* 56/64 */
  --lh-h2:      0.9;    /* 36/40 */
  --lh-h3:      0.93;   /* 26/28 */
  --lh-body:    1.556;  /* 28/18 */
  --lh-caption: 1.571;  /* 22/14 */

  --tr-display: -0.03em;
  --tr-h1:      -0.02em;
  --tr-h2:      -0.01em;
  --tr-h3:       0em;
  --tr-meta:     0.05em;   /* caption mono +5% */
  --tr-label:    0.12em;   /* etiquetas mono en caja alta */

  --fw-light: 300; --fw-reg: 400; --fw-med: 500; --fw-semi: 600; --fw-bold: 700;

  /* ---- 3. ESPACIADO · base 4 ----------------------------- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  --section-y: clamp(4.5rem, 2.5rem + 7vw, 8.75rem);   /* 72 → 140 */
  --gutter:    clamp(1.25rem, .25rem + 4vw, 5rem);     /* 20 → 80  */
  --maxw:      1320px;
  --maxw-text: 60ch;

  /* ---- 4. FORMA -----------------------------------------
     El sistema es de esquina viva. Sin radios decorativos.  */
  --radius: 0px;
  --radius-pill: 999px;   /* sólo para el punto de estado    */

  /* ---- 5. ICONOGRAFÍA (08 — Iconography) ---------------- */
  --icon-size: 24px;
  --icon-stroke: 1.6px;

  /* ---- 6. MOVIMIENTO ------------------------------------ */
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --dur-fast: 130ms;
  --dur-base: 260ms;
  --dur-slow: 640ms;

  --z-nav: 100;
}