/* ============================================================
   Course N Jobs — Design Tokens
   Single source of truth for color, type, spacing, radii, shadow.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ----- Brand colors (sampled from the CnJ logo) ----- */
  --cnj-blue-900: #061a47;
  --cnj-blue-800: #0a275f;
  --cnj-blue-700: #0b2f73;   /* PRIMARY — the "C" and "J" in the wordmark */
  --cnj-blue-600: #154a9e;
  --cnj-blue-500: #1e90d8;   /* ACCENT — the cyan highlight on the letters */
  --cnj-blue-400: #4dabe5;
  --cnj-blue-300: #8bc8ef;
  --cnj-blue-200: #c4e2f7;
  --cnj-blue-100: #e6f2fb;
  --cnj-blue-050: #f3f9fd;

  --cnj-gold-700: #b3760b;
  --cnj-gold-600: #d8910d;
  --cnj-gold-500: #f5a810;   /* ACCENT — the "n" and arrow in the logo */
  --cnj-gold-400: #ffbf3d;
  --cnj-gold-300: #ffd479;
  --cnj-gold-200: #ffe7b0;
  --cnj-gold-100: #fff3d8;
  --cnj-gold-050: #fffaec;

  --cnj-red-700: #a31f1f;
  --cnj-red-600: #d62828;   /* "Course N Jobs" wordmark */
  --cnj-red-500: #e85050;
  --cnj-red-100: #fde2e2;

  --cnj-green-600: #1a7f4e; /* "Free" tags, success states */
  --cnj-green-100: #d5efe1;

  /* ----- Neutrals (cool gray scale) ----- */
  --gray-900: #11161f;
  --gray-800: #1c2330;
  --gray-700: #2e3849;
  --gray-600: #4a5468;
  --gray-500: #6b7588;
  --gray-400: #9099aa;
  --gray-300: #c2c8d3;
  --gray-200: #dfe3ea;
  --gray-150: #ecf0f5;
  --gray-100: #f1f4f8;
  --gray-50:  #f7f9fc;
  --white:    #ffffff;

  /* ----- Semantic colors ----- */
  --fg-1: var(--gray-900);   /* primary text */
  --fg-2: var(--gray-700);   /* secondary text */
  --fg-3: var(--gray-500);   /* muted / meta */
  --fg-4: var(--gray-400);   /* disabled, placeholders */
  --fg-inverse: var(--white);
  --fg-link: var(--cnj-blue-700);
  --fg-link-hover: var(--cnj-blue-600);
  --fg-rating: var(--cnj-gold-500);

  --bg-1: var(--white);            /* page */
  --bg-2: var(--gray-50);          /* alt sections, footer */
  --bg-3: var(--gray-100);         /* deeper alt */
  --bg-card: var(--white);
  --bg-hero: var(--cnj-blue-700);
  --bg-overlay-scrim: rgb(11 22 47 / 0.45);

  --border-1: var(--gray-200);
  --border-2: var(--gray-300);
  --border-strong: var(--gray-400);
  --border-focus: var(--cnj-blue-500);

  --action-primary-bg: var(--cnj-gold-500);
  --action-primary-bg-hover: var(--cnj-gold-600);
  --action-primary-fg: var(--cnj-blue-900);
  --action-secondary-bg: var(--white);
  --action-secondary-bg-hover: var(--gray-100);
  --action-secondary-fg: var(--cnj-blue-700);
  --action-secondary-border: var(--cnj-blue-700);

  /* ----- Typography: families ----- */
  --font-sans: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ----- Typography: scale ----- */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-md:   16px;   /* body default */
  --fs-lg:   18px;
  --fs-xl:   20px;
  --fs-2xl:  24px;
  --fs-3xl:  30px;
  --fs-4xl:  36px;
  --fs-5xl:  44px;
  --fs-6xl:  56px;

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-base:  1.5;
  --lh-loose: 1.65;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

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

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

  /* ----- Radii ----- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ----- Shadows (tinted navy, never neutral black) ----- */
  --shadow-xs: 0 1px 2px rgb(11 47 115 / 0.04);
  --shadow-sm: 0 2px 6px rgb(11 47 115 / 0.06), 0 1px 2px rgb(11 47 115 / 0.04);
  --shadow-md: 0 8px 24px rgb(11 47 115 / 0.10), 0 2px 4px rgb(11 47 115 / 0.04);
  --shadow-lg: 0 16px 48px rgb(11 47 115 / 0.16), 0 4px 8px rgb(11 47 115 / 0.04);
  --shadow-focus-ring: 0 0 0 3px rgb(30 144 216 / 0.30);

  /* ----- Motion ----- */
  --t-fast:   100ms ease-out;
  --t-base:   150ms ease-out;
  --t-slow:   240ms ease-out;

  /* ----- Layout ----- */
  --page-max: 1280px;
  --nav-h:    64px;
  --sidebar-w: 280px;
}

/* ============================================================
   Element-level defaults — apply on any page that imports this.
   ============================================================ */
html {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-1);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { margin: 0; }

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--sp-4);
  color: var(--fg-1);
}
h2, .h2 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--sp-3);
  color: var(--fg-1);
}
h3, .h3 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  margin: 0 0 var(--sp-2);
  color: var(--fg-1);
}
h4, .h4 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  margin: 0 0 var(--sp-2);
  color: var(--fg-1);
}
p, .p {
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  margin: 0 0 var(--sp-4);
  color: var(--fg-2);
}
small, .small, .meta {
  font-size: var(--fs-sm);
  color: var(--fg-3);
}
.eyebrow {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-loose);
  font-weight: var(--fw-semibold);
  color: var(--fg-3);
}
.stat-number {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--cnj-blue-700);
}
a {
  color: var(--fg-link);
  text-decoration: none;
}
a:hover { text-decoration: underline; color: var(--fg-link-hover); }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.95em;
}
code {
  background: var(--gray-100);
  color: var(--cnj-blue-700);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

hr {
  border: none;
  border-top: 1px solid var(--border-1);
  margin: var(--sp-6) 0;
}

*:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus-ring);
  border-radius: var(--radius-sm);
}