/* ============================================================
   RAWHEARTH — DESIGN TOKENS
   Cópialo a la raíz de tu HTML como <link rel="stylesheet" href="brand/tokens.css">
   o pega el contenido del :root dentro de un <style> al inicio.
   ============================================================ */

:root {
  /* ---------- INK · oscuros con tinte azul ---------- */
  --ink: #0a0a12;             /* casi negro — texto principal y backgrounds oscuros */
  --ink-2: #14141c;           /* hover de --ink */
  --ink-3: #1d1d28;           /* card backgrounds dentro de bloques oscuros */

  /* ---------- PAPER · blancos fríos ---------- */
  --paper: #ffffff;            /* fondo principal */
  --paper-cool: #f4f4f7;       /* gris-blanco frío — bloques alternos, code pills */
  --paper-cool-2: #ebebf0;     /* gris-blanco más cargado — patterns */

  /* ---------- MUTED · neutros ---------- */
  --muted: #6b6b78;            /* texto secundario, captions */
  --muted-2: #9a9aa8;          /* texto sobre fondo oscuro */
  --hairline: #e6e6ec;         /* bordes muy sutiles */
  --hairline-strong: #c9c9d3;  /* bordes visibles, divisores */

  /* ---------- ELECTRIC · acento principal ---------- */
  --electric: #3a3aff;         /* azul eléctrico — focus, selección, acciones live */
  --electric-deep: #2020d8;    /* gradient start */
  --violet: #6b3aff;           /* violeta — gradient end */
  --glow-blue: rgba(74, 74, 255, 0.55);    /* glow para shadows */
  --glow-violet: rgba(120, 70, 255, 0.45); /* glow para shadows */

  /* ---------- GRADIENT FIRMA ---------- */
  /* uso: background: var(--beam); */
  --beam: radial-gradient(60% 90% at 50% 50%,
            rgba(120, 90, 255, 0.55) 0%,
            rgba(58, 58, 255, 0.45) 35%,
            rgba(30, 20, 90, 0.0) 70%);

  /* text gradient — usar con -webkit-background-clip: text */
  --grad-text: linear-gradient(92deg, var(--electric-deep) 0%, var(--electric) 55%, var(--violet) 100%);

  /* ---------- TIPOGRAFÍA ---------- */
  --sans:    "Geist", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --display: "Space Grotesk", "Geist", system-ui, sans-serif;
  --serif:   "Instrument Serif", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --mono:    "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- ESCALA TIPOGRÁFICA ---------- */
  --fs-display-xl: clamp(48px, 7.2vw, 112px);  /* hero h1 */
  --fs-display-l:  clamp(40px, 5.6vw, 84px);   /* final cta */
  --fs-display-m:  clamp(38px, 5vw, 68px);     /* section-h */
  --fs-display-s:  clamp(28px, 3.4vw, 40px);   /* sub-section */
  --fs-h3:         28px;
  --fs-body:       17px;
  --fs-small:      14px;
  --fs-mono:       12px;
  --fs-mono-s:     11px;

  /* letter-spacing */
  --ls-display: -0.028em;
  --ls-mono:    0.14em;   /* uppercase mono — eyebrows */
  --ls-mono-tight: 0.06em;

  /* line-height */
  --lh-display: 1.05;
  --lh-body:    1.55;

  /* ---------- LAYOUT ---------- */
  --container: 1180px;
  --container-narrow: 720px;
  --container-mid: 920px;
  --gutter: 32px;

  /* ---------- SPACING (escala 4px) ---------- */
  --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;
  --sp-32: 128px;

  /* ---------- SHADOWS / GLOWS ---------- */
  --shadow-sm: 0 4px 12px -4px rgba(10, 10, 30, 0.12);
  --shadow-md: 0 12px 30px -10px var(--glow-blue), 0 0 0 1px rgba(58, 58, 255, 0.25);
  --shadow-lg: 0 40px 100px -30px rgba(10, 10, 30, 0.45);

  /* ---------- BORDES ---------- */
  /* La marca usa esquinas RECTAS por defecto (0px). Solo el círculo dot-live es redondo. */
  --radius-0: 0;
  --radius-pill: 999px;

  /* ---------- TRANSITIONS ---------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-fast: 150ms;
  --t-med:  240ms;
  --t-slow: 360ms;
}

/* ============================================================
   BASE — reset mínimo aplicado a html/body
   ============================================================ */

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--paper);
  color: var(--ink);
}

body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11"; /* Geist stylistic alts */
}

/* ============================================================
   UTILS — containers
   ============================================================ */

.container        { max-width: var(--container);        margin: 0 auto; padding: 0 var(--gutter); }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--gutter); }
.container-mid    { max-width: var(--container-mid);    margin: 0 auto; padding: 0 var(--gutter); }