/* ============================================================
   JERK ALERT — Foundations: Color + Type tokens
   "Alert the Jerk. Stay Safe. Be Excellent!"
   Import this file wherever brand styling is needed.
   ============================================================ */

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

:root {
  /* ---------- BRAND CORE ---------- */
  --ja-alert:        #FB4D1A;  /* primary action / "alert" — the loud red-orange */
  --ja-alert-ink:    #DD3A0B;  /* pressed / hover-dark */
  --ja-alert-tint:   #FFE9E0;  /* wash behind alert content */
  --ja-orange:       #F97316;  /* mid orange — shield, secondary warmth */
  --ja-orange-tint:  #FFEBD6;
  --ja-yellow:       #FFC02E;  /* golden — mascot, rating meter, highlights */
  --ja-yellow-deep:  #F5A623;
  --ja-yellow-tint:  #FFF3D2;
  --ja-teal:         #15677D;  /* secondary accent — links, info, mascot outline */
  --ja-teal-deep:    #0E4D5E;
  --ja-teal-tint:    #DCEEF2;

  /* ---------- INK / NEUTRALS (warm, faint teal cast) ---------- */
  --ja-ink:          #1E2D33;  /* headings, "jerk" wordmark */
  --ja-ink-soft:     #33454D;
  --fg1:             #1E2D33;  /* primary text */
  --fg2:             #53636B;  /* secondary text */
  --fg3:             #808E95;  /* muted / meta / ".org" gray */
  --fg-on-dark:      #FFF8F0;

  /* ---------- SURFACES ---------- */
  --bg:              #FFFFFF;  /* base page */
  --bg-warm:         #FFF9F2;  /* warm cream section */
  --bg-2:            #FAF5EE;  /* card-on-page panel */
  --bg-ink:          #1E2D33;  /* dark footer / hero overlay */
  --bg-ink-2:        #16242A;

  /* ---------- LINES ---------- */
  --line:            #EDE7DD;  /* hairline borders */
  --line-strong:     #DDD5C8;  /* visible dividers, input borders */
  --line-ink:        #2E4047;  /* borders on dark surfaces */

  /* ---------- SEMANTIC ---------- */
  --danger:          #DD3A0B;  /* same family as alert */
  --warn:            #F5A623;
  --info:            #15677D;
  --awesome:         #18A06A;  /* "Be Excellent!" / cleared / verified — INTRODUCED green (see README) */
  --awesome-tint:    #DBF3E7;

  /* ---------- JERK METER scale (1 mild → 5 severe) ---------- */
  --jerk-1:          #FFC02E;  /* eh, minor */
  --jerk-2:          #F9A52A;
  --jerk-3:          #F97316;  /* notable */
  --jerk-4:          #F4541A;
  --jerk-5:          #DD3A0B;  /* full jerk */
  --jerk-track:      #EFE7DB;  /* empty meter pips */

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif; /* rounded, loud, friendly */
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; /* clean reading sans */
  --font-mono:    'Hanken Grotesk', ui-monospace, monospace; /* used for plate-style tags */

  /* ---------- TYPE SCALE (semantic) ---------- */
  /* Display = Nunito heavy; Body = Hanken */
  --h1-font: var(--font-display);  --h1-size: 52px; --h1-weight: 900; --h1-lh: 1.02; --h1-ls: -0.02em;
  --h2-font: var(--font-display);  --h2-size: 36px; --h2-weight: 800; --h2-lh: 1.06; --h2-ls: -0.015em;
  --h3-font: var(--font-display);  --h3-size: 24px; --h3-weight: 800; --h3-lh: 1.12; --h3-ls: -0.01em;
  --h4-font: var(--font-display);  --h4-size: 19px; --h4-weight: 800; --h4-lh: 1.2;  --h4-ls: 0;
  --lead-font: var(--font-body);   --lead-size: 19px; --lead-weight: 400; --lead-lh: 1.5;
  --body-font: var(--font-body);   --body-size: 16px; --body-weight: 400; --body-lh: 1.6;
  --small-font: var(--font-body);  --small-size: 14px; --small-weight: 500; --small-lh: 1.5;
  --meta-font: var(--font-body);   --meta-size: 12.5px; --meta-weight: 600; --meta-lh: 1.4;
  --eyebrow-font: var(--font-display); --eyebrow-size: 12px; --eyebrow-weight: 800; --eyebrow-ls: 0.12em;

  /* ---------- RADII ---------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* ---------- SHADOWS (warm-tinted, soft) ---------- */
  --sh-xs: 0 1px 2px rgba(30,45,51,.06);
  --sh-sm: 0 2px 6px rgba(30,45,51,.07), 0 1px 2px rgba(30,45,51,.05);
  --sh-md: 0 6px 18px rgba(30,45,51,.09), 0 2px 6px rgba(30,45,51,.05);
  --sh-lg: 0 16px 40px rgba(30,45,51,.13), 0 4px 12px rgba(30,45,51,.07);
  --sh-alert: 0 8px 22px rgba(251,77,26,.30);   /* for primary CTA glow */
  --sh-inset: inset 0 1px 0 rgba(255,255,255,.6);

  /* ---------- SPACING (4px base) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

  /* ---------- MOTION ---------- */
  --ease-pop: cubic-bezier(.34,1.56,.64,1);   /* friendly overshoot */
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --dur-fast: 120ms;
  --dur: 200ms;
}

/* ============================================================
   SEMANTIC TYPOGRAPHY CLASSES
   ============================================================ */
.ja-h1 { font-family: var(--h1-font); font-size: var(--h1-size); font-weight: var(--h1-weight); line-height: var(--h1-lh); letter-spacing: var(--h1-ls); color: var(--fg1); }
.ja-h2 { font-family: var(--h2-font); font-size: var(--h2-size); font-weight: var(--h2-weight); line-height: var(--h2-lh); letter-spacing: var(--h2-ls); color: var(--fg1); }
.ja-h3 { font-family: var(--h3-font); font-size: var(--h3-size); font-weight: var(--h3-weight); line-height: var(--h3-lh); letter-spacing: var(--h3-ls); color: var(--fg1); }
.ja-h4 { font-family: var(--h4-font); font-size: var(--h4-size); font-weight: var(--h4-weight); line-height: var(--h4-lh); color: var(--fg1); }
.ja-lead { font-family: var(--lead-font); font-size: var(--lead-size); font-weight: var(--lead-weight); line-height: var(--lead-lh); color: var(--fg2); }
.ja-body { font-family: var(--body-font); font-size: var(--body-size); font-weight: var(--body-weight); line-height: var(--body-lh); color: var(--fg1); }
.ja-small { font-family: var(--small-font); font-size: var(--small-size); font-weight: var(--small-weight); line-height: var(--small-lh); color: var(--fg2); }
.ja-meta { font-family: var(--meta-font); font-size: var(--meta-size); font-weight: var(--meta-weight); line-height: var(--meta-lh); color: var(--fg3); }
.ja-eyebrow { font-family: var(--eyebrow-font); font-size: var(--eyebrow-size); font-weight: var(--eyebrow-weight); letter-spacing: var(--eyebrow-ls); text-transform: uppercase; color: var(--ja-alert); }