/* =============================================================
   Growtraveling — Design Tokens
   Colors & Type. Load this in every prototype / slide / kit.
   ============================================================= */

/* Display + body family: Outfit (hosted). Titles use ExtraBold 800. */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');

/* Brand fonts — local files (path resolves from this CSS file's location). */
@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/SpaceGrotesk-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/SpaceGrotesk-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/SpaceGrotesk-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/SpaceGrotesk-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/SpaceGrotesk-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk VF';
  src: url('fonts/SpaceGrotesk-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DM Serif Display';
  src: url('fonts/DMSerifDisplay-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DM Serif Display';
  src: url('fonts/DMSerifDisplay-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Bebas Neue';
  src: url('fonts/BebasNeue-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* ---------- Brand Colors ---------- */
  /* Dominante 60% */
  --gt-navy:        #1C1463;   /* Azul Marino — primary */
  --gt-navy-medium: #2E2580;   /* Marino Medio — support */
  --gt-navy-deep:   #120D44;   /* for 2x depth on dark cards */

  /* Acento 30% */
  --gt-crimson:     #CC0A24;   /* Rojo Carmesí — accent, CTA, badges */
  --gt-crimson-dark:#A5081D;

  /* Pilares emocionales (Pilar 1 · Conexión + Pilar 4 · Prueba social) */
  --gt-warm-dark:   #1A2B3C;   /* Marino cálido — fondo oscuro fotogénico para slides con foto */
  --gt-amber:       #E07B4A;   /* Ámbar humano — contenido íntimo, testimonios, historias vividas */

  /* Fondos claros */
  --gt-cream-blue:  #F7F5FF;   /* Crema Azulada — slide bg */
  --gt-ivory-red:   #FFF5F5;   /* Ivory Rojo — slide bg */

  /* Texto destacado */
  --gt-cream-yellow:#F5EBDD;   /* Beige cálido — text/highlight on dark bg */
  --gt-blush:       #FFF5F5;   /* Blanco Rosado — fondo cálido alternativo */

  /* Neutrales */
  --gt-white:       #FFFFFF;
  --gt-ink:         #0B0830;   /* casi-negro azulado */
  --gt-ink-2:       #3A3560;
  --gt-ink-3:       #6E6998;
  --gt-line:        #E5E1F5;   /* borders on light bg */
  --gt-line-dark:   #2A2273;   /* borders on navy bg */

  /* ---------- Semantic ---------- */
  --bg:             var(--gt-white);
  --bg-alt:         var(--gt-cream-blue);
  --bg-alt-warm:    var(--gt-ivory-red);
  --bg-inverse:     var(--gt-warm-dark);

  --fg:             var(--gt-ink);
  --fg-2:           var(--gt-ink-2);
  --fg-3:           var(--gt-ink-3);
  --fg-inverse:     var(--gt-white);
  --fg-on-dark:     var(--gt-amber);   /* primary text on dark — vibrant */
  --fg-on-dark-2:   var(--gt-cream-yellow); /* secondary text on dark — neutral */

  --accent:         var(--gt-crimson);
  --accent-fg:      var(--gt-white);

  --border:         var(--gt-line);
  --border-dark:    var(--gt-line-dark);

  /* ---------- Radii ---------- */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  16px;   /* default card */
  --r-lg:  24px;
  --r-xl:  32px;
  --r-pill:999px;

  /* ---------- Spacing (4pt) ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* ---------- Type families ---------- */
  --f-display:  'Outfit', 'Helvetica Neue', Arial, sans-serif;
  --f-hero:     'Bebas Neue', 'Outfit', sans-serif;
  --f-serif:    'DM Serif Display', 'Georgia', serif;
  --f-body:     'Outfit', 'Helvetica Neue', Arial, sans-serif;

  /* ---------- Type scale ---------- */
  --fs-hero:  clamp(56px, 9vw, 136px);
  --fs-h1:    clamp(40px, 5.5vw, 72px);
  --fs-h2:    clamp(28px, 3.5vw, 48px);
  --fs-h3:    24px;
  --fs-h4:    20px;
  --fs-body:  17px;
  --fs-small: 14px;
  --fs-micro: 12px;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-in:  cubic-bezier(.5,0,.8,.3);
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --dur-slow: 380ms;
}

/* =============================================================
   Base Typography
   ============================================================= */

.gt-display,
h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--fg);
  line-height: 1.02;
  text-wrap: balance;
}

.gt-hero {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--fs-hero);
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.gt-hero-bebas {
  font-family: var(--f-hero);
  font-weight: 400;
  font-size: var(--fs-hero);
  line-height: 0.9;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.gt-h1 { font-size: var(--fs-h1); text-transform: uppercase; }
.gt-h2 { font-size: var(--fs-h2); }
.gt-h3 { font-size: var(--fs-h3); font-weight: 600; }

.gt-serif,
.gt-subtitle {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.15;
  color: var(--fg-2);
}

.gt-subtitle { font-size: var(--fs-h3); }
.gt-subtitle-lg { font-family: var(--f-serif); font-style: italic; font-size: var(--fs-h2); line-height: 1.1; }

body, p, .gt-body {
  font-family: var(--f-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.5;
  color: var(--fg);
}

.gt-small { font-size: var(--fs-small); color: var(--fg-2); }
.gt-micro { font-size: var(--fs-micro); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--fg-3); }

.gt-eyebrow {
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* On-dark helpers */
.on-dark          { color: var(--fg-inverse); }
.on-dark .gt-subtitle,
.on-dark h1, .on-dark h2 { color: var(--fg-on-dark); }
.cream-yellow     { color: var(--gt-cream-yellow); }

/* =============================================================
   Primitives
   ============================================================= */

.gt-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--gt-crimson);
  color: var(--gt-white);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
}
.gt-badge--navy  { background: var(--gt-navy); }
.gt-badge--cream { background: var(--gt-cream-yellow); color: var(--gt-navy); }

.gt-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: var(--r-pill);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.gt-btn--primary   { background: var(--gt-crimson); color: var(--gt-white); }
.gt-btn--primary:hover  { background: var(--gt-crimson-dark); }
.gt-btn--primary:active { transform: scale(.97); }

.gt-btn--navy      { background: var(--gt-navy); color: var(--gt-white); }
.gt-btn--navy:hover{ background: var(--gt-navy-medium); }

.gt-btn--ghost     { background: transparent; color: var(--gt-navy); box-shadow: inset 0 0 0 2px var(--gt-navy); }
.gt-btn--ghost:hover { background: var(--gt-navy); color: var(--gt-white); }

/* Card */
.gt-card {
  background: var(--gt-white);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  padding: var(--s-5);
}
.gt-card--navy {
  background: var(--gt-navy);
  color: var(--fg-inverse);
  border-color: var(--border-dark);
}

/* Selection */
::selection { background: var(--gt-crimson); color: var(--gt-white); }