/* ============================================================
   TextJesse — Design Tokens
   ------------------------------------------------------------
   Minimalist monochrome brand. One dark navy + one paper-white,
   plus a warm cream and a single sage-green accent. That's
   the whole palette. Resist the urge to add more.
   ============================================================ */

/* Webfont imports
   --------------------------------------------------------------
   Display: "Boldonse" — closest Google Fonts match to the
            hand-painted, condensed-bold logo wordmark. FLAGGED:
            the logo itself is likely custom — Boldonse stands
            in for headlines until a proper font file is shared.
   Body:    "DM Sans" — clean modern geometric sans, paired
            with the rougher display face for contrast.
   Mono:    "JetBrains Mono" — for code/data/keyboard chips.
*/
@import url('https://fonts.googleapis.com/css2?family=Boldonse&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Brand color (exact sample from the logo) ---------- */
  --tj-ink:           #2c353f;   /* primary navy/ink — text, fills, logo bg */
  --tj-ink-12:        #2c353f1f;
  --tj-ink-24:        #2c353f3d;
  --tj-ink-48:        #2c353f7a;
  --tj-ink-72:        #2c353fb8;

  /* ---------- Paper / neutrals ---------- */
  --tj-paper:         #ffffff;   /* pure white — primary surface */
  --tj-cream:         #f6f1e8;   /* warm off-white — secondary surface */
  --tj-cream-deep:    #ece4d3;   /* deeper cream — used sparingly for bands */
  --tj-line:          #e6dfd1;   /* hairline divider on cream */
  --tj-line-paper:    #e9eaec;   /* hairline divider on white */

  /* ---------- Accent (used very sparingly — highlights, underlines) ---------- */
  --tj-highlight:     #6b8a52;   /* olive/sage green — buttons, marker, accent dash */
  --tj-highlight-soft:#dde8d1;
  --tj-highlight-dark:#56703f;

  /* ---------- Semantic foreground / background ---------- */
  --fg-1:             var(--tj-ink);          /* primary text */
  --fg-2:             #5a6470;                /* secondary text */
  --fg-3:             #666e7a;                /* tertiary / meta — AA @ 4.5:1 on white/cream */
  --fg-inverted:      var(--tj-paper);
  --bg-1:             var(--tj-paper);
  --bg-2:             var(--tj-cream);
  --bg-inverted:      var(--tj-ink);
  --border-1:         var(--tj-line-paper);
  --border-2:         var(--tj-line);
  --border-strong:    var(--tj-ink);

  /* ---------- State ---------- */
  --hover-bg:         #f3f4f6;
  --press-bg:         #e7e9ec;
  --focus-ring:       var(--tj-ink);

  /* ---------- Type families ---------- */
  --font-display:     "Boldonse", "Big Shoulders Display", "Anton", "Arial Black", sans-serif;
  --font-body:        "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:        "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---------- Type sizes (display) ---------- */
  --fs-display-1:     clamp(56px, 9vw, 128px);
  --fs-display-2:     clamp(44px, 7vw, 96px);
  --fs-h1:            clamp(36px, 5vw, 64px);
  --fs-h2:            clamp(28px, 3.6vw, 44px);
  --fs-h3:            22px;
  --fs-h4:            18px;
  --fs-body-lg:       19px;
  --fs-body:          16px;
  --fs-body-sm:       14px;
  --fs-caption:       12px;
  --fs-eyebrow:       12px;

  /* ---------- Type behavior ---------- */
  --lh-display:       0.92;
  --lh-tight:         1.05;
  --lh-snug:          1.25;
  --lh-body:          1.55;
  --lh-loose:         1.7;
  --tracking-display: -0.01em;
  --tracking-eyebrow: 0.14em;

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

  /* ---------- Radii (the brand is squarish — keep these small) ---------- */
  --radius-0:  0px;
  --radius-1:  2px;
  --radius-2:  4px;
  --radius-3:  8px;
  --radius-pill: 999px;

  /* ---------- Borders (the brand LOVES a hard 2-3px ink border) ---------- */
  --border-w-hair:    1px;
  --border-w-default: 2px;
  --border-w-bold:    3px;

  /* ---------- Shadows — used MINIMALLY. Prefer borders. ---------- */
  --shadow-1: 0 1px 0 var(--tj-ink-12);
  --shadow-2: 0 2px 0 var(--tj-ink);          /* the "stamped" offset shadow */
  --shadow-3: 4px 4px 0 var(--tj-ink);        /* the "poster" offset shadow */

  /* ---------- Motion — short, snappy, never bouncy ---------- */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.1, 1);
  --ease-in-out: cubic-bezier(0.6, 0, 0.2, 1);
  --dur-fast:    120ms;
  --dur-base:    180ms;
  --dur-slow:    320ms;

  /* ---------- Layout ---------- */
  --container-max: 1200px;
  --gutter:        clamp(20px, 4vw, 48px);
}

/* ============================================================
   Semantic element styles — drop colors_and_type.css into any
   page and these classes Just Work without further setup.
   ============================================================ */

.tj-display-1 {
  font-family: var(--font-display);
  font-size: var(--fs-display-1);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
  text-transform: uppercase;
  font-weight: 400;          /* Boldonse is single-weight, already heavy */
}
.tj-display-2 {
  font-family: var(--font-display);
  font-size: var(--fs-display-2);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
  text-transform: uppercase;
  font-weight: 400;
}
.tj-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--fg-1);
  font-weight: 400;
}
.tj-h2 {
  font-family: var(--font-body);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
  color: var(--fg-1);
  font-weight: 700;
}
.tj-h3 {
  font-family: var(--font-body);
  font-size: var(--fs-h3);
  line-height: 1.3;
  color: var(--fg-1);
  font-weight: 600;
}
.tj-h4 {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  line-height: 1.4;
  color: var(--fg-1);
  font-weight: 600;
}
.tj-body-lg {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--fg-1);
  font-weight: 400;
}
.tj-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  font-weight: 400;
}
.tj-body-sm {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--fg-2);
  font-weight: 400;
}
.tj-caption {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  line-height: 1.4;
  color: var(--fg-3);
  font-weight: 500;
}
.tj-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  line-height: 1;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
  font-weight: 600;
}
.tj-mono {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-1);
}

/* The signature sage-green marker highlight (used on key words in headlines) */
.tj-mark {
  background: linear-gradient(transparent 55%, var(--tj-highlight) 55%);
  padding: 0 0.05em;
}