/* ============================================================
   The Product Unicorn — Design Tokens
   Colors + Type + Spacing + Radii + Shadows
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ---------- BRAND COLORS (strict, no off-brand) ---------- */
  --tpu-violet:    #481D59;  /* Primary — backgrounds, headers, primary fills */
  --tpu-gold:      #D5B036;  /* Secondary — highlights, callouts, emphasis    */
  --tpu-offwhite:  #FAFAFA;  /* Accent 1 — body on dark, light-fill sections  */
  --tpu-lavender:  #E6E6FA;  /* Accent 2 — secondary bg, subtle dividers      */

  /* Violet tints/shades (executive surfaces, never neon) */
  --tpu-violet-900: #2D1238;
  --tpu-violet-800: #3A1748;
  --tpu-violet-700: #481D59;   /* base */
  --tpu-violet-600: #5E2F70;
  --tpu-violet-500: #7A4B8D;
  --tpu-violet-400: #9B73AC;
  --tpu-violet-300: #BFA0CD;
  --tpu-violet-200: #DBCBE4;
  --tpu-violet-100: #EFE7F3;

  /* Gold tints/shades (use sparingly, always purposeful) */
  --tpu-gold-700:  #9A7D1F;
  --tpu-gold-600:  #B89726;
  --tpu-gold-500:  #D5B036;   /* base */
  --tpu-gold-400:  #DFC362;
  --tpu-gold-300:  #E9D58E;
  --tpu-gold-200:  #F2E6B9;
  --tpu-gold-100:  #FAF5E1;

  /* Neutrals — slightly warm, never pure white/black */
  --tpu-ink:       #1A1320;   /* near-black, violet-shifted */
  --tpu-ink-2:     #3A2E44;
  --tpu-ink-3:     #6B5F75;
  --tpu-paper:     #FAFAFA;   /* off-white */
  --tpu-paper-2:   #F2F0F5;
  --tpu-line:      #DCD6E2;   /* dividers on light surfaces */
  --tpu-line-dark: #5E2F70;   /* dividers on violet surfaces */

  /* ---------- SEMANTIC SURFACE TOKENS ---------- */
  --bg-primary:        var(--tpu-violet);
  --bg-elevated:       var(--tpu-violet-800);
  --bg-light:          var(--tpu-paper);
  --bg-light-alt:      var(--tpu-lavender);

  --fg-on-violet:      var(--tpu-offwhite);
  --fg-on-violet-mute: rgba(250, 250, 250, 0.72);
  --fg-on-light:       var(--tpu-ink);
  --fg-on-light-mute:  var(--tpu-ink-3);

  --accent:            var(--tpu-gold);
  --accent-hover:      var(--tpu-gold-400);
  --accent-press:      var(--tpu-gold-700);

  --border-light:      var(--tpu-line);
  --border-dark:       var(--tpu-line-dark);

  /* ---------- TYPE: Montserrat, single typeface, period ---------- */
  --font-sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Weights — used as labelled, no exceptions */
  --w-light:    300;  /* body / supporting */
  --w-regular:  400;  /* body */
  --w-medium:   500;  /* UI labels */
  --w-semibold: 600;  /* subheads, callouts, labels */
  --w-bold:     700;  /* headlines */
  --w-extra:    800;  /* hero, section titles */

  /* Type scale — disciplined, executive */
  --t-eyebrow:   0.75rem;   /* 12px — section eyebrow ("The Problem") */
  --t-caption:   0.8125rem; /* 13px */
  --t-small:     0.875rem;  /* 14px */
  --t-body:      1rem;      /* 16px */
  --t-body-lg:   1.125rem;  /* 18px */
  --t-h6:        1.125rem;  /* 18px */
  --t-h5:        1.375rem;  /* 22px */
  --t-h4:        1.75rem;   /* 28px */
  --t-h3:        2.25rem;   /* 36px */
  --t-h2:        3rem;      /* 48px */
  --t-h1:        4rem;      /* 64px */
  --t-display:   5.5rem;    /* 88px — hero on web */

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  --ls-tight:   -0.02em;
  --ls-normal:  -0.01em;
  --ls-wide:    0.02em;
  --ls-eyebrow: 0.18em;   /* uppercase eyebrows */

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

  /* ---------- RADII (restrained; executive, not bubbly) ---------- */
  --r-none: 0;
  --r-sm:   2px;
  --r-md:   4px;
  --r-lg:   8px;
  --r-xl:   12px;
  --r-pill: 999px;

  /* ---------- SHADOWS (sparing, soft) ---------- */
  --shadow-1: 0 1px 2px rgba(26, 19, 32, 0.06);
  --shadow-2: 0 4px 12px rgba(26, 19, 32, 0.08);
  --shadow-3: 0 12px 32px rgba(26, 19, 32, 0.14);
  --shadow-violet: 0 16px 48px rgba(72, 29, 89, 0.32);

  /* ---------- MOTION ---------- */
  --ease-out:   cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in:    cubic-bezier(0.6, 0, 0.8, 0.4);
  --ease-std:   cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   360ms;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   Use these instead of raw size vars; they enforce weight & LH.
   ============================================================ */

