/* ============================================================
   SALUHACKERS — Core Design Tokens
   Colors + Typography foundation.
   Vibe: vintage sci-fi pulp poster × hacker terminal × clinical.
   Warm cream paper, charcoal-green ink, deep teal, terminal green,
   terracotta rust. Halftone grain, condensed display type, mono accents.
   ============================================================ */

/* ---- Fonts (Google Fonts substitutions — see README) ---- */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Oswald:wght@400;500;600;700&family=Barlow:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* ============================================================
     COLOR — RAW PALETTE
     Sampled from the brand poster, refined for screen legibility.
     ============================================================ */

  /* Paper / canvas — pure white surfaces, faint neutral steps below */
  --paper-100: #FFFFFF;   /* raised cards */
  --paper-200: #FFFFFF;   /* default page background — pure white */
  --paper-300: #F2F1EC;   /* sunken wells, hairline fills */
  --paper-400: #DFDDD4;   /* muted borders on paper */

  /* Ink — charcoal with a green-black cast (poster lettering) */
  --ink-900: #14201A;     /* primary text, near-black */
  --ink-700: #283330;     /* strong secondary text */
  --ink-500: #4A554F;     /* muted text */
  --ink-300: #7C857D;     /* faint text, disabled */

  /* Teal — deep clinical cool (primary brand) */
  --teal-900: #16383A;
  --teal-700: #234E50;    /* PRIMARY brand teal */
  --teal-500: #357072;
  --teal-300: #6FA0A0;
  --teal-100: #C6DAD8;

  /* Terminal / sage green — the "hacker" glow (accent) */
  --green-900: #1C4A2E;
  --green-700: #2E7D4F;
  --green-500: #3FAE6A;   /* sage */
  --green-term: #34D17E;  /* bright CRT terminal green — accents only */
  --green-glow: #5BF6A6;  /* glow highlight */
  --green-100: #CDE8D6;

  /* Terracotta / rust — warm energy (secondary CTA / highlight) */
  --rust-900: #7A3A1E;
  --rust-700: #A8552E;    /* SECONDARY accent */
  --rust-500: #C2683E;
  --rust-300: #DC9A72;
  --rust-100: #F0D7C4;

  /* Olive / sand — tertiary warm neutral */
  --olive-700: #6E6838;
  --olive-500: #8A8350;
  --olive-300: #BAB385;

  /* Violet — "pro" tier (advanced) */
  --purple-900: #3D2A66;
  --purple-700: #573D90;
  --purple-500: #7558B4;
  --purple-300: #A793D6;
  --purple-100: #E6DEF4;

  /* ============================================================
     COLOR — SEMANTIC TOKENS
     ============================================================ */
  --bg:            var(--paper-200);
  --bg-raised:     var(--paper-100);
  --bg-sunken:     var(--paper-300);
  --bg-inverse:    var(--ink-900);   /* dark "terminal" surfaces */

  --fg:            var(--ink-900);   /* primary text */
  --fg-soft:       var(--ink-700);
  --fg-muted:      var(--ink-500);
  --fg-faint:      var(--ink-300);
  --fg-on-dark:    var(--paper-100); /* text on ink/teal surfaces */
  --fg-on-accent:  var(--paper-100);

  --brand:         var(--teal-700);
  --brand-strong:  var(--teal-900);
  --accent:        var(--rust-500);  /* warm CTA / energy */
  --accent-strong: var(--rust-700);
  --signal:        var(--green-700); /* "hacker" highlight, links */
  --signal-bright: var(--green-term);

  --border:        var(--paper-400);
  --border-strong: var(--ink-300);
  --border-ink:    var(--ink-900);

  --success:       var(--green-700);
  --warning:       var(--rust-500);
  --danger:        #B23A33;          /* heartbeat red */
  --info:          var(--teal-500);

  /* Course-level accents (iniciados / amateurs / pros) */
  --level-init:    var(--green-500);
  --level-amateur: var(--teal-500);
  --level-pro:     var(--purple-500);

  /* ============================================================
     TYPOGRAPHY — FAMILIES
     ============================================================ */
  --font-display: 'Anton', 'Oswald', 'Arial Narrow', sans-serif; /* huge condensed caps */
  --font-cond:    'Oswald', 'Arial Narrow', sans-serif;          /* condensed headings/labels */
  --font-body:    'Barlow', system-ui, -apple-system, sans-serif;/* UI + reading text */
  --font-mono:    'Space Mono', 'JetBrains Mono', ui-monospace, monospace; /* terminal / code / kicker */

  /* ---- Type scale (1.250 major-third-ish, tuned) ---- */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md:   1.125rem;  /* 18px */
  --text-lg:   1.375rem;  /* 22px */
  --text-xl:   1.75rem;   /* 28px */
  --text-2xl:  2.25rem;   /* 36px */
  --text-3xl:  3rem;      /* 48px */
  --text-4xl:  4rem;      /* 64px */
  --text-5xl:  5.5rem;    /* 88px */

  --leading-tight: 1.05;
  --leading-snug:  1.25;
  --leading-body:  1.55;

  --tracking-mega:  -0.01em;
  --tracking-caps:  0.06em;   /* condensed all-caps headings */
  --tracking-kick:  0.22em;   /* mono kickers / eyebrows */

  /* ============================================================
     SPACING — 4px base grid
     ============================================================ */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  /* ---- Radii — restrained, slightly mechanical ---- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-pill: 999px;

  /* ---- Borders ---- */
  --bw: 1.5px;            /* default hairline is assertive */
  --bw-thick: 2.5px;      /* framed / stamped elements */

  /* ---- Shadows — low, warm, ink-tinted (paper, not glossy) ---- */
  --shadow-sm: 0 1px 2px rgba(20,32,26,0.10);
  --shadow-md: 0 2px 6px rgba(20,32,26,0.12), 0 1px 2px rgba(20,32,26,0.10);
  --shadow-lg: 0 8px 24px rgba(20,32,26,0.16);
  --shadow-stamp: 3px 3px 0 var(--ink-900);   /* hard "printed" offset */
  --glow-term: 0 0 0 1px rgba(52,209,126,0.5), 0 0 14px rgba(52,209,126,0.45);

  /* ---- Headline gradient — 45°, left→right. Pastel teal → green.
     Bright greens (--green-term / --green-glow) are RESERVED for CTAs &
     highlights, never headlines. ---- */
  --grad-headline: linear-gradient(45deg, var(--teal-500) 0%, var(--teal-700) 38%, var(--green-700) 100%);
  /* paler variant for dark / terminal surfaces (still no bright green) */
  --grad-headline-bright: linear-gradient(45deg, var(--teal-300) 0%, var(--teal-500) 45%, var(--green-500) 100%);
}

/* Apply the 45° headline gradient to any display/condensed heading text.
   Brand rule: large headlines are gradient-styled. */
.sh-grad {
  background: var(--grad-headline);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.sh-grad-bright {
  background: var(--grad-headline-bright);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */
.sh-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-mega);
  text-transform: uppercase;
  color: var(--fg);
}
.sh-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mega);
  color: var(--fg);
}
.sh-h2 {
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg);
}
.sh-h3 {
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg);
}
.sh-kicker {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-kick);
  color: var(--signal);
}
.sh-lead {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--fg-soft);
}
.sh-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--fg-soft);
}
.sh-small {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--fg-muted);
}
.sh-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0;
  color: var(--fg-soft);
}
.sh-label {
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--fg-muted);
}

/* Bright terminal text on dark surfaces */
.sh-term {
  font-family: var(--font-mono);
  color: var(--green-term);
  text-shadow: 0 0 8px rgba(52,209,126,0.5);
}