/* ==========================================================================
   CollegeBound — Design Tokens
   Colors, typography, spacing. The complete foundation.
   ========================================================================== */

/* ---- Fonts -------------------------------------------------------------- */
/* Headline: Freight Display (Pro). Substitute: Fraunces — flagged in README.
   Body: DM Sans. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,700;9..40,800&display=swap');

:root {
  /* ---- Color: raw palette (5 working colors + 1 accent) ---------------- */
  --cb-warm-white:     #F9F7F4; /* Cards, lightest section backgrounds */
  --cb-warm-cream:     #EBEADF; /* Primary page background, section fills */
  --cb-near-black:     #0D0D0D; /* All text, dark sections, primary buttons */
  --cb-warm-mid-gray:  #6B6560; /* Secondary text, eyebrow labels, captions */
  --cb-warm-light:     #D8D2C8; /* Hairline borders, dividers, rules */
  --cb-terracotta:     #A73E26; /* Typographic accent only — one use per page */

  /* ---- Semantic surfaces ---------------------------------------------- */
  --bg:            var(--cb-warm-cream);
  --bg-raised:     var(--cb-warm-white);
  --bg-inverse:    var(--cb-near-black);

  /* ---- Semantic foreground -------------------------------------------- */
  --fg:            var(--cb-near-black);
  --fg-muted:      var(--cb-warm-mid-gray);
  --fg-inverse:    var(--cb-warm-white);
  --fg-muted-inverse: #9A948E;
  --accent:        var(--cb-terracotta);

  /* ---- Lines ---------------------------------------------------------- */
  --hairline:          0.5px solid var(--cb-warm-light);
  --hairline-strong:   1px solid var(--cb-warm-light);
  --hairline-dark:     0.5px solid rgba(255,255,255,0.12);

  /* ---- Type families -------------------------------------------------- */
  --font-display: 'Freight Display Pro', 'Fraunces', 'Freight Big Pro', Georgia, 'Times New Roman', serif;
  --font-body:    'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* ---- Type scale ----------------------------------------------------- */
  --fs-base: 16px;

  /* Headings */
  --h1-size:   3.5rem;    --h1-lh: 1.08;  --h1-ls: -0.02em;  --h1-weight: 500;
  --h2-size:   2.5rem;    --h2-lh: 1.12;  --h2-ls: -0.01em;  --h2-weight: 500;
  --h3-size:   1.625rem;  --h3-lh: 1.2;   --h3-ls:  0em;     --h3-weight: 500;
  --h4-size:   1.125rem;  --h4-lh: 1.3;   --h4-ls:  0.01em;  --h4-weight: 500;

  /* Paragraphs */
  --p1-size:   1.125rem;   --p1-lh: 1.75;  --p1-weight: 300;
  --p2-size:   1rem;       --p2-lh: 1.8;   --p2-weight: 300;
  --p3-size:   0.8125rem;  --p3-lh: 1.65;  --p3-weight: 400;  --p3-ls: 0.01em;

  /* Utility */
  --eyebrow-size:   0.6875rem;  --eyebrow-weight: 500;  --eyebrow-ls: 0.16em;
  --cta-size:       0.75rem;    --cta-weight: 500;      --cta-ls: 0.12em;
  --nav-size:       0.875rem;   --nav-weight: 400;      --nav-ls: 0.02em;

  /* ---- Spacing (4px base, generous) ----------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --s-11: 192px;

  /* ---- Radii (restrained; hairlines preferred over shadows) ----------- */
  --r-0: 0px;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-pill: 999px;

  /* ---- Shadows (rarely used — hairlines preferred) -------------------- */
  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(13,13,13,0.04);
  --shadow-2: 0 12px 40px -18px rgba(13,13,13,0.18);

  /* ---- Motion --------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 360ms;

  /* ---- Layout --------------------------------------------------------- */
  --container-narrow:  720px;
  --container:         1120px;
  --container-wide:    1360px;
  --gutter:            24px;
}

/* ==========================================================================
   Element defaults
   ========================================================================== */
html { font-size: var(--fs-base); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--p2-size);
  line-height: var(--p2-lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--h1-size); line-height: var(--h1-lh); letter-spacing: var(--h1-ls); font-weight: var(--h1-weight); }
h2 { font-size: var(--h2-size); line-height: var(--h2-lh); letter-spacing: var(--h2-ls); font-weight: var(--h2-weight); }
h3 { font-size: var(--h3-size); line-height: var(--h3-lh); letter-spacing: var(--h3-ls); font-weight: var(--h3-weight); }
h4 { font-size: var(--h4-size); line-height: var(--h4-lh); letter-spacing: var(--h4-ls); font-weight: var(--h4-weight); }

p { margin: 0; text-wrap: pretty; }

.cb-lead    { font-size: var(--p1-size); line-height: var(--p1-lh); font-weight: var(--p1-weight); }
.cb-body    { font-size: var(--p2-size); line-height: var(--p2-lh); font-weight: var(--p2-weight); }
.cb-support { font-size: var(--p3-size); line-height: var(--p3-lh); font-weight: var(--p3-weight); letter-spacing: var(--p3-ls); color: var(--fg-muted); }

.cb-eyebrow {
  font-size: var(--eyebrow-size); font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-ls); text-transform: uppercase;
  color: var(--fg-muted);
}

.cb-cta {
  font-size: var(--cta-size); font-weight: var(--cta-weight);
  letter-spacing: var(--cta-ls); text-transform: uppercase;
}

.cb-nav {
  font-size: var(--nav-size); font-weight: var(--nav-weight);
  letter-spacing: var(--nav-ls);
}

.cb-accent { color: var(--accent); }

/* Selection */
::selection { background: var(--cb-near-black); color: var(--cb-warm-white); }