/* =========================================================================
   Caleida Design System — Color + Type Foundations
   ========================================================================= */

/* Webfonts — Google Fonts substitutions (flagged in README).
   Brand wordmark is a custom display serif; Instrument Serif is the closest
   free analogue with similar ball terminals and high-contrast ink traps.
   Body uses Manrope — a modern neo-grotesque with warm humanist touches
   that pairs well with Spanish-language copy and tech voice. */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Manrope:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ----- Raw purple ramp ------------------------------------------------ */
  --purple-50:  #EEEDFE;
  --purple-100: #CECBF6;
  --purple-200: #AFA9EC;
  --purple-400: #7F77DD;
  --purple-600: #534AB7;
  --purple-800: #3C3489;
  --purple-900: #26215C;

  /* ----- Semantic color tokens (from brand spec) ----------------------- */
  --bg:          #05030a;  /* body */
  --bg-scene:   #030208;  /* pipeline / canvas */
  --bg-2:       #0a0715;  /* cards / subtle surfaces */

  --ink:        #e8e6f0;  /* primary text + headings */
  --ink-dim:    #8a85a8;  /* paragraphs, labels */
  --ink-faint:  #4a4668;  /* meta, timestamps */

  --accent:      #7F77DD;  /* primario — brand core, CTAs */
  --accent-2:    #AFA9EC;  /* primario claro — highlights */
  --accent-deep: #3C3489;  /* primario profundo — inner fills */
  --accent-hot:  #534AB7;  /* primario intermedio — hover, rings */

  --line:         rgba(175, 169, 236, 0.14); /* soft divider */
  --line-strong:  rgba(175, 169, 236, 0.30); /* active borders, HUD corners */

  /* ----- Channel codification (semantic — do not reuse) ---------------- */
  --ch-whatsapp:  #25D366; /* WhatsApp only */
  --ch-email:     #AFA9EC; /* neutral Caleida */
  --ch-voice:     #F0997B; /* coral — voice/phone */
  --ch-ai:        #7F77DD; /* AI core */
  --ch-won:       #5DCAA5; /* closed/won teal */

  /* ----- Type families ------------------------------------------------- */
  --font-display: 'Instrument Serif', 'Reckless Neue', 'Caladea', Georgia, serif;
  --font-sans:    'Manrope', ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ----- Signature infographic motifs ---------------------------------- */
  --grid-bg-size: 64px;
  --grid-bg-color: rgba(175, 169, 236, 0.035);
  --body-glow: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(83,74,183,0.18), transparent 60%),
               radial-gradient(ellipse 60% 40% at 80% 100%, rgba(127,119,221,0.08), transparent 60%);
  --r-hard: 2px;  /* preferred sharp radius for enterprise feel */

  /* ----- Type scale (roles) -------------------------------------------- */
  --fs-display:   clamp(56px, 8vw, 112px);
  --fs-h1:        clamp(40px, 5vw, 64px);
  --fs-h2:        clamp(28px, 3.2vw, 40px);
  --fs-h3:        22px;
  --fs-h4:        18px;
  --fs-body:      16px;
  --fs-body-lg:   18px;
  --fs-small:     14px;
  --fs-micro:     12px;
  --fs-eyebrow:   11px;

  /* ----- Line heights -------------------------------------------------- */
  --lh-display:   0.98;
  --lh-heading:   1.1;
  --lh-body:      1.55;
  --lh-tight:     1.25;

  /* ----- Tracking ------------------------------------------------------ */
  --ls-display:   -0.02em;   /* tight display serif */
  --ls-heading:   -0.01em;
  --ls-body:       0;
  --ls-eyebrow:   0.14em;    /* caps eyebrow labels */
  --ls-mono:      0;

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

  /* ----- Radii --------------------------------------------------------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ----- Elevation / shadows ------------------------------------------ */
  /* Shadows on dark bg are subtle; rely on borders + inner highlights */
  --shadow-card:   0 1px 0 rgba(255,255,255,0.03) inset, 0 10px 30px rgba(0,0,0,0.45);
  --shadow-raised: 0 1px 0 rgba(255,255,255,0.04) inset, 0 20px 60px rgba(0,0,0,0.55);
  --glow-accent:   0 0 24px rgba(127, 119, 221, 0.45);
  --glow-accent-2: 0 0 18px rgba(175, 169, 236, 0.35);
  --glow-won:      0 0 18px rgba(93, 202, 165, 0.35);
  --glow-voice:    0 0 18px rgba(240, 153, 123, 0.35);

  /* ----- Motion -------------------------------------------------------- */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:     120ms;
  --dur-med:      220ms;
  --dur-slow:     420ms;
}

/* =========================================================================
   Semantic type roles — apply directly to elements
   ========================================================================= */

.t-display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--ink);
  font-weight: 400;
}

.t-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  color: var(--ink);
  font-weight: 400;
}

.t-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--ink);
  font-weight: 400;
}

.t-h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-heading);
  color: var(--ink);
  font-weight: 600;
}

.t-h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  line-height: var(--lh-tight);
  color: var(--ink);
  font-weight: 600;
}

.t-body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-dim);
  font-weight: 400;
}

.t-body-lg {
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--ink-dim);
  font-weight: 400;
}

.t-small {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-dim);
}

.t-micro {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  line-height: 1.4;
  color: var(--ink-faint);
}

.t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent-2);
}

.t-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--ink-dim);
}

/* Display gradient — ONLY permitted gradient in typography */
.t-gradient {
  background: linear-gradient(135deg, var(--accent-2) 0%, var(--accent) 50%, var(--accent-hot) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* background-clip:text + tight display line-height clips descenders — add safety padding */
  display: inline-block;
  padding-bottom: 0.14em;
  line-height: 1.05;
}
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* =========================================================================
   Base reset for demo pages
   ========================================================================= */

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

*, *::before, *::after { box-sizing: border-box; }

a { color: var(--accent-2); text-decoration: none; }
a:hover { color: var(--accent); }