/* ==========================================================================
   ENRAIZANDO LA NUBE — Design Tokens
   ========================================================================== */

/* @font-face declarations will go here when fonts are downloaded locally.
   Provisional Google Fonts import (REMOVE BEFORE PRODUCTION): */
@import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Nunito:wght@400;600;700;800;900&family=Nunito+Sans:wght@400;500;600;700&display=swap');

:root {
  /* Brand colors */
  --eln-midnight:     #0a4759;   /* Midnight Green — primary dark, body text */
  --eln-cyan:         #1b9aa3;   /* Dark Cyan — secondary, links */
  --eln-gray:         #8a7fad;   /* Cool Gray (lavender) — tertiary */
  --eln-magenta:      #c65a81;   /* Magenta (pink) — accent, CTAs, H2/H5 */
  --eln-gold:         #e0a62c;   /* Harvest Gold — warm highlights */

  /* Back-compat aliases (older code still uses these names) */
  --eln-teal-dark:    var(--eln-midnight);
  --eln-teal:         var(--eln-cyan);
  --eln-lavender:     var(--eln-gray);
  --eln-pink:         var(--eln-magenta);

  /* Tonal steps for UI surfaces (derived, kept gentle) */
  --eln-teal-dark-700: #083a4a;
  --eln-teal-dark-900: #052831;
  --eln-teal-100:      #d3ecee;
  --eln-teal-50:       #eaf6f7;
  --eln-pink-100:      #f5d8e2;
  --eln-pink-50:       #fceff3;
  --eln-gold-100:      #f7e6c0;
  --eln-lavender-100:  #e2dfec;

  /* Neutrals */
  --eln-ink:          #0a4759;   /* Same as teal-dark — the brand uses this as text */
  --eln-ink-soft:     #3a5b68;
  --eln-muted:        #6b7b83;
  --eln-line:         #e4eaec;
  --eln-surface:      #ffffff;
  --eln-surface-alt:  #f6f8f9;   /* Very subtle off-white */
  --eln-paper:        #fdfbf7;   /* Warm paper for editorial sections */

  /* Signature gradient — the core visual motif, used on the cloud mark.
     Order: teal (top-left) → lavender → pink → gold (bottom-right). */
  --eln-rainbow:       linear-gradient(135deg, #1b9aa3 0%, #8a7fad 45%, #c65a81 72%, #e0a62c 100%);
  --eln-rainbow-soft:  linear-gradient(135deg, #1b9aa3 0%, #8a7fad 50%, #c65a81 100%);
  --eln-rainbow-radial: radial-gradient(60% 60% at 30% 30%, #d3ecee 0%, #e2dfec 35%, #f5d8e2 65%, #f7e6c0 100%);

  /* Semantic mappings ----------------------------------------------------- */
  --fg-1:       var(--eln-ink);
  --fg-2:       var(--eln-ink-soft);
  --fg-3:       var(--eln-muted);
  --fg-accent:  var(--eln-pink);
  --fg-brand:   var(--eln-teal);

  --bg-1:       var(--eln-surface);
  --bg-2:       var(--eln-surface-alt);
  --bg-paper:   var(--eln-paper);
  --bg-ink:     var(--eln-teal-dark);
  --bg-accent:  var(--eln-pink);

  --border-1:   var(--eln-line);
  --border-2:   #cfd8db;

  /* Status (kept in brand palette family) */
  --success:    #2fa08a;
  --warning:    var(--eln-gold);
  --danger:     #d14a6a;
  --info:       var(--eln-teal);

  /* -----------------------------------------------------------------------
     TYPOGRAPHY — Manual pages 8–9.
     Principal: Arial Rounded MT Bold  →  official TTF loaded above ✓
     Complementaria: Pacifico  →  exact match (Google Fonts).
     Body text on print: Arial Regular  →  we use Nunito Sans on web.
     ----------------------------------------------------------------------- */
  --font-display: 'Arial Rounded MT Bold', 'Arial Rounded MT', 'Nunito', system-ui, sans-serif;
  --font-script:  'Pacifico', 'Brush Script MT', cursive;
  --font-body:    'Arial', 'Nunito Sans', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'Menlo', monospace;

  /* Type scale (reference spec: H1 big / H2 Pacifico 30 / H3 24 / H4 21 /
     H5 Pacifico 24 / H6 18 / body 18). We translate to a comfortable web scale. */
  --fs-display: 3.5rem;     /* 56px — hero */
  --fs-h1:      2.5rem;     /* 40px */
  --fs-h2:      1.875rem;   /* 30px — Pacifico */
  --fs-h3:      1.5rem;     /* 24px */
  --fs-h4:      1.3125rem;  /* 21px */
  --fs-h5:      1.5rem;     /* 24px — Pacifico */
  --fs-h6:      1.125rem;   /* 18px */
  --fs-body:    1.125rem;   /* 18px */
  --fs-small:   0.9375rem;  /* 15px */
  --fs-micro:   0.8125rem;  /* 13px — caption, eyebrow */

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-body:    1.55;
  --lh-loose:   1.75;

  --ls-tight:   -0.01em;
  --ls-caps:    0.08em;

  /* -----------------------------------------------------------------------
     SPACING — 4px base, generous by default (the brand breathes)
     ----------------------------------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* -----------------------------------------------------------------------
     RADII — soft and rounded. The brand is approachable, not sharp.
     ----------------------------------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   28px;
  --radius-2xl:  40px;
  --radius-pill: 999px;

  /* -----------------------------------------------------------------------
     SHADOWS — warm, soft, low-contrast. Never hard drop shadows.
     ----------------------------------------------------------------------- */
  --shadow-xs:  0 1px 2px rgba(10, 71, 89, 0.06);
  --shadow-sm:  0 2px 6px rgba(10, 71, 89, 0.08);
  --shadow-md:  0 8px 24px -8px rgba(10, 71, 89, 0.15);
  --shadow-lg:  0 18px 48px -12px rgba(10, 71, 89, 0.22);
  --shadow-pink: 0 10px 28px -10px rgba(198, 90, 129, 0.45);
  --shadow-inset: inset 0 0 0 1px rgba(10, 71, 89, 0.08);

  /* Motion */
  --ease-out:  cubic-bezier(.2, .8, .2, 1);
  --ease-in:   cubic-bezier(.5, 0, .75, 0);
  --dur-fast:  140ms;
  --dur:       220ms;
  --dur-slow:  380ms;
}