/* ============================================================
   ClaseCita — Colors & Type tokens
   "Tu clase, mejor explicada."
   ============================================================ */

/* ---------- Web fonts ----------
   Lexend (Google Fonts) is loaded via <link> in index.html for both
   <link rel="preconnect"> and the stylesheet — that's the canonical load
   path. Gotham Book is brand-specified as a secondary face but is not
   shipped here (separate web license required); CSS falls through to
   Lexend wherever --font-secondary is used. */

:root {
  /* ---------- Brand core (from BrandBook p.5) ---------- */
  --cc-orange:        #ff6600;   /* Naranja vibrante — primary action, energy */
  --cc-blue:          #005097;   /* Azul profundo  — confidence, structure   */
  --cc-yellow:        #ffbe1d;   /* Amarillo cálido — warmth, joy            */

  /* ---------- Tonal scales (derived; lifestyle ramps for each) ---------- */
  --cc-orange-50:     #fff4ec;
  --cc-orange-100:    #ffe1cc;
  --cc-orange-200:    #ffc299;
  --cc-orange-300:    #ff9c5c;
  --cc-orange-400:    #ff7e2b;
  --cc-orange-500:    #ff6600;   /* base */
  --cc-orange-600:    #e55600;
  --cc-orange-700:    #b84400;
  --cc-orange-800:    #8a3300;

  --cc-blue-50:       #eaf2fb;
  --cc-blue-100:      #cfe0f4;
  --cc-blue-200:      #93b9e3;
  --cc-blue-300:      #5790ce;
  --cc-blue-400:      #1f6cb6;
  --cc-blue-500:      #005097;   /* base */
  --cc-blue-600:      #00447f;
  --cc-blue-700:      #003766;
  --cc-blue-800:      #002a4d;

  --cc-yellow-50:     #fff8e0;
  --cc-yellow-100:    #ffeeae;
  --cc-yellow-200:    #ffe07a;
  --cc-yellow-300:    #ffd14a;
  --cc-yellow-400:    #ffc62f;
  --cc-yellow-500:    #ffbe1d;   /* base */
  --cc-yellow-600:    #e6a600;
  --cc-yellow-700:    #b88200;
  --cc-yellow-800:    #8a6100;

  /* ---------- Neutrals ---------- */
  --cc-ink:           #16181d;   /* near-black for text on light surfaces */
  --cc-ink-2:         #2a2f38;
  --cc-ink-3:         #4a5160;
  --cc-ink-4:         #707684;
  --cc-line:          #e6e8ee;
  --cc-line-2:        #eef0f4;
  --cc-surface-1:     #ffffff;
  --cc-surface-2:     #f7f8fb;   /* page bg, cards on white */
  --cc-surface-3:     #eef0f5;

  /* ---------- Semantic ---------- */
  --cc-success:       #22a06b;
  --cc-warning:       #ffbe1d;   /* uses brand yellow */
  --cc-danger:        #d6443a;
  --cc-info:          #1f6cb6;

  /* ---------- Foreground / background semantic vars ---------- */
  --fg-1:             var(--cc-ink);
  --fg-2:             var(--cc-ink-2);
  --fg-3:             var(--cc-ink-3);
  --fg-muted:         var(--cc-ink-4);
  --fg-on-brand:      #ffffff;
  --bg-1:             var(--cc-surface-1);
  --bg-2:             var(--cc-surface-2);
  --bg-3:             var(--cc-surface-3);
  --bg-brand:         var(--cc-orange-500);
  --bg-brand-soft:    var(--cc-orange-50);
  --bg-blue:          var(--cc-blue-500);
  --bg-yellow:        var(--cc-yellow-500);
  --border:           var(--cc-line);
  --border-strong:    var(--cc-ink-4);

  /* ---------- Type families ---------- */
  --font-display:     'Lexend', system-ui, -apple-system, sans-serif;
  --font-body:        'Lexend', system-ui, -apple-system, sans-serif;
  --font-secondary:   'Gotham Book', 'Lexend', system-ui, sans-serif;
  --font-mono:        ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Type scale (rem-based, 16px root) ---------- */
  --fs-display-1:     clamp(2.75rem, 4vw + 1rem, 4.5rem);  /* 44–72 */
  --fs-display-2:     clamp(2.25rem, 3vw + 1rem, 3.5rem);  /* 36–56 */
  --fs-h1:            2.25rem;   /* 36 */
  --fs-h2:            1.75rem;   /* 28 */
  --fs-h3:            1.375rem;  /* 22 */
  --fs-h4:            1.125rem;  /* 18 */
  --fs-body:          1rem;      /* 16 */
  --fs-small:         0.875rem;  /* 14 */
  --fs-micro:         0.75rem;   /* 12 */

  --lh-tight:         1.1;
  --lh-snug:          1.25;
  --lh-normal:        1.5;
  --lh-loose:         1.65;

  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;

  /* ---------- Spacing (4px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;

  /* ---------- Radii (soft, friendly) ---------- */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-pill: 999px;

  /* ---------- Elevation ---------- */
  --shadow-1: 0 1px 2px rgba(22,24,29,.06), 0 1px 1px rgba(22,24,29,.04);
  --shadow-2: 0 4px 12px rgba(22,24,29,.08), 0 1px 2px rgba(22,24,29,.04);
  --shadow-3: 0 12px 28px rgba(22,24,29,.10), 0 4px 8px rgba(22,24,29,.05);
  --shadow-brand: 0 10px 24px rgba(255,102,0,.28);
  --shadow-blue:  0 10px 24px rgba(0,80,151,.22);

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(.22,.61,.36,1);
  --ease-in:    cubic-bezier(.55,.06,.68,.19);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
}

/* ============================================================
   Base + semantic element styles
   ============================================================ */
html { color-scheme: light; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-2);
  -webkit-font-smoothing: antialiased;
}

h1, .cc-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}
h2, .cc-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}
h3, .cc-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
}
h4, .cc-h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
}
.cc-display-1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-display-1);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.cc-display-2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display-2);
  line-height: 1.05;
  letter-spacing: -0.015em;
}
p, .cc-p {
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--fg-2);
  text-wrap: pretty;
}
.cc-eyebrow {
  font-family: var(--font-secondary);
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--cc-orange-700);
}
.cc-small  { font-size: var(--fs-small); color: var(--fg-3); }
.cc-micro  { font-size: var(--fs-micro); color: var(--fg-muted); letter-spacing: 0.02em; }

a { color: var(--cc-blue-500); text-decoration: none; }
a:hover { color: var(--cc-blue-600); text-decoration: underline; }

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-3);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-xs);
}