/* ===================================================================
   PalmTreeIQ — Brand Standard (single source of truth)
   Direction: Bold + Minimal. Typography-led.
   Load this LAST in <head>, after any page stylesheet or inline <style>,
   so it standardizes type across every page and future product.
   =================================================================== */

:root {
  /* ---- Brand fonts ---- */
  --ptiq-font-display: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ptiq-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* ---- Brand color (canonical) ---- */
  --ptiq-purple:      #4b2e97;
  --ptiq-purple-deep: #2f1c66;   /* deepened for stronger contrast / bolder feel */
  --ptiq-teal:        #0e8f86;
  --ptiq-teal-bright: #14b8a6;
  --ptiq-ink:         #17151f;    /* near-black headings for crisp contrast */
  --ptiq-slate:       #5b5375;    /* muted body / secondary */
  --ptiq-sand:        #f8f7fc;
  --ptiq-line:        #e5e2ef;

  /* ---- Type scale (fluid) ---- */
  --ptiq-h1: clamp(2.6rem, 5.5vw, 4rem);
  --ptiq-h2: clamp(1.9rem, 3.8vw, 2.6rem);
  --ptiq-h3: 1.32rem;

  /* ---- Spacing rhythm (minimal = generous) ---- */
  --ptiq-section-y: clamp(64px, 9vw, 112px);
}

/* ---- Global text rendering: crisper, more premium ---- */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body { font-family: var(--ptiq-font-body); }

/* ---- Headings: Space Grotesk, bold, tight ---- */
h1, h2, h3, h4, h5, h6,
.brand-name, .logo, .brand, .name {
  font-family: var(--ptiq-font-display);
}

h1 {
  font-weight: 700;
  font-size: var(--ptiq-h1);
  line-height: 1.06;
  letter-spacing: -0.03em;
}

h2 {
  font-weight: 700;
  font-size: var(--ptiq-h2);
  line-height: 1.14;
  letter-spacing: -0.022em;
}

h3 {
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.012em;
}

/* Card / component sub-heads keep the bolder weight but their local size */
.card h3, .card h4 { font-weight: 700; letter-spacing: -0.01em; }

/* Big stat numbers read bolder */
.cred-strip .big, .amt, .big { font-weight: 700 !important; letter-spacing: -0.02em; }

/* Eyebrow / kicker label — the minimal, confident signal above headings */
.eyebrow {
  font-family: var(--ptiq-font-display);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Buttons: slightly heavier label for a more finished feel */
.btn, button.primary, .lemonsqueezy-button { font-weight: 600; letter-spacing: -0.01em; }

/* ===================================================================
   Color deepening (v1.1)
   Teal TEXT uses the readable deeper teal (#0e8f86). The bright teal
   (#14b8a6) fails contrast as text on white, so it is reserved for
   icon strokes and decorative fills only. Dark bands go deeper for
   stronger, more premium contrast.
   =================================================================== */
:root {
  --sunset:    #0e8f86;   /* remaps teal accent text on pages using style.css */
  --brand2:    #0e8f86;   /* remaps teal accent text on square/other pages */
  --navy-deep: #2f1c66;   /* deeper dark brand band */
}

/* Teal accent text → readable deeper teal (overrides inline + class colors) */
h1 .accent,
.brand-name .iq,
.logo b, .name b, .brand b, .apphead .brand b {
  color: #0e8f86 !important;
}

/* Deepen the dark brand band for stronger contrast */
.cred-strip { background: #2f1c66; }

/* ---- Reusable bold band (v1.2) ----
   Add class="band-deep" to any full-width <section> for a bold dark
   moment. Use sparingly: ~2 per page so each stays high-impact. */
.band-deep { background: #2f1c66; color: #ffffff; }
.band-deep h1, .band-deep h2, .band-deep h3 { color: #ffffff; }
.band-deep p { color: #c9c2e6; }
.band-deep .eyebrow { color: #14b8a6; background: transparent; padding-left: 0; }

/* ---- Brand name in text (v1.4) ----
   Write the brand as "Palm Tree IQ". The teal "IQ" appears only in PROMINENT
   placements — headings, nav/header, footers. In body copy the "IQ" inherits the
   normal text color, so repeated mentions in paragraphs don't look spotty. */
.iq { color: inherit; }
h1 .iq, h2 .iq, h3 .iq, h4 .iq,
.brand-name .iq, .brand .iq, .logo .iq, .name .iq,
.nav .iq, .apphead .iq { color: #0e8f86; }
/* Bright teal on dark surfaces (dark bands + footers) */
.cred-strip .iq, .band-deep .iq, .hero-power .iq,
footer .iq, .foot .iq { color: #14b8a6; }

