/* ============================================================
   TAILORTELL · Design Tokens
   Colors, type, spacing, motion
   ============================================================ */

/* Google Fonts loaded via wp_enqueue_style( 'tt-fonts' ) in functions.php
   so the browser fetches them in parallel with this CSS, not after it. */

:root {
  /* ---------- Brand colors ---------- */
  --tt-charcoal:    #1A1A1A;   /* primary dark */
  --tt-warm-white:  #F7F6F4;   /* primary light */
  --tt-warm-taupe:  #8C7B6B;   /* accent — muted, considered */
  --tt-sand:        #C4B5A5;   /* accent — soft, daylight */

  /* ---------- Tonal extensions (for borders, hover, scrim) ---------- */
  --tt-charcoal-92: #2A2A2A;   /* one-up from charcoal — cards on dark */
  --tt-charcoal-84: #3A3A3A;   /* hover surface on dark */
  --tt-ink-72:      rgba(26,26,26,0.72);
  --tt-ink-48:      rgba(26,26,26,0.48);
  --tt-ink-24:      rgba(26,26,26,0.24);
  --tt-ink-12:      rgba(26,26,26,0.12);
  --tt-ink-06:      rgba(26,26,26,0.06);

  --tt-paper-72:    rgba(247,246,244,0.72);
  --tt-paper-48:    rgba(247,246,244,0.48);
  --tt-paper-24:    rgba(247,246,244,0.24);
  --tt-paper-12:    rgba(247,246,244,0.12);
  --tt-paper-06:    rgba(247,246,244,0.06);

  /* ---------- Semantic — light surface ---------- */
  --bg:             var(--tt-warm-white);
  --bg-raised:      #FFFFFF;
  --bg-sunken:      #EFEDE9;
  --fg-1:           var(--tt-charcoal);             /* primary text */
  --fg-2:           var(--tt-ink-72);               /* secondary */
  --fg-3:           var(--tt-ink-48);               /* tertiary, eyebrows */
  --fg-mute:        var(--tt-ink-24);
  --line:           var(--tt-ink-12);               /* hairline */
  --line-strong:    var(--tt-ink-24);
  --accent:         var(--tt-warm-taupe);
  --accent-soft:    var(--tt-sand);

  /* ---------- Type scale (Red Hat Display body, Josefin display optional) ---------- */
  --font-sans:      'Red Hat Display', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-display:   'Josefin Sans', 'Red Hat Display', sans-serif;     /* logo / eyebrows */
  --font-mono:      ui-monospace, 'SF Mono', Menlo, monospace;

  /* sizes — clamp(min, fluid, max) for fluid hero work */
  --fs-eyebrow:    11px;     /* 0.18em tracking, uppercase */
  --fs-overline:   13px;
  --fs-body-sm:    14px;
  --fs-body:       16px;
  --fs-body-lg:    18px;
  --fs-lead:       20px;
  --fs-h6:         18px;
  --fs-h5:         22px;
  --fs-h4:         28px;
  --fs-h3:         clamp(28px, 3.4vw, 40px);
  --fs-h2:         clamp(36px, 5vw, 64px);
  --fs-h1:         clamp(44px, 7vw, 96px);
  --fs-display:    clamp(56px, 9vw, 128px);

  /* line-heights */
  --lh-tight:      1.05;
  --lh-snug:       1.18;
  --lh-body:       1.55;
  --lh-loose:      1.7;

  /* tracking */
  --ls-display:    -0.02em;
  --ls-tight:      -0.01em;
  --ls-normal:     0em;
  --ls-wide:       0.08em;
  --ls-wider:      0.18em;       /* eyebrows */
  --ls-widest:     0.28em;       /* wordmark */

  /* ---------- Spacing (8pt grid w/ 4px half-step) ---------- */
  --sp-0:   0;
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   24px;
  --sp-6:   32px;
  --sp-7:   48px;
  --sp-8:   64px;
  --sp-9:   96px;
  --sp-10: 128px;
  --sp-11: 160px;

  /* section rhythm — editorial mood baked in */
  --section-y:        clamp(64px, 9vw, 120px);
  --container-max:    1280px;
  --container-pad:    clamp(20px, 4vw, 48px);

  /* ---------- Borders / radii ---------- */
  --radius-0: 0px;        /* default — TailorTell is sharp */
  --radius-1: 2px;        /* inputs */
  --radius-2: 4px;        /* small chips */
  --radius-3: 999px;      /* used sparingly */
  --hairline: 0.5px;

  /* ---------- Shadow / elevation (very restrained) ---------- */
  --shadow-0:  none;
  --shadow-1:  0 1px 2px rgba(26,26,26,0.04), 0 0 0 0.5px rgba(26,26,26,0.06);
  --shadow-2:  0 8px 24px -8px rgba(26,26,26,0.10), 0 0 0 0.5px rgba(26,26,26,0.06);
  --shadow-3:  0 24px 60px -20px rgba(26,26,26,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);
  --ease-quiet:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    180ms;
  --dur-base:    320ms;
  --dur-slow:    640ms;
  --dur-reveal:  900ms;
}

