/* ============================================================
   LERNHACKS DESIGN SYSTEM — Tokens
   Drop into any HTML:  <link rel="stylesheet" href="colors_and_type.css">
   Or copy the :root block into your own stylesheet.
   ============================================================ */

/* Aptos is Microsoft's default UI font (2023) — not available as a free webfont.
   Closest Google Fonts match: "Albert Sans" (humanist neo-grotesque, tall x-height,
   open apertures, single-storey a — same family of forms as Aptos).
   Stack falls through to Aptos → Segoe UI Variable → system, so users on Windows
   see real Aptos. Antonio stays for the display wordmark. */
@import url('https://fonts.googleapis.com/css2?family=Antonio:wght@400;600;700&family=Albert+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* ---------- COLOR ---------- */

  /* Brand */
  --lh-red:           #E40046;   /* sampled from logo */
  --lh-red-hover:     #B8003A;   /* ~12% darker */
  --lh-red-soft:      #FCE6EE;   /* tint for backgrounds, badges */

  /* Ink */
  --lh-ink:           #111111;
  --lh-ink-2:         #2B2B2B;
  --lh-ink-3:         #555555;   /* secondary copy */
  --lh-ink-4:         #8A8786;   /* muted, captions */

  /* Paper */
  --lh-paper:         #FFFFFF;
  --lh-paper-2:       #FAF9F7;   /* off-white section bg */
  --lh-paper-3:       #F5F2EE;   /* warm light */
  --lh-paper-4:       #EDEAE6;   /* alternating bands */

  /* Lines */
  --lh-line:          #E5E2DD;   /* 1px hairline */
  --lh-line-strong:   #C9C4BD;

  /* Semantic foreground/background aliases */
  --fg-1:             var(--lh-ink);
  --fg-2:             var(--lh-ink-3);
  --fg-3:             var(--lh-ink-4);
  --fg-accent:        var(--lh-red);
  --fg-on-accent:     var(--lh-paper);
  --bg-1:             var(--lh-paper);
  --bg-2:             var(--lh-paper-2);
  --bg-3:             var(--lh-paper-3);
  --bg-accent:        var(--lh-red);
  --border-1:         var(--lh-line);
  --border-2:         var(--lh-line-strong);
  --border-accent:    var(--lh-red);

  /* Status (rarely used; brand stays mono+red) */
  --status-success:   #1E7A3E;
  --status-warning:   #B5650F;
  --status-danger:    var(--lh-red);
  --status-info:      #1B4F8A;

  /* ---------- TYPE ---------- */

  --font-display:     'Antonio', 'Oswald', 'Helvetica Neue', sans-serif;
  --font-sans:        'Aptos', 'Aptos Display', 'Albert Sans', 'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-mono:        ui-monospace, 'SFMono-Regular', 'JetBrains Mono', Menlo, monospace;

  /* Type scale — 1.250 (major third) on a 16px base */
  --fs-12: 0.75rem;    /* 12px - micro labels */
  --fs-14: 0.875rem;   /* 14px - small */
  --fs-16: 1rem;       /* 16px - body */
  --fs-18: 1.125rem;   /* 18px - body large */
  --fs-20: 1.25rem;    /* 20px - lead */
  --fs-24: 1.5rem;     /* 24px - h4 */
  --fs-30: 1.875rem;   /* 30px - h3 */
  --fs-38: 2.375rem;   /* 38px - h2 */
  --fs-48: 3rem;       /* 48px - h1 */
  --fs-72: 4.5rem;     /* 72px - display */
  --fs-96: 6rem;       /* 96px - hero wordmark scale */

  --lh-tight:    1.05;
  --lh-snug:     1.2;
  --lh-normal:   1.5;
  --lh-relaxed:  1.65;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0em;
  --tracking-loose:  0.04em;
  --tracking-caps:   0.08em;

  /* ---------- LAYOUT ---------- */

  /* 4px base spacing scale */
  --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;

  --container-max: 1280px;
  --content-max:    720px;

  /* Radii */
  --radius-sm:    4px;
  --radius-md:   10px;
  --radius-lg:   14px;   /* matches the wordmark frame */
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* Borders */
  --border-thin:    1px solid var(--lh-line);
  --border-strong:  2px solid var(--lh-ink);
  --border-frame:   2px solid var(--lh-red);   /* the signature motif */

  /* Shadows — used very sparingly */
  --shadow-sm: 0 1px 2px rgba(17,17,17,0.06);
  --shadow-md: 0 6px 24px -8px rgba(17,17,17,0.12);
  --shadow-lg: 0 18px 48px -16px rgba(17,17,17,0.18);

  /* Motion */
  --ease-out:      cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:      150ms;
  --dur-base:      220ms;
  --dur-slow:      320ms;

  /* Focus */
  --focus-ring: 0 0 0 2px var(--lh-paper), 0 0 0 4px var(--lh-red);
}


/* ============================================================
   SEMANTIC ELEMENT STYLES — opt in via class .lh-prose or apply
   to the element selectors below if you want global defaults.
   ============================================================ */

.lh-base, .lh-prose {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display — for hero wordmarks and giant headlines */
.lh-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(var(--fs-48), 8vw, var(--fs-96));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--fg-1);
}

/* Headlines */
.lh-h1, .lh-prose h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(var(--fs-38), 5vw, var(--fs-72));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--fg-1);
  margin: 0 0 var(--space-6);
}

.lh-h2, .lh-prose h2 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: var(--fs-38);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0 0 var(--space-5);
}

.lh-h3, .lh-prose h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--space-4);
}

.lh-h4, .lh-prose h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--space-3);
}

/* Overline / eyebrow label */
.lh-overline {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-accent);
}

/* Body */
.lh-prose p, .lh-body {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
  margin: 0 0 var(--space-4);
}

.lh-lead {
  font-size: var(--fs-20);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
}

.lh-small, .lh-prose small {
  font-size: var(--fs-14);
  color: var(--fg-3);
}

/* Inline */
.lh-prose strong, .lh-prose b { color: var(--fg-1); font-weight: 700; }
.lh-prose a {
  color: var(--fg-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
.lh-prose a:hover { color: var(--lh-red-hover); }

.lh-prose code, .lh-mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-3);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sm);
}