/* =========================================================
   CESBA Virtual — Colors & Typography
   Source of truth for tokens used across the site,
   slides, mocks, and prototypes.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&family=Montserrat:wght@400;500;600;700&display=swap');

:root {
  /* ---------- Brand colors ---------- */
  --cesba-green:        #58FEBD;   /* Primary brand green (logo "VIRTUAL") */
  --cesba-green-600:    #2FE6A2;   /* Slightly deeper green for hover */
  --cesba-green-700:    #14B57E;   /* Pressed / on-light surface */
  --cesba-green-100:    #D6FFEC;   /* Tint for soft surfaces */

  --cesba-navy:         #102047;   /* Primary brand navy — backgrounds, footer, hero */
  --cesba-navy-800:     #0A1736;   /* Deeper navy for layering */
  --cesba-navy-900:     #060E24;   /* Near-black navy */
  --cesba-navy-700:     #1B2D5E;   /* Card on navy */
  --cesba-navy-500:     #2E4380;   /* Borders / dividers on navy */

  --cesba-white:        #FFFFFF;
  --cesba-off-white:    #F7F9FC;   /* Page bg on light surfaces */
  --cesba-mist:         #E6ECF5;   /* Light hairline / divider */

  /* ---------- Neutral scale (cool, slight navy tint) ---------- */
  --neutral-50:   #F7F9FC;
  --neutral-100:  #EEF2F8;
  --neutral-200:  #DDE4EF;
  --neutral-300:  #C2CCDD;
  --neutral-400:  #94A1B8;
  --neutral-500:  #6B7891;
  --neutral-600:  #4D5870;
  --neutral-700:  #34405A;
  --neutral-800:  #1F2A44;
  --neutral-900:  #0F1830;

  /* ---------- Semantic — surfaces ---------- */
  --bg-primary:       var(--cesba-navy);       /* default site bg */
  --bg-secondary:     var(--cesba-navy-800);
  --bg-elevated:      var(--cesba-navy-700);
  --bg-light:         var(--cesba-white);
  --bg-light-alt:     var(--cesba-off-white);

  /* ---------- Semantic — foreground / text ---------- */
  --fg-on-dark:        var(--cesba-white);
  --fg-on-dark-muted:  rgba(255,255,255,0.72);
  --fg-on-dark-subtle: rgba(255,255,255,0.50);

  --fg-on-light:        var(--cesba-navy);
  --fg-on-light-muted:  var(--neutral-600);
  --fg-on-light-subtle: var(--neutral-500);

  --fg-accent:          var(--cesba-green);
  --fg-link:            var(--cesba-green-700);

  /* ---------- Semantic — actions / states ---------- */
  --btn-primary-bg:        var(--cesba-green);
  --btn-primary-fg:        var(--cesba-navy);
  --btn-primary-bg-hover:  var(--cesba-green-600);
  --btn-primary-bg-press:  var(--cesba-green-700);

  --btn-secondary-bg:        transparent;
  --btn-secondary-fg:        var(--cesba-white);
  --btn-secondary-border:    var(--cesba-white);
  --btn-secondary-bg-hover:  rgba(255,255,255,0.08);

  --btn-ghost-fg:           var(--cesba-green);
  --btn-ghost-fg-hover:     var(--cesba-white);

  /* ---------- Status (kept on-brand, restrained) ---------- */
  --status-success: #2FE6A2;
  --status-info:    #6FA8FF;
  --status-warn:    #FFC857;
  --status-danger:  #FF6B6B;

  /* ---------- Borders ---------- */
  --border-on-dark:        rgba(255,255,255,0.14);
  --border-on-dark-strong: rgba(255,255,255,0.28);
  --border-on-light:       var(--neutral-200);
  --border-focus:          var(--cesba-green);

  /* ---------- Radii ---------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---------- Spacing scale (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;
  --space-32: 128px;

  /* ---------- Shadows ---------- */
  --shadow-sm:  0 1px 2px rgba(16, 32, 71, 0.08);
  --shadow-md:  0 6px 18px rgba(16, 32, 71, 0.10);
  --shadow-lg:  0 18px 40px rgba(16, 32, 71, 0.18);
  --shadow-glow: 0 0 0 4px rgba(88, 254, 189, 0.28);
  --shadow-on-dark: 0 12px 32px rgba(0,0,0,0.35);

  /* ---------- Typography — families ----------
     Display (titulares): Poppins
     Body (texto):        Montserrat
     Both Google Fonts, loaded via @import above. */
  --font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans:    'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  /* ---------- Type scale ---------- */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  64px;
  --text-6xl:  84px;

  /* ---------- Weights ---------- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    900;

  /* ---------- Line heights ---------- */
  --lh-tight:   1.05;
  --lh-snug:    1.20;
  --lh-normal:  1.45;
  --lh-relaxed: 1.65;

  /* ---------- Tracking ---------- */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide:  0.04em;
  --tracking-eyebrow: 0.16em;  /* For ALL-CAPS labels — used heavily on site */

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 140ms;
  --duration-base: 220ms;
  --duration-slow: 380ms;
}

/* =========================================================
   Semantic typography classes
   Use these as your defaults; override inline only when needed.
   ========================================================= */

.t-display, h1.cesba {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: clamp(40px, 6vw, var(--text-6xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

.t-h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--text-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

.t-h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-3xl);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.t-h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-xl);
  line-height: var(--lh-snug);
}

.t-h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  line-height: var(--lh-snug);
}

.t-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  line-height: 1;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--cesba-green);
}

.t-lead {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-lg);
  line-height: var(--lh-relaxed);
}

.t-body {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
}

.t-body-sm {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
}

.t-caption {
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-xs);
  line-height: var(--lh-normal);
  color: var(--fg-on-light-muted);
}

.t-button {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.t-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}