/* =========================================================
   Caudal® Design System — Tokens
   ---------------------------------------------------------
   LOCKED · V2 Data-as-art (dashboard hero)
   Jade + Gold + Tinta + Crema. Header negro como única
   superficie oscura en marketing. Cero coral. Cero rojo.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=JetBrains+Mono:wght@400;500;600&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400;1,8..60,500;1,8..60,600;1,8..60,700&display=swap');

:root {
  /* =========================================================
     PALETA · 4 colores lockeados
     01 Crema cálido (base de marketing)
     02 Tinta casi-negra (texto + header dark)
     03 Jade profundo (primario — voz de Caudal)
     04 Gold (premium, números hero, acentos de valor)
     ========================================================= */

  /* 01 Crema */
  --paper-0:    #F7F2E4;
  --paper-1:    #F4EFE3;
  --paper-2:    #EDE7D6;
  --paper-3:    #E3DCC7;
  --paper-4:    #D4CBB2;

  /* 02 Tinta — el header oscuro usa --ink-0 */
  --ink-0:      #14110C;   /* casi-negro cálido (header dark) */
  --ink-1:      #2B2822;
  --ink-2:      #4A463C;
  --ink-3:      #6B665A;
  --ink-4:      #8F897A;

  /* Tinta sobre tinta (header dark) */
  --on-dark-0:  #F4EFE3;   /* texto blanco-crema sobre header */
  --on-dark-1:  #C9C3B0;
  --on-dark-2:  #8E8979;
  --on-dark-3:  #5A564B;

  /* 03 Jade */
  --jade-0:     #062E22;
  --jade-1:     #0C4A37;
  --jade-2:     #0F5F47;   /* primario */
  --jade-3:     #1A7A5B;
  --jade-4:     #37A17E;
  --jade-5:     #5BC09B;   /* dot pulsante */
  --jade-wash:  rgba(15, 95, 71, 0.08);
  --jade-edge:  rgba(15, 95, 71, 0.22);

  /* 04 Gold */
  --gold-0:     #6B5320;
  --gold-1:     #8F7430;
  --gold-2:     #C9A14C;   /* primario */
  --gold-3:     #E3BE5E;
  --gold-4:     #F2D87E;
  --gold-wash:  rgba(201, 161, 76, 0.10);
  --gold-edge:  rgba(201, 161, 76, 0.34);
  --gold-glow:  0 0 24px rgba(227, 190, 94, 0.35);

  /* ── Status (consola, sin coral) ── */
  --status-pending:   #6B665A;
  --status-progress:  #0F5F47;
  --status-responded: #C9A14C;
  --status-qualified: #37A17E;
  --status-discarded: #4A463C;   /* gris-tinta, NO rojo */
  --status-active:    #0C4A37;

  /* ── Semantic roles ── */
  --bg-page:        var(--paper-1);
  --bg-hero:        var(--paper-0);
  --bg-raised:      var(--paper-2);
  --bg-dark:        var(--ink-0);
  --bg-dark-2:      #1B1813;     /* dark elevated */

  --border-1:       var(--paper-3);
  --border-2:       var(--paper-4);
  --border-dark:    rgba(244, 239, 227, 0.10);

  --fg-1:           var(--ink-0);
  --fg-2:           var(--ink-2);
  --fg-3:           var(--ink-3);
  --fg-4:           var(--ink-4);

  --accent:         var(--jade-2);
  --accent-2:       var(--gold-2);
  --accent-contrast:var(--paper-0);

  /* ── Typography stack ── */
  --font-serif:     'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-display:   'Source Serif 4', Georgia, serif;
  --font-sans:      'DM Sans', system-ui, -apple-system, sans-serif;
  --font-mono:      'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --w-regular: 400;
  --w-medium:  500;
  --w-semibold:600;
  --w-bold:    700;

  /* ── Spacing (4px baseline) ── */
  --s-1:  4px; --s-2:  8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
  --s-20: 80px; --s-24: 96px; --s-32: 128px; --s-40: 160px;

  /* ── Radii — editorial: vivos ── */
  --r-sharp: 1px;
  --r-sm:    2px;
  --r-md:    4px;
  --r-lg:    6px;
  --r-pill:  999px;
  --radius-card:    var(--r-sharp);
  --radius-button:  var(--r-sharp);
  --radius-input:   var(--r-sharp);

  /* ── Shadows ── */
  --shadow-xs: 0 1px 2px rgba(20, 17, 12, 0.05);
  --shadow-sm: 0 2px 6px rgba(20, 17, 12, 0.07), 0 1px 2px rgba(20, 17, 12, 0.05);
  --shadow-md: 0 6px 20px rgba(20, 17, 12, 0.09), 0 2px 6px rgba(20, 17, 12, 0.06);
  --shadow-lg: 0 18px 44px rgba(20, 17, 12, 0.12), 0 4px 10px rgba(20, 17, 12, 0.07);
  --shadow-hairline: var(--shadow-sm);
  --shadow-elevated: var(--shadow-md);
  --shadow-hero:     var(--shadow-lg);

  /* ── Motion ── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-brief:  cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:    150ms;
  --dur-base:    250ms;
  --dur-slow:    400ms;

  /* =========================================================
     SIGNATURE DEVICE · "Data-as-chrome"
     Cuadrícula continua, papel financiero.
     Aplicar .data-chrome a contenedor o body.
     ========================================================= */
  --chrome-rule:    var(--paper-4);
  --chrome-ink:     var(--ink-3);
  --chrome-accent:  var(--jade-2);
  --chrome-gold:    var(--gold-2);

  /* Crema · grid de fondo (financial paper) */
  --chrome-grid-bg: repeating-linear-gradient(
      0deg, transparent 0, transparent 31px,
      rgba(20, 17, 12, 0.045) 31px, rgba(20, 17, 12, 0.045) 32px),
    repeating-linear-gradient(
      90deg, transparent 0, transparent 31px,
      rgba(20, 17, 12, 0.045) 31px, rgba(20, 17, 12, 0.045) 32px);

  /* Dark · grid sobre header */
  --chrome-grid-dark: repeating-linear-gradient(
      0deg, transparent 0, transparent 31px,
      rgba(244, 239, 227, 0.04) 31px, rgba(244, 239, 227, 0.04) 32px),
    repeating-linear-gradient(
      90deg, transparent 0, transparent 31px,
      rgba(244, 239, 227, 0.04) 31px, rgba(244, 239, 227, 0.04) 32px);
}

