/* ============================================================
   Eduardo Lan Design System — Components
   Reusable visual primitives. Pairs with tokens.css.
   ============================================================ */

@import url('./tokens.css');

/* ============================================================
   Container
   ============================================================ */
.container {
  max-width: var(--container-default);
  margin: 0 auto;
  padding: var(--space-3xl) var(--space-lg);
}

.container--narrow { max-width: var(--container-narrow); }
.container--wide { max-width: var(--container-wide); }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  background: var(--gradient-executive);
  padding: var(--space-4xl) var(--space-lg);
  position: relative;
  overflow: hidden;
  color: var(--bg-white);
}

.hero__content {
  max-width: var(--container-default);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.hero__badge {
  display: inline-block;
  background: rgba(106, 163, 201, 0.15);
  color: var(--color-ice);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-full);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-lg);
  border: 1px solid rgba(106, 163, 201, 0.3);
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: var(--fw-regular);
  color: var(--bg-white);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--space-md);
}

.hero__subtitle {
  font-size: 20px;
  color: var(--slate-300);
  max-width: 600px;
  line-height: var(--lh-body);
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 14px 28px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
  text-decoration: none;
  white-space: nowrap;
}

.btn--primary {
  background: var(--color-navy);
  color: var(--bg-white);
}
.btn--primary:hover {
  background: var(--color-navy-deep);
  color: var(--bg-white);
}

.btn--teal {
  background: var(--color-teal);
  color: var(--bg-white);
}
.btn--teal:hover {
  background: #2E9AA8;
  color: var(--bg-white);
}

.btn--gold {
  background: var(--color-gold);
  color: var(--color-navy-deep);
}

.btn--dark {
  background: var(--color-navy-deep);
  color: var(--bg-white);
}

.btn--secondary {
  background: var(--bg-light);
  color: var(--color-navy);
  border: 1px solid var(--slate-200);
}

.btn--outline {
  background: transparent;
  color: var(--color-navy);
  border: 2px solid var(--color-navy);
}

.btn--ghost {
  background: transparent;
  color: var(--color-steel);
}

/* ============================================================
   Cards
   ============================================================ */
.card {
  padding: var(--space-xl);
  border-radius: var(--radius-xl);
  position: relative;
  overflow: hidden;
}

.card__label {
  display: inline-block;
  font-size: var(--fs-code);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  margin-bottom: var(--space-md);
  padding: 6px 12px;
  border-radius: var(--radius-full);
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-regular);
  margin-bottom: var(--space-sm);
  line-height: var(--lh-heading);
}

.card__body {
  font-size: 15px;
  line-height: var(--lh-body);
  opacity: 0.92;
}

.card--light {
  background: var(--bg-white);
  color: var(--text-primary);
  box-shadow: var(--shadow-md);
}
.card--light .card__label {
  background: var(--bg-light);
  color: var(--color-navy);
}
.card--light .card__title {
  color: var(--color-navy-deep);
}

.card--dark {
  background: var(--color-navy-deep);
  color: var(--bg-white);
}
.card--dark .card__label {
  background: rgba(106, 163, 201, 0.2);
  color: var(--color-ice);
}
.card--dark .card__title {
  color: var(--bg-white);
}

.card--navy {
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-medium) 100%);
  color: var(--bg-white);
}
.card--navy .card__label {
  background: rgba(255, 255, 255, 0.15);
  color: var(--bg-white);
}
.card--navy .card__title {
  color: var(--bg-white);
}

.card--teal {
  background: linear-gradient(135deg, var(--color-teal) 0%, var(--color-teal-light) 100%);
  color: var(--bg-white);
}
.card--teal .card__label {
  background: rgba(255, 255, 255, 0.2);
  color: var(--bg-white);
}
.card--teal .card__title {
  color: var(--bg-white);
}

/* ============================================================
   Quote card
   ============================================================ */
.quote {
  background: var(--color-navy);
  padding: var(--space-2xl);
  border-radius: var(--radius-xl);
  color: var(--bg-white);
  position: relative;
  overflow: hidden;
}

.quote::before {
  content: '"';
  position: absolute;
  top: var(--space-lg);
  left: var(--space-xl);
  font-family: var(--font-display);
  font-size: 120px;
  color: rgba(255, 255, 255, 0.08);
  line-height: 1;
}

.quote__text {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: var(--fw-regular);
  line-height: 1.4;
  margin-bottom: var(--space-xl);
  position: relative;
  z-index: 1;
}

.quote__author {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.quote__avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-steel) 0%, var(--color-sky) 100%);
}

.quote__name {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
}

.quote__title {
  font-size: var(--fs-meta);
  color: var(--slate-300);
}

/* ============================================================
   Step grid (for infographics, methodology cards)
   ============================================================ */
.step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-lg);
}

.step {
  padding: var(--space-lg);
  background: var(--bg-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--color-teal);
  color: var(--bg-white);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: 22px;
  margin-bottom: var(--space-md);
}

.step__title {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--color-navy);
  margin-bottom: var(--space-sm);
  line-height: var(--lh-heading);
}

.step__body {
  font-size: var(--fs-body);
  color: var(--text-body);
  line-height: var(--lh-body);
}

/* ============================================================
   Section header
   ============================================================ */
.section {
  margin-bottom: var(--space-3xl);
}

.section__header {
  margin-bottom: var(--space-xl);
}

.section__title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-regular);
  color: var(--color-navy-deep);
  margin-bottom: var(--space-sm);
}

.section__description {
  font-size: var(--fs-body);
  color: var(--text-secondary);
  max-width: 600px;
}

/* ============================================================
   Badge / pill
   ============================================================ */
.badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.badge--teal {
  background: var(--color-teal);
  color: var(--bg-white);
}

.badge--gold {
  background: transparent;
  color: var(--color-navy);
  border: 2px solid var(--color-gold);
}

.badge--navy {
  background: var(--color-navy);
  color: var(--bg-white);
}

/* ============================================================
   CTA strip (used in landing pages, infographics)
   ============================================================ */
.cta-strip {
  background: var(--gradient-executive);
  padding: var(--space-2xl) var(--space-lg);
  text-align: center;
  color: var(--bg-white);
}

.cta-strip__title {
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--bg-cream);
  margin-bottom: var(--space-lg);
  line-height: var(--lh-heading);
}

.cta-strip__url-box {
  display: inline-block;
  background: var(--bg-cream);
  border: 3px solid var(--color-gold);
  border-radius: var(--radius-sm);
  padding: 16px 32px;
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-navy);
}

.cta-strip__meta {
  margin-top: var(--space-md);
  font-size: var(--fs-body);
  color: rgba(250, 251, 252, 0.6);
}

/* ============================================================
   Footer (signature footer with tagline + attribution)
   ============================================================ */
.brand-footer {
  background: var(--color-navy-deep);
  padding: var(--space-lg) var(--space-xl);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.brand-footer__tagline {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  color: var(--bg-cream);
}

.brand-footer__attribution {
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  color: var(--slate-400);
}

/* ============================================================
   Top accent bar (used on infographics)
   ============================================================ */
.top-accent {
  height: 10px;
  background: var(--color-teal);
}

.top-accent--gold {
  background: var(--color-gold);
}

/* ============================================================
   Form elements
   ============================================================ */
.input {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--text-primary);
  background: var(--bg-white);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-sm);
  transition: border-color 0.2s ease;
}

.input:focus {
  outline: none;
  border-color: var(--color-teal);
  box-shadow: 0 0 0 3px rgba(58, 170, 185, 0.1);
}

.label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  color: var(--color-navy);
  margin-bottom: var(--space-sm);
}