/* ============================================================
   MENTTOR — Design Tokens · Rebrand v1.1
   Archivo + Hanken Grotesk · Navy #1A3D5D + Gold #EAB534 · Crema
   "Del caos a la ejecución. Con sistema."
   ============================================================ */

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

:root {
  /* ---------- BRAND CORE ---------- */
  --navy-900: #0F2438;
  --navy-800: #16314A;
  --navy-700: #1A3D5D;   /* PRIMARY brand navy */
  --navy-600: #234B70;
  --navy-500: #2C5478;
  --navy-300: #7392AC;
  --navy-100: #D7E0E8;

  --gold-700: #A8780F;   /* pressed */
  --gold-600: #C9921A;   /* hover / deep gold */
  --gold-500: #EAB534;   /* PRIMARY brand gold (firma) */
  --gold-400: #F0C75A;
  --gold-300: #F3D586;
  --gold-100: #FBF1D4;

  /* ---------- NEUTRALS ---------- */
  --cream:    #F4F1EB;   /* main background */
  --paper:    #FAF8F3;
  --paper-2:  #F1ECE2;
  --mist:     #F4F1EB;   /* alias -> cream (compat) */
  --mist-2:   #E9E4D9;
  --white:    #FFFFFF;
  --border:   #E4DDD0;
  --charcoal: #1B2A38;
  --ink:      #1B2A38;

  /* ---------- TEXT ---------- */
  --fg-1: #1B2A38;       /* ink — primary text */
  --fg-2: #5C6B79;       /* muted — body */
  --fg-3: #8A96A1;       /* faint — captions */
  --fg-on-dark-1: #FFFFFF;
  --fg-on-dark-2: #D7E0E8;
  --fg-on-dark-3: #7392AC;

  /* ---------- SEMANTIC ---------- */
  --accent:        var(--gold-500);
  --accent-ink:    var(--navy-700);
  --surface:       var(--white);
  --surface-mist:  var(--cream);
  --surface-paper: var(--paper);
  --line:          #E4DDD0;
  --line-mist:     #E4DDD0;
  --line-rule:     #1A3D5D;
  --success: #2E7D5B;
  --danger:  #B23B3B;

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Archivo', system-ui, -apple-system, sans-serif;  /* títulos */
  --font-sans:    'Archivo', system-ui, -apple-system, sans-serif;  /* UI / headings */
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, sans-serif; /* cuerpo */

  /* ---------- RADII ---------- */
  --r-xs: 4px;
  --r-sm: 9px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---------- SPACING (8pt base) ---------- */
  --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;

  /* ---------- SHADOWS ---------- */
  --shadow-sm: 0 1px 2px rgba(15,36,56,.06);
  --shadow-md: 0 8px 28px -8px rgba(15,36,56,.18);
  --shadow-lg: 0 24px 60px -20px rgba(15,36,56,.30);
  --shadow-gold: 0 10px 30px -8px rgba(234,181,52,.42);
  --shadow-card-tape: 6px 6px 0 rgba(15,36,56,.16);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-in-out: cubic-bezier(.65,.05,.36,1);
  --dur-fast: 160ms;
  --dur-med: 240ms;
  --dur-slow: 560ms;
}

/* ============================================================
   SEMANTIC TYPOGRAPHY
   ============================================================ */

.t-impact {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1;
}

.t-display {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: .96;
  letter-spacing: -.04em;
  color: var(--navy-700);
}

.t-h1 { font-family: var(--font-display); font-weight: 900; font-size: 2.25rem; line-height: 1.04; letter-spacing: -.035em; color: var(--navy-700); }
.t-h2 { font-family: var(--font-display); font-weight: 800; font-size: 1.625rem; line-height: 1.12; letter-spacing: -.025em; color: var(--navy-700); }
.t-h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.22; color: var(--navy-700); }

.t-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--gold-600);
}

.t-lead { font-family: var(--font-body); font-weight: 400; font-size: 1.125rem; line-height: 1.6; color: var(--fg-2); }
.t-body { font-family: var(--font-body); font-weight: 400; font-size: 1rem; line-height: 1.6; color: var(--fg-2); }
.t-small { font-family: var(--font-body); font-weight: 400; font-size: .875rem; line-height: 1.5; color: var(--fg-3); }

.t-em { font-style: normal; font-weight: 800; color: var(--gold-500); }
.t-em-ink { font-style: normal; font-weight: 800; color: var(--navy-700); }

a { color: var(--navy-600); text-underline-offset: 3px; }