/* =========================================================
   TYPE SCALES · semánticas
   ========================================================= */
:root {
  --t-display-size:  clamp(3.5rem, 7.6vw, 8rem);
  --t-display-lh:    0.96;
  --t-display-track: -0.038em;

  --t-h1-size: clamp(2.4rem, 5vw, 4.4rem);
  --t-h1-lh:   1.02;
  --t-h1-track:-0.03em;

  --t-h2-size: clamp(1.85rem, 3.4vw, 2.8rem);
  --t-h2-lh:   1.10;
  --t-h2-track:-0.022em;

  --t-h3-size: 1.5rem;
  --t-h3-lh:   1.24;
  --t-h3-track:-0.014em;

  --t-h4-size: 1.125rem;
  --t-h4-lh:   1.38;
  --t-h4-track:-0.006em;

  --t-lead-size:  1.14rem;
  --t-lead-lh:    1.62;
  --t-body-size:  1rem;
  --t-body-lh:    1.62;
  --t-small-size: 0.875rem;
  --t-small-lh:   1.55;
  --t-micro-size: 0.75rem;
  --t-micro-lh:   1.42;

  --t-eyebrow-size: 0.74rem;
  --t-eyebrow-track:0.18em;
  --t-mono-size:    0.82rem;
  --t-mono-track:   0.04em;
}

/* =========================================================
   BASE
   ========================================================= */
* { box-sizing: border-box; }

html {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01' on, 'cv01' on;
}

body {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-page);
  margin: 0;
}

/* ── Headings — serif ── */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--fg-1);
  text-wrap: balance;
  margin: 0;
  font-feature-settings: 'ss01' on;
}
h1 { font-size: var(--t-h1-size); line-height: var(--t-h1-lh); letter-spacing: var(--t-h1-track); font-weight: var(--w-bold); }
h2 { font-size: var(--t-h2-size); line-height: var(--t-h2-lh); letter-spacing: var(--t-h2-track); font-weight: var(--w-bold); }
h3 { font-size: var(--t-h3-size); line-height: var(--t-h3-lh); letter-spacing: var(--t-h3-track); font-weight: var(--w-semibold); }
h4 { font-size: var(--t-h4-size); line-height: var(--t-h4-lh); letter-spacing: var(--t-h4-track); font-weight: var(--w-semibold); }

/* italic mid-sentence — siempre jade en headings */
h1 em, h2 em, h3 em, h4 em {
  font-style: italic;
  color: var(--accent);
  font-weight: inherit;
}
h1 em.gold, h2 em.gold, h3 em.gold, h4 em.gold { color: var(--gold-1); }