/* ---------- Dark surface override (use on .tt-dark wrappers) ---------- */
.tt-dark {
  --bg:           var(--tt-charcoal);
  --bg-raised:    var(--tt-charcoal-92);
  --bg-sunken:    #0F0F0F;
  --fg-1:         var(--tt-warm-white);
  --fg-2:         var(--tt-paper-72);
  --fg-3:         var(--tt-paper-48);
  --fg-mute:      var(--tt-paper-24);
  --line:         var(--tt-paper-12);
  --line-strong: var(--tt-paper-24);
  color: var(--fg-1);
  background: var(--bg);
}

/* ---------- Light surface override (use on .tt-light wrappers) ----------
   Warm-white canvas with charcoal type. Used on alternating dimension
   blocks (Convert, Accelerate) for editorial pacing on the Services page. */
.tt-light {
  --bg:           var(--tt-warm-white);
  --bg-raised:    #FFFFFF;
  --bg-sunken:    #EFEDE9;
  --fg-1:         var(--tt-charcoal);
  --fg-2:         var(--tt-ink-72);
  --fg-3:         var(--tt-ink-48);
  --fg-mute:      var(--tt-ink-24);
  --line:         var(--tt-ink-12);
  --line-strong:  var(--tt-ink-24);
  color: var(--fg-1);
  background: var(--bg);
}

/* ---------- Taupe surface override (use on .tt-taupe wrappers) ----------
   Reserved for future use — palette colour but not currently applied. */
.tt-taupe {
  --bg:           var(--tt-warm-taupe);
  --bg-raised:    #9A8A78;
  --bg-sunken:    #786759;
  --fg-1:         var(--tt-warm-white);
  --fg-2:         rgba(247,246,244,0.82);
  --fg-3:         rgba(247,246,244,0.62);
  --fg-mute:      rgba(247,246,244,0.32);
  --line:         rgba(247,246,244,0.20);
  --line-strong:  rgba(247,246,244,0.36);
  color: var(--fg-1);
  background: var(--bg);
}

/* ============================================================
   Element defaults — opt in via .tt-prose or root level
   ============================================================ */

.tt-prose {
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  text-wrap: pretty;
}

/* Eyebrow / overline — Josefin Sans, wide tracking, uppercase */
.tt-eyebrow {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--fg-3);
  line-height: 1;
}

/* Wordmark recipe (matches uploaded logo system) */
.tt-wordmark {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  word-spacing: 0.1em;
  line-height: 1;
}

/* Display headlines — Red Hat Display, light weight, tight leading */
.tt-h1 {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}
.tt-h2 {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}
.tt-h3 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}
.tt-h4 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-h4);
  line-height: 1.25;
}
.tt-h5 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-h5);
  line-height: 1.3;
}

.tt-lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--fg-2);
  max-width: 56ch;
}
.tt-body  { font-size: var(--fs-body);    line-height: var(--lh-body); }
.tt-small { font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--fg-2); }

/* Hairline divider */
.tt-rule {
  height: 1px;
  background: var(--line);
  border: 0;
  width: 100%;
}
.tt-rule-strong { background: var(--line-strong); }