/* ============================================================
   JWTechDev — Colors & Type
   The foundational tokens. Import this anywhere you brand.
   ============================================================ */

/* ---------- Webfonts (self-hosted, see fonts/) --------------
   All Roboto + Roboto Condensed + Roboto SemiCondensed weights
   (100–900) and italics are available locally. */

/* ===== Roboto (sans · body / UI) ===== */
@font-face { font-family: "Roboto"; src: url("../fonts/Roboto-Thin.ttf")            format("truetype"); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("../fonts/Roboto-ThinItalic.ttf")      format("truetype"); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("../fonts/Roboto-ExtraLight.ttf")      format("truetype"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("../fonts/Roboto-ExtraLightItalic.ttf")format("truetype"); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("../fonts/Roboto-Light.ttf")           format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("../fonts/Roboto-LightItalic.ttf")     format("truetype"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("../fonts/Roboto-Regular.ttf")         format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("../fonts/Roboto-Italic.ttf")          format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("../fonts/Roboto-Medium.ttf")          format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("../fonts/Roboto-MediumItalic.ttf")    format("truetype"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("../fonts/Roboto-SemiBold.ttf")        format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("../fonts/Roboto-SemiBoldItalic.ttf")  format("truetype"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("../fonts/Roboto-Bold.ttf")            format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("../fonts/Roboto-BoldItalic.ttf")      format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("../fonts/Roboto-ExtraBold.ttf")       format("truetype"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("../fonts/Roboto-ExtraBoldItalic.ttf") format("truetype"); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("../fonts/Roboto-Black.ttf")           format("truetype"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("../fonts/Roboto-BlackItalic.ttf")     format("truetype"); font-weight: 900; font-style: italic; font-display: swap; }

/* ===== Roboto Condensed (display / oversized headlines) ===== */
@font-face { font-family: "Roboto Condensed"; src: url("../fonts/Roboto_Condensed-Thin.ttf")            format("truetype"); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto Condensed"; src: url("../fonts/Roboto_Condensed-ThinItalic.ttf")      format("truetype"); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto Condensed"; src: url("../fonts/Roboto_Condensed-ExtraLight.ttf")      format("truetype"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto Condensed"; src: url("../fonts/Roboto_Condensed-ExtraLightItalic.ttf")format("truetype"); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto Condensed"; src: url("../fonts/Roboto_Condensed-Light.ttf")           format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto Condensed"; src: url("../fonts/Roboto_Condensed-LightItalic.ttf")     format("truetype"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto Condensed"; src: url("../fonts/Roboto_Condensed-Regular.ttf")         format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto Condensed"; src: url("../fonts/Roboto_Condensed-Italic.ttf")          format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto Condensed"; src: url("../fonts/Roboto_Condensed-Medium.ttf")          format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto Condensed"; src: url("../fonts/Roboto_Condensed-MediumItalic.ttf")    format("truetype"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto Condensed"; src: url("../fonts/Roboto_Condensed-SemiBold.ttf")        format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto Condensed"; src: url("../fonts/Roboto_Condensed-SemiBoldItalic.ttf")  format("truetype"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto Condensed"; src: url("../fonts/Roboto_Condensed-Bold.ttf")            format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto Condensed"; src: url("../fonts/Roboto_Condensed-BoldItalic.ttf")      format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto Condensed"; src: url("../fonts/Roboto_Condensed-ExtraBold.ttf")       format("truetype"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto Condensed"; src: url("../fonts/Roboto_Condensed-ExtraBoldItalic.ttf") format("truetype"); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto Condensed"; src: url("../fonts/Roboto_Condensed-Black.ttf")           format("truetype"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto Condensed"; src: url("../fonts/Roboto_Condensed-BlackItalic.ttf")     format("truetype"); font-weight: 900; font-style: italic; font-display: swap; }

/* ===== Roboto SemiCondensed (optional middle-width alternate) ===== */
@font-face { font-family: "Roboto SemiCondensed"; src: url("../fonts/Roboto_SemiCondensed-Thin.ttf")            format("truetype"); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto SemiCondensed"; src: url("../fonts/Roboto_SemiCondensed-ThinItalic.ttf")      format("truetype"); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto SemiCondensed"; src: url("../fonts/Roboto_SemiCondensed-ExtraLight.ttf")      format("truetype"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto SemiCondensed"; src: url("../fonts/Roboto_SemiCondensed-ExtraLightItalic.ttf")format("truetype"); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto SemiCondensed"; src: url("../fonts/Roboto_SemiCondensed-Light.ttf")           format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto SemiCondensed"; src: url("../fonts/Roboto_SemiCondensed-LightItalic.ttf")     format("truetype"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto SemiCondensed"; src: url("../fonts/Roboto_SemiCondensed-Regular.ttf")         format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto SemiCondensed"; src: url("../fonts/Roboto_SemiCondensed-Italic.ttf")          format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto SemiCondensed"; src: url("../fonts/Roboto_SemiCondensed-Medium.ttf")          format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto SemiCondensed"; src: url("../fonts/Roboto_SemiCondensed-MediumItalic.ttf")    format("truetype"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto SemiCondensed"; src: url("../fonts/Roboto_SemiCondensed-SemiBold.ttf")        format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto SemiCondensed"; src: url("../fonts/Roboto_SemiCondensed-SemiBoldItalic.ttf")  format("truetype"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto SemiCondensed"; src: url("../fonts/Roboto_SemiCondensed-Bold.ttf")            format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto SemiCondensed"; src: url("../fonts/Roboto_SemiCondensed-BoldItalic.ttf")      format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto SemiCondensed"; src: url("../fonts/Roboto_SemiCondensed-ExtraBold.ttf")       format("truetype"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto SemiCondensed"; src: url("../fonts/Roboto_SemiCondensed-ExtraBoldItalic.ttf") format("truetype"); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto SemiCondensed"; src: url("../fonts/Roboto_SemiCondensed-Black.ttf")           format("truetype"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto SemiCondensed"; src: url("../fonts/Roboto_SemiCondensed-BlackItalic.ttf")     format("truetype"); font-weight: 900; font-style: italic; font-display: swap; }

:root {
  /* ===========================================================
     1. CORE BRAND PALETTE
     5 hand-picked hues. Use sparingly; let white space breathe.
     =========================================================== */
  --brand-burgundy: #721817; /* primary red — punctuation, CTAs sparingly */
  --brand-orange:   #FA9F42; /* warm accent — highlights, energy */
  --brand-navy:     #2B4162; /* primary cool — body links, headers */
  --brand-green:    #0B6E4F; /* success, growth, builder */
  --brand-fog:      #E0E0E2; /* neutral cool gray */

  /* ----- Tints (10–20% mixes against white) -------------------
     Use as soft fills, chip backgrounds, hover surfaces. */
  --brand-burgundy-50: #f6e9e8;
  --brand-burgundy-100:#e7c4c3;
  --brand-orange-50:  #fff1e0;
  --brand-orange-100: #fde0b8;
  --brand-navy-50:    #e6ebf2;
  --brand-navy-100:   #c2cddd;
  --brand-green-50:   #e0efe9;
  --brand-green-100:  #b4d6c8;

  /* ----- Shades (deeper for depth/hover) ---------------------- */
  --brand-burgundy-700: #4d1010;
  --brand-navy-700:     #1a2a40;
  --brand-green-700:    #074833;

  /* ===========================================================
     2. NEUTRALS
     Cool grays anchored on --brand-fog. Whitespace is king.
     =========================================================== */
  --ink-0:   #ffffff;
  --ink-50:  #fafafb;
  --ink-100: #f2f2f4;
  --ink-200: #e0e0e2; /* alias of brand-fog */
  --ink-300: #c7c7cb;
  --ink-400: #9a9aa1;
  --ink-500: #6e6e76;
  --ink-600: #4a4a51;
  --ink-700: #2e2e33;
  --ink-800: #1c1c20;
  --ink-900: #0e0e11;

  /* ===========================================================
     3. SEMANTIC COLOR ROLES
     Code should reach for these, not raw brand colors.
     =========================================================== */
  --bg:           var(--ink-0);
  --bg-subtle:    var(--ink-50);
  --bg-muted:     var(--ink-100);
  --bg-inverse:   var(--ink-900);

  --fg:           var(--ink-900);
  --fg-muted:     var(--ink-600);
  --fg-subtle:    var(--ink-400);
  --fg-onbrand:   var(--ink-0);
  --fg-oninverse: var(--ink-0);

  --border:        var(--ink-200);
  --border-strong: var(--ink-300);
  --border-focus:  var(--brand-navy);

  --accent:        var(--brand-green); /* primary brand accent */
  --accent-hover:  var(--brand-green-700);
  --accent-soft:   var(--brand-green-50);

  --link:          var(--brand-navy);
  --link-hover:    var(--brand-navy-700);

  --success:       var(--brand-green);
  --success-soft:  var(--brand-green-50);
  --warning:       var(--brand-orange);
  --warning-soft:  var(--brand-orange-50);
  --danger:        var(--brand-burgundy);
  --danger-soft:   var(--brand-burgundy-50);
  --info:          var(--brand-navy);
  --info-soft:     var(--brand-navy-50);

  /* ===========================================================
     4. TYPE — FAMILIES
     Roboto everywhere; Condensed for oversized display moments.
     =========================================================== */
  --font-sans:    "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Roboto Condensed", "Roboto", system-ui, sans-serif;
  --font-mono:    ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* ===========================================================
     5. TYPE — SCALE
     Generous, breathing. Major-third ratio.
     =========================================================== */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    20px;
  --fs-xl:    24px;
  --fs-2xl:   30px;
  --fs-3xl:   38px;
  --fs-4xl:   48px;
  --fs-5xl:   64px;
  --fs-6xl:   84px;

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:    0.04em;
  --tracking-caps:    0.12em;

  /* ===========================================================
     6. SPACING — 4px base
     =========================================================== */
  --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;

  /* ===========================================================
     7. RADII
     Soft, modern. Pills for chips/buttons; subtle for cards.
     =========================================================== */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-pill: 999px;

  /* ===========================================================
     8. SHADOWS — minimal, almost flat
     =========================================================== */
  --shadow-xs: 0 1px 1px rgba(14,14,17,.04);
  --shadow-sm: 0 1px 2px rgba(14,14,17,.06), 0 1px 1px rgba(14,14,17,.04);
  --shadow-md: 0 4px 10px rgba(14,14,17,.06), 0 2px 4px rgba(14,14,17,.04);
  --shadow-lg: 0 16px 32px rgba(14,14,17,.08), 0 4px 10px rgba(14,14,17,.05);
  --shadow-focus: 0 0 0 3px rgba(43,65,98,.20);

  /* ===========================================================
     9. MOTION
     =========================================================== */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-in-out: cubic-bezier(.5,.1,.3,1);
  --dur-fast: 120ms;
  --dur:      200ms;
  --dur-slow: 360ms;
}

/* ===========================================================
   10. SEMANTIC TYPOGRAPHY CLASSES
   Use as utility classes OR reference the vars directly.
   =========================================================== */
.t-display {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-6xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
.t-h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
.t-h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
.t-h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--fg);
}
.t-h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg);
}
.t-lede {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}
.t-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg);
}
.t-body-sm {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg);
}
.t-caption {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}
.t-eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brand-burgundy);
}
.t-mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-sm);
  color: var(--fg);
}
.t-code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  padding: 0.12em 0.35em;
  background: var(--bg-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--brand-burgundy);
}