/* ============================================================
   TESSERON DS — design tokens (Graphite Foundry)
   Namespace: --t-*  (coexists with Prometeo --p-*)
   ============================================================ */
:root {
  /* ---------- SHELL · bone & ink (base) ----------------- */
  --t-bg:         oklch(0.985 0.003 80);   /* warm bone */
  --t-bg-alt:     oklch(0.96  0.004 80);
  --t-surface:    oklch(1 0 0);
  --t-ink:        oklch(0.18 0.008 260);   /* near-black ink */
  --t-ink-2:      oklch(0.35 0.008 260);   /* graphite */
  --t-muted:      oklch(0.58 0.008 260);   /* steel / meta */
  --t-line:       oklch(0.86 0.004 260);   /* fog */
  --t-line-soft:  oklch(0.93 0.006 80);

  /* ---------- DARK (inverse) ---------------------------- */
  --t-dark:       oklch(0.16 0.006 260);
  --t-dark-2:     oklch(0.20 0.008 260);
  --t-dark-surf:  oklch(0.22 0.008 260);
  --t-dark-ink:   oklch(0.97 0.003 250);
  --t-dark-ink-2: oklch(0.82 0.005 250);
  --t-dark-line:  oklch(0.32 0.008 260);

  /* ---------- TYPE ------------------------------------- */
  --t-sans:    "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  --t-display: "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  --t-serif:   "Instrument Serif", Georgia, serif;
  --t-mono:    "JetBrains Mono", ui-monospace, monospace;

  --t-display-weight:   300;
  --t-display-tracking: -0.04em;
  --t-display-lh:       0.92;

  /* ---------- SPACE (4px) ------------------------------ */
  --t-s-1:  4px;  --t-s-2:  8px;  --t-s-3: 12px; --t-s-4: 16px;
  --t-s-5: 20px;  --t-s-6: 24px;  --t-s-8: 32px; --t-s-10: 40px;
  --t-s-12: 48px; --t-s-16: 64px; --t-s-20: 80px; --t-s-24: 96px;

  --t-gutter: clamp(24px, 4vw, 56px);

  /* ---------- RADIUS (bajo, industrial) ---------------- */
  --t-r-0: 0;
  --t-r-1: 2px;
  --t-r-2: 4px;
  --t-r-3: 8px;
  --t-r-full: 999px;

  /* ---------- SHADOW (casi ausentes, solo hair) -------- */
  --t-sh-0: none;
  --t-sh-1: 0 1px 0 oklch(0.86 0.004 260);
  --t-sh-2: 0 0 0 1px oklch(0.86 0.004 260), 0 8px 24px oklch(0 0 0 / 0.04);

  /* ---------- MOTION ------------------------------------ */
  --t-dur-1: 120ms;
  --t-dur-2: 180ms;
  --t-dur-3: 280ms;
  --t-ease-out:   cubic-bezier(.2,.8,.2,1);
  --t-ease-inout: cubic-bezier(.4,0,.2,1);

  /* ---------- TEXTURES (hair-grid + dots) -------------- */
  --t-tex-grid: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><path d='M0 0 H32 M0 0 V32' stroke='%231a1e25' stroke-opacity='0.05' stroke-width='0.6'/></svg>");
  --t-tex-grid-dark: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><path d='M0 0 H32 M0 0 V32' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='0.6'/></svg>");
  --t-tex-dot: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><circle cx='1' cy='1' r='0.7' fill='%231a1e25' fill-opacity='0.16'/></svg>");
  --t-tex-hatch: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='6'><path d='M-1 5 L5 -1' stroke='%231a1e25' stroke-opacity='0.12' stroke-width='0.5'/></svg>");
}

/* body mode hooks */
body[data-mode="dark"] {
  --t-bg:        var(--t-dark);
  --t-bg-alt:    var(--t-dark-2);
  --t-surface:   var(--t-dark-surf);
  --t-ink:       var(--t-dark-ink);
  --t-ink-2:     var(--t-dark-ink-2);
  --t-muted:     oklch(0.60 0.007 250);
  --t-line:      var(--t-dark-line);
  --t-line-soft: oklch(0.26 0.008 260);
}