/* ==========================================================================
   Tahir Shahzad — Personal Brand Design System
   Product Manager · Agile Coach · Community Builder
   --------------------------------------------------------------------------
   Design north star: calm, content-first, professional. Optimized for
   trust-building and consultation lead generation. NOT a startup landing
   page — closer to a thoughtful consultant's publication.
   ========================================================================== */

:root {
  /* ===== PRIMARY — Plum Ink (Brand Anchor) ===== */
  --ts-plum-50:  #F6F3F6;
  --ts-plum-100: #EBE3EC;
  --ts-plum-200: #D5C6D7;
  --ts-plum-300: #A88CAA;
  --ts-plum-400: #6D4F72;
  --ts-plum-500: #4A3550;
  --ts-plum-600: #2A1E30;
  --ts-plum-700: #180F1D;
  --ts-plum-800: #120A16;
  --ts-plum-900: #0B0610;

  /* ===== ACCENT — Signal Coral (Brand Signal / CTA) ===== */
  --ts-coral-50:  #FDECE9;
  --ts-coral-100: #FBD5CE;
  --ts-coral-200: #F7B0A3;
  --ts-coral-300: #F38473;
  --ts-coral-400: #F0553F;
  --ts-coral-500: #D6412C;
  --ts-coral-600: #B23422;
  --ts-coral-700: #8C281A;

  /* ===== NEUTRALS — warm-cool slate, light-mode first ===== */
  --ts-ink-900: #111827;
  --ts-ink-800: #1F2937;
  --ts-ink-700: #374151;
  --ts-ink-600: #4B5563;
  --ts-ink-500: #6B7280;
  --ts-ink-400: #9CA3AF;
  --ts-ink-300: #D1D5DB;
  --ts-ink-200: #E5E7EB;
  --ts-ink-100: #F3F4F6;
  --ts-ink-50:  #F9FAFB;
  --ts-white:   #FFFFFF;

  /* ===== SEMANTIC — calm, restrained ===== */
  --ts-success: #10B981;
  --ts-success-soft: #D1FAE5;
  --ts-warning: #F59E0B;
  --ts-warning-soft: #FEF3C7;
  --ts-danger:  #EF4444;
  --ts-danger-soft: #FEE2E2;
  --ts-info:    #3B82F6;
  --ts-info-soft: #DBEAFE;

  /* ===== SECTION SURFACES — three-variant system ===== */
  --section-default-bg: var(--ts-white);
  --section-default-fg: var(--ts-ink-900);
  --section-alt-bg: #F6F3F6;
  --section-alt-fg: var(--ts-ink-900);
  --section-cta-bg: var(--ts-plum-600);
  --section-cta-fg: var(--ts-white);
  --section-cta-accent: var(--ts-coral-400);

  /* ===== FG / BG aliases ===== */
  --bg-0: var(--ts-ink-50);
  --bg-1: var(--ts-white);
  --bg-2: #F6F3F6;
  --bg-3: var(--ts-ink-100);

  --fg-1: var(--ts-ink-900);
  --fg-2: var(--ts-ink-700);
  --fg-3: var(--ts-ink-500);
  --fg-4: var(--ts-ink-400);

  --border-1: var(--ts-ink-200);
  --border-2: #EBE1EC;
  --border-focus: var(--ts-plum-400);

  /* ===== GRADIENTS — used very sparingly ===== */
  --grad-brand: linear-gradient(135deg, #2A1E30 0%, #4A3550 100%);
  --grad-cta-plate: linear-gradient(135deg, #2A1E30 0%, #180F1D 100%);
  --grad-lavender-fade: linear-gradient(180deg, #FFFFFF 0%, #F6F3F6 100%);

  /* ===== TYPOGRAPHY ===== */
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --fs-hero:   clamp(40px, 5.6vw, 64px);
  --fs-h1:     40px;
  --fs-h2:     32px;
  --fs-h3:     24px;
  --fs-h4:     20px;
  --fs-h5:     18px;
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-body-sm: 14px;
  --fs-meta:    13px;
  --fs-eyebrow: 12px;

  /* ===== SPACING — 4px grid ===== */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* ===== RADII ===== */
  --r-sm:   6px;
  --r-md:   10px;
  --r-card: 12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-pill: 999px;

  /* ===== SHADOWS ===== */
  --shadow-xs: 0 1px 2px rgba(17, 24, 39, 0.04);
  --shadow-sm: 0 2px 6px rgba(17, 24, 39, 0.05);
  --shadow-md: 0 4px 14px rgba(17, 24, 39, 0.06);
  --shadow-card-hover: 0 6px 20px rgba(42, 30, 48, 0.08), 0 2px 6px rgba(17, 24, 39, 0.04);
  --shadow-cta: 0 8px 24px rgba(240, 85, 63, 0.28);
  --shadow-focus: 0 0 0 3px rgba(109, 79, 114, 0.35);

  /* ===== MOTION ===== */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --d-fast: 120ms;
  --d-base: 180ms;
  --d-slow: 260ms;
  --d-slower: 420ms;

  /* ===== LAYOUT ===== */
  --container-max: 1200px;
  --container-narrow: 720px;
  --gutter: 24px;
}

/* ==========================================================================
   TYPOGRAPHY UTILITIES (scoped to the free-tool template wrapper)
   ========================================================================== */
.ts-eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ts-coral-500);
}
.ts-accent { color: var(--ts-coral-400); }

/* ==========================================================================
   BUTTONS — used by the CTA band
   ========================================================================== */
.ts-btn,
.ts-btn-primary {
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all var(--d-base) var(--ease-out);
  white-space: nowrap;
  line-height: 1;
}
.ts-btn-primary {
  background: var(--ts-coral-400);
  color: var(--ts-white);
  box-shadow: var(--shadow-cta);
  font-size: 15px;
  padding: 14px 24px;
}
.ts-btn-primary:hover {
  background: var(--ts-coral-500);
  box-shadow: 0 10px 28px rgba(214, 65, 44, 0.32);
  transform: translateY(-1px);
}
.ts-btn-primary:active { transform: scale(0.98); }