/* =====================================================================
   TECH-ISH DESIGN SYSTEM — Foundations
   Colors, type, spacing, radii, shadows.
   Derived from: brand logo (purple→blue gradient infinity) +
                 Slides Template.png (cream editorial layout).
   ===================================================================== */

/* --- Web fonts -----------------------------------------------------
   Fonts are loaded via wp_enqueue_style in functions.php, NOT via
   @import here. Reason: @import blocks parallel CSS loading (the
   browser can't start fetching the imported stylesheet until it
   parses this one), which is a measurable perf cost. The enqueue
   path is also paired with preconnect + preload hints in functions.php
   for fastest first paint.

   We use:
     • Inter (headlines + UI)
     • Playfair Display Italic (italic accents)
     • IBM Plex Mono (labels + chrome)
*/

:root {
  /* --- BRAND COLORS ------------------------------------------------- */
  /* Pulled from the logo gradient + slide template. */
  --ti-violet-50:   #F2EAF3;
  --ti-violet-100:  #E1CFE5;
  --ti-violet-200:  #C6A6CE;
  --ti-violet-300:  #B189BD;   /* primary slide accent (bar fill, key entity) */
  --ti-violet-400:  #9A6FAA;
  --ti-violet-500:  #7B3F8C;   /* logo violet (right loop) */
  --ti-violet-600:  #5C3A6E;
  --ti-violet-700:  #41264F;

  --ti-blue-50:     #E8ECF7;
  --ti-blue-100:    #C5CDEB;
  --ti-blue-200:    #8C9CD3;
  --ti-blue-300:    #4A5FA8;
  --ti-blue-400:    #2A3C8A;   /* logo blue (wordmark + handle) */
  --ti-blue-500:    #1E2D6E;
  --ti-blue-600:    #14204F;

  /* Brand gradient — used for logo, hero strokes, link underlines. */
  --ti-gradient: linear-gradient(90deg, #7B3F8C 0%, #5340A0 35%, #2A3C8A 70%, #7B3F8C 100%);
  --ti-gradient-2: linear-gradient(135deg, #B189BD 0%, #2A3C8A 100%);

  /* Accent (key entity / pull-quote highlight in slide template) */
  --ti-coral-300:   #E0A6A0;
  --ti-coral-400:   #C97670;
  --ti-coral-500:   #A8554F;

  /* --- SURFACES ----------------------------------------------------- */
  --ti-cream-50:    #FBF7EC;
  --ti-cream-100:   #F4ECD6;   /* primary slide / page background */
  --ti-cream-200:   #EDE3C5;
  --ti-cream-300:   #E3D6B0;

  --ti-paper:       #FFFFFF;
  --ti-paper-dim:   #F8F4EA;

  --ti-ink-900:     #1A1817;   /* near-black, body */
  --ti-ink-800:     #2B2826;
  --ti-ink-700:     #4A4642;
  --ti-ink-600:     #6B6660;   /* secondary text */
  --ti-ink-500:     #948E84;   /* tertiary, slide bar comparison fill */
  --ti-ink-400:     #B7B0A2;   /* slide bar prior period fill */
  --ti-ink-300:     #D6CFB9;   /* hairlines */
  --ti-ink-200:     #E5DFCC;

  /* --- SEMANTIC ----------------------------------------------------- */
  --ti-bg:          var(--ti-cream-100);
  --ti-bg-alt:      var(--ti-cream-50);
  --ti-fg:          var(--ti-ink-900);
  --ti-fg-muted:    var(--ti-ink-600);
  --ti-fg-faint:    var(--ti-ink-500);
  --ti-rule:        var(--ti-ink-300);
  --ti-accent:      var(--ti-violet-500);
  --ti-accent-soft: var(--ti-violet-300);
  --ti-link:        var(--ti-blue-400);
  --ti-highlight:   var(--ti-coral-400);

  /* Status (Tech-ish doesn't use these heavily, but provided for product UI) */
  --ti-success: #3F8A5B;
  --ti-warning: #C69214;
  --ti-danger:  #B83A2E;
  --ti-info:    var(--ti-blue-400);

  /* --- TYPEFACES ---------------------------------------------------- */
  --ti-font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ti-font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ti-font-italic:  "Playfair Display", "Georgia", serif;       /* italic accent words, standfirst */
  --ti-font-mono:    "IBM Plex Mono", ui-monospace, "JetBrains Mono", monospace;

  /* --- TYPE SCALE (slide deck reference: 1920×1080 base) ----------- */
  --ti-fs-display:   96px;   /* slide headlines, "Your data headline" */
  --ti-fs-h1:        64px;
  --ti-fs-h2:        44px;
  --ti-fs-h3:        32px;
  --ti-fs-lede:      26px;   /* italic standfirst */
  --ti-fs-body-lg:   20px;
  --ti-fs-body:      17px;
  --ti-fs-small:     14px;
  --ti-fs-label:     12px;   /* mono caps labels */
  --ti-fs-micro:     10px;

  --ti-lh-tight:     1.05;
  --ti-lh-snug:      1.2;
  --ti-lh-body:      1.55;
  --ti-lh-loose:     1.7;

  --ti-tracking-caps:    0.14em;  /* mono caps labels */
  --ti-tracking-display: -0.02em; /* headline negative tracking */
  --ti-tracking-body:    0;

  /* --- SPACING (8pt base, with finer steps) ----------------------- */
  --ti-sp-0:  0;
  --ti-sp-1:  4px;
  --ti-sp-2:  8px;
  --ti-sp-3:  12px;
  --ti-sp-4:  16px;
  --ti-sp-5:  24px;
  --ti-sp-6:  32px;
  --ti-sp-7:  48px;
  --ti-sp-8:  64px;
  --ti-sp-9:  96px;
  --ti-sp-10: 128px;

  /* --- RADII ------------------------------------------------------ */
  --ti-radius-xs:    4px;
  --ti-radius-sm:    8px;
  --ti-radius-md:    14px;   /* slide guide callout boxes */
  --ti-radius-lg:    20px;
  --ti-radius-pill:  999px;

  /* --- SHADOWS / ELEVATION --------------------------------------- */
  /* Tech-ish surfaces are flat — shadows are subtle and warm. */
  --ti-shadow-0:  none;
  --ti-shadow-1:  0 1px 0 rgba(26, 24, 23, 0.04), 0 1px 2px rgba(26, 24, 23, 0.06);
  --ti-shadow-2:  0 2px 6px rgba(65, 38, 79, 0.08), 0 1px 2px rgba(26, 24, 23, 0.05);
  --ti-shadow-3:  0 12px 32px -10px rgba(65, 38, 79, 0.18);
  --ti-shadow-inset: inset 0 0 0 1px rgba(26, 24, 23, 0.06);

  /* --- TRANSITIONS / MOTION -------------------------------------- */
  --ti-ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ti-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ti-dur-fast:  120ms;
  --ti-dur:       200ms;
  --ti-dur-slow:  360ms;
}

/* =====================================================================
   SEMANTIC ELEMENT STYLES
   These cascade down to plain HTML inside .ti-prose / .ti-page.
   ===================================================================== */
.ti-page,
.ti-prose {
  background: var(--ti-bg);
  color: var(--ti-fg);
  font-family: var(--ti-font-sans);
  font-size: var(--ti-fs-body);
  line-height: var(--ti-lh-body);
  font-feature-settings: "ss01", "cv11";
}

.ti-display {
  font-family: var(--ti-font-display);
  font-weight: 900;
  font-size: var(--ti-fs-display);
  line-height: var(--ti-lh-tight);
  letter-spacing: var(--ti-tracking-display);
  color: var(--ti-ink-500);            /* slide headlines are warm-gray, not black */
  text-wrap: balance;
}
.ti-display em,
.ti-display .italic {
  font-family: var(--ti-font-italic);
  font-style: italic;
  font-weight: 700;
  color: var(--ti-violet-300);
}

.ti-h1 { font: 800 var(--ti-fs-h1) / var(--ti-lh-tight) var(--ti-font-sans); letter-spacing: -0.015em; color: var(--ti-ink-900); }
.ti-h2 { font: 700 var(--ti-fs-h2) / var(--ti-lh-snug) var(--ti-font-sans); letter-spacing: -0.01em; color: var(--ti-ink-900); }
.ti-h3 { font: 600 var(--ti-fs-h3) / var(--ti-lh-snug) var(--ti-font-sans); color: var(--ti-ink-900); }

.ti-lede {
  font-family: var(--ti-font-italic);
  font-style: italic;
  font-weight: 500;
  font-size: var(--ti-fs-lede);
  line-height: 1.35;
  color: var(--ti-ink-500);
  text-wrap: pretty;
}
.ti-lede .key {
  color: var(--ti-coral-400);
}

.ti-body  { font: 400 var(--ti-fs-body) / var(--ti-lh-body) var(--ti-font-sans); color: var(--ti-ink-900); }
.ti-body-lg { font: 400 var(--ti-fs-body-lg) / var(--ti-lh-body) var(--ti-font-sans); color: var(--ti-ink-800); }
.ti-small { font: 400 var(--ti-fs-small) / 1.5 var(--ti-font-sans); color: var(--ti-ink-600); }

.ti-label,
.ti-eyebrow {
  font-family: var(--ti-font-mono);
  font-weight: 500;
  font-size: var(--ti-fs-label);
  letter-spacing: var(--ti-tracking-caps);
  text-transform: uppercase;
  color: var(--ti-violet-500);
}
.ti-mono   { font-family: var(--ti-font-mono); font-size: 0.95em; }
.ti-handle { font-family: var(--ti-font-mono); color: var(--ti-blue-400); }

a.ti-link {
  color: var(--ti-link);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-color: var(--ti-violet-300);
  transition: color var(--ti-dur) var(--ti-ease);
}
a.ti-link:hover { color: var(--ti-violet-500); text-decoration-color: var(--ti-blue-400); }

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

::selection { background: var(--ti-violet-200); color: var(--ti-ink-900); }