.tpu-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: var(--t-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--tpu-gold);
}

.tpu-display {
  font-family: var(--font-sans);
  font-weight: var(--w-extra);
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.tpu-h1 {
  font-family: var(--font-sans);
  font-weight: var(--w-extra);
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.tpu-h2 {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}

.tpu-h3 {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
}

.tpu-h4 {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: var(--t-h4);
  line-height: var(--lh-snug);
}

.tpu-h5 {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: var(--t-h5);
  line-height: var(--lh-snug);
}

.tpu-subhead {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: var(--t-h6);
  line-height: var(--lh-normal);
}

.tpu-body-lg {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--t-body-lg);
  line-height: var(--lh-relaxed);
}

.tpu-body {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--t-body);
  line-height: var(--lh-relaxed);
}

.tpu-body-light {
  font-family: var(--font-sans);
  font-weight: var(--w-light);
  font-size: var(--t-body);
  line-height: var(--lh-relaxed);
}

.tpu-caption {
  font-family: var(--font-sans);
  font-weight: var(--w-medium);
  font-size: var(--t-caption);
  line-height: var(--lh-normal);
  color: var(--fg-on-light-mute);
}

.tpu-label {
  font-family: var(--font-sans);
  font-weight: var(--w-semibold);
  font-size: var(--t-small);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.tpu-numeral {
  font-family: var(--font-sans);
  font-weight: var(--w-extra);
  font-feature-settings: "tnum" 1;
  letter-spacing: var(--ls-tight);
}

/* ============================================================
   BASE — bare-element styles when scoped under .tpu-doc
   Use <body class="tpu-doc"> or wrap content in .tpu-doc.
   ============================================================ */

.tpu-doc {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  color: var(--fg-on-light);
  background: var(--bg-light);
  font-size: var(--t-body);
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.tpu-doc h1 { font-weight: var(--w-extra);    font-size: var(--t-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
.tpu-doc h2 { font-weight: var(--w-bold);     font-size: var(--t-h2); line-height: var(--lh-snug);  letter-spacing: var(--ls-tight); }
.tpu-doc h3 { font-weight: var(--w-bold);     font-size: var(--t-h3); line-height: var(--lh-snug); }
.tpu-doc h4 { font-weight: var(--w-semibold); font-size: var(--t-h4); line-height: var(--lh-snug); }
.tpu-doc h5 { font-weight: var(--w-semibold); font-size: var(--t-h5); line-height: var(--lh-snug); }
.tpu-doc h6 { font-weight: var(--w-semibold); font-size: var(--t-h6); line-height: var(--lh-normal); }

.tpu-doc p     { margin: 0 0 var(--s-4) 0; text-wrap: pretty; }
.tpu-doc strong{ font-weight: var(--w-semibold); }
.tpu-doc a     { color: var(--tpu-violet); text-decoration: underline; text-underline-offset: 3px; }
.tpu-doc a:hover { color: var(--tpu-violet-600); }