/* ============================================================
   Elevagents Design System — Colors & Type
   Source: Brand kit.pdf (Elevate)
   ============================================================ */

/* --- FONTS --- */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Fraunces:ital,wght@0,400;0,500;0,600;0,700;0,900;1,400;1,600&family=Italianno&display=swap");

/* Klein → Fraunces substitution for display. Replace this block with
   @font-face declarations pointing at licensed Klein webfonts when available.
   Italianno (Google Fonts) handles cursive / script accents. */

:root {
  /* ============================================================
     PRIMARY GREEN PALETTE
     Fresh and modern — growth, confidence, clarity.
     ============================================================ */
  --green-deep:        #0f3f36;   /* Verde profundo — primary brand */
  --green-growth:      #449a67;   /* Verde crecimiento — secondary */
  --green-turquoise:   #329a92;   /* Verde turquesa — accent */
  --mint-bright:       #8cdab3;   /* Verde mint brillante */
  --mint-soft:         #a6dfbe;   /* Verde mint suave */
  --green-sage:        #8fbfa8;   /* Verde salvia */
  --mint-ice:          #edf9f4;   /* Verde hielo — bg wash */
  --gray-light:        #f2f5f3;   /* Gris claro neutro — bg wash */

  /* ============================================================
     SECONDARY / NEUTRAL PALETTE
     Elegant neutrals + a single muted gold accent.
     ============================================================ */
  --black:             #000000;
  --gray-dark:         #3d3d3d;   /* Gris oscuro — body text */
  --gray-medium:       #b5b7b3;   /* Gris medio — muted text/borders */
  --white:             #ffffff;
  --gold-accent:       #d4af37;   /* Dorado acento — sparingly */

  /* ============================================================
     COSMIC PALETTE (mascot universe)
     Sourced from the astronaut/agent video frames.
     Navy gradient + warm amber accent (helmet glow / suit detail).
     ============================================================ */
  --space-navy:        #0b1a3a;   /* deep night sky */
  --space-blue:        #1f3a6e;   /* mid sky */
  --space-blue-soft:   #5a7bb8;   /* cloud halo */
  --space-cloud:       #c9d6ee;   /* high clouds */
  --suit-white:        #f7f4ee;   /* spacesuit body */
  --suit-shadow:       #d8d2c4;   /* suit shadow */
  --visor-amber:       #f7b27a;   /* helmet glow / chest button */
  --amber-deep:        #b8743a;   /* helmet rim */

  /* ============================================================
     SEMANTIC ROLES
     Use these in components, not the raw values above.
     ============================================================ */
  --bg:                var(--mint-ice);
  --bg-alt:            var(--gray-light);
  --bg-surface:        var(--white);
  --bg-inverse:        var(--green-deep);
  --bg-inverse-2:      var(--green-growth);
  --bg-cosmic:         var(--space-navy);   /* mascot/hero ground */

  --fg:                var(--green-deep);    /* primary text */
  --fg-2:              var(--gray-dark);     /* body text */
  --fg-muted:          var(--gray-medium);   /* secondary text */
  --fg-on-dark:        var(--white);
  --fg-link:           var(--green-growth);
  --fg-accent:         var(--gold-accent);

  --border:            rgba(15, 63, 54, 0.08);
  --border-strong:     rgba(15, 63, 54, 0.16);
  --divider:           rgba(15, 63, 54, 0.06);

  --shadow-resting:    0 1px 2px rgba(15, 63, 54, 0.06);
  --shadow-raised:     0 8px 24px rgba(15, 63, 54, 0.10);
  --shadow-overlay:    0 24px 64px rgba(15, 63, 54, 0.18);

  /* ============================================================
     BUTTON ROLES (from kit p.7)
     ============================================================ */
  --btn-primary-bg:    var(--green-deep);
  --btn-primary-fg:    var(--white);
  --btn-secondary-bg:  var(--green-growth);
  --btn-secondary-fg:  var(--white);
  --btn-ghost-border:  var(--green-deep);
  --btn-ghost-fg:      var(--green-deep);

  /* ============================================================
     TYPOGRAPHY
     Primary: Montserrat (UI, body, most headings)
     Secondary: Klein → Familjen Grotesk (display, editorial)
     ============================================================ */
  --font-sans:         "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display:      "Fraunces", "Familjen Grotesk", "Montserrat", serif;   /* Klein substitute */
  --font-script:       "Italianno", "Fraunces", cursive;                       /* cursive accents */
  --font-mono:         ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale — adapted from kit p.8 for digital
     (kit specifies pt; values converted to a usable px scale). */
  --t-display:         clamp(48px, 6vw, 80px);  /* hero title */
  --t-h1:              clamp(36px, 4vw, 56px);
  --t-h2:              clamp(28px, 3vw, 40px);
  --t-h3:              24px;
  --t-h4:              20px;
  --t-subtitle:        24px;   /* Klein 24pt */
  --t-subheading:      18px;   /* Klein 18pt */
  --t-body:            16px;
  --t-body-lg:         18px;
  --t-quote:           20px;
  --t-small:           14px;
  --t-eyebrow:         13px;   /* tracked Montserrat 15pt → 13px tighter for digital */
  --t-caption:         12px;

  --lh-tight:          1.1;
  --lh-snug:           1.25;
  --lh-normal:         1.5;
  --lh-relaxed:        1.7;

  --tracking-eyebrow:  0.2em;
  --tracking-tight:    -0.02em;
  --tracking-normal:   0;

  /* ============================================================
     SPACING (4pt rhythm)
     ============================================================ */
  --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;

  /* ============================================================
     RADIUS
     ============================================================ */
  --r-sm: 6px;     /* inputs */
  --r-md: 12px;    /* cards */
  --r-lg: 24px;    /* feature blocks */
  --r-pill: 999px; /* pills, buttons */

  /* ============================================================
     LAYOUT
     ============================================================ */
  --container-marketing: 1280px;
  --container-app:       1120px;
  --container-prose:     720px;

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out-soft:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:      cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:         160ms;
  --dur-base:         240ms;
  --dur-slow:         600ms;
}

/* ============================================================
   Base typographic styles
   ============================================================ */
html, body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--t-display);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-sans);
  font-size: var(--t-h2);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--fg);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--t-h4);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--fg);
}

.subtitle {
  font-family: var(--font-display);
  font-size: var(--t-subtitle);
  font-weight: 400;
  line-height: var(--lh-snug);
  color: var(--fg-2);
}

.subheading {
  font-family: var(--font-display);
  font-size: var(--t-subheading);
  font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--fg);
}

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-link);
}

p {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
}

.body-lg {
  font-size: var(--t-body-lg);
  line-height: var(--lh-relaxed);
}

.quote {
  font-family: var(--font-display);
  font-size: var(--t-quote);
  font-style: italic;
  line-height: var(--lh-snug);
  color: var(--fg);
}

.caption {
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  color: var(--fg-muted);
}

a {
  color: var(--fg-link);
  text-decoration: none;
  transition: opacity var(--dur-fast) var(--ease-in-out);
}
a:hover { text-decoration: underline; }

code, pre {
  font-family: var(--font-mono);
}

::selection { background: var(--mint-soft); color: var(--green-deep); }