/* Body */
p {
  font-family: var(--font-sans);
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  color: var(--fg-2);
  text-wrap: pretty;
  margin: 0;
}
p.lead  { font-size: var(--t-lead-size);  line-height: var(--t-lead-lh); color: var(--fg-2); max-width: 62ch; }
p.small { font-size: var(--t-small-size); line-height: var(--t-small-lh); }
p.micro { font-size: var(--t-micro-size); line-height: var(--t-micro-lh); color: var(--fg-3); }
p em { font-style: italic; color: var(--accent); font-weight: var(--w-medium); }

/* Eyebrow · mono uppercase con punto editorial "//" */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow-size);
  font-weight: var(--w-medium);
  letter-spacing: var(--t-eyebrow-track);
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: '//';
  color: currentColor;
  flex-shrink: 0;
  font-weight: var(--w-medium);
}
.eyebrow.gold  { color: var(--gold-1); }
.eyebrow.ink   { color: var(--ink-3); }
.eyebrow.on-dark { color: var(--gold-3); }

/* Mono · timestamps, cifras tabulares */
code, .mono, .tabular {
  font-family: var(--font-mono);
  font-size: var(--t-mono-size);
  font-feature-settings: 'tnum' on, 'zero' on;
  letter-spacing: var(--t-mono-track);
}

/* Hero number — gold serif tabulares */
.hero-number {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  color: var(--gold-2);
  letter-spacing: -0.04em;
  line-height: 0.9;
  font-feature-settings: 'tnum' on, 'lnum' on;
}
.hero-number-descriptor {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--w-regular);
  color: var(--ink-1);
  letter-spacing: -0.014em;
}

.signature-italic {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--accent);
  font-weight: inherit;
}

/* Live dot — jade pulse */
.live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--jade-5);
  box-shadow: 0 0 8px var(--jade-5);
  animation: live-pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.85); }
}

/* =========================================================
   WORDMARK · "Caudal."
   Mismo del site público (Source Serif 4 bold + jade dot).
   USO: <span class="wordmark">Caudal<span class="dot"></span></span>
   - Letras "Caudal" en Source Serif 4 bold, casi-negro
   - Dot circular pequeño en jade-5 (NO teal — V2 lockea jade)
   - Sin sombras, sin reinterpretaciones
   ========================================================= */
.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  color: var(--ink-0);
  letter-spacing: -0.022em;
  line-height: 1;
}
.wordmark .dot {
  display: inline-block;
  width: 0.34em;
  height: 0.34em;
  border-radius: 50%;
  background: var(--jade-5);
  margin: 0 0.04em 0.10em;
  flex-shrink: 0;
}
.wordmark .r {
  font-family: var(--font-mono);
  font-size: 0.42em;
  color: var(--ink-3);
  font-weight: var(--w-regular);
  vertical-align: super;
  margin-left: 0.06em;
}
/* Wordmark en superficies oscuras */
.on-dark .wordmark { color: var(--on-dark-0); }
.on-dark .wordmark .r { color: var(--on-dark-2); }

/* =========================================================
   DATA-CHROME · cuadrícula de fondo (papel financiero)
   ========================================================= */
.data-chrome {
  background-color: var(--paper-1);
  background-image: var(--chrome-grid-bg);
  background-size: 32px 32px;
  position: relative;
}
.data-chrome.dark {
  background-color: var(--ink-0);
  background-image: var(--chrome-grid-dark);
}

/* =========================================================
   PILL CHIPS · status / live
   ========================================================= */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: var(--w-medium);
  padding: 5px 11px;
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  color: var(--jade-3);
}
.chip.live { color: var(--jade-5); }
.chip.gold { color: var(--gold-3); }
.chip.muted { color: var(--ink-3); }

/* =========================================================
   BUTTONS — primary gold, secondary ghost, mono labels
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: var(--w-medium);
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: var(--r-sharp);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--dur-base) var(--ease-out);
  white-space: nowrap;
}
.btn-gold {
  background: var(--gold-2);
  color: var(--ink-0);
  border-color: var(--gold-2);
}
.btn-gold:hover {
  background: var(--gold-3);
  border-color: var(--gold-3);
  box-shadow: var(--gold-glow);
}
.btn-ghost {
  background: transparent;
  color: var(--ink-1);
  border-color: var(--paper-4);
}
.btn-ghost:hover {
  background: var(--paper-2);
  border-color: var(--ink-3);
}
.on-dark .btn-ghost {
  color: var(--on-dark-0);
  border-color: var(--border-dark);
}
.on-dark .btn-ghost:hover {
  background: rgba(244, 239, 227, 0.06);
  border-color: var(--on-dark-2);
}