/* =========================================================================
   Tech Plan Genie — Foundations
   Colors, type, spacing, radius, shadows, motion
   ========================================================================= */

@import url("https://fonts.googleapis.com/css2?family=League+Spartan:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap");

:root {
  /* -----------------------------------------------------------------------
     COLOR — Brand
     ----------------------------------------------------------------------- */
  --tpg-orange:        #fd8c00;        /* Primary — energy, magic, the genie */
  --tpg-orange-600:    #e57e00;
  --tpg-orange-500:    #fd8c00;
  --tpg-orange-400:    #ffa53d;
  --tpg-orange-300:    #ffc079;
  --tpg-orange-100:    #ffe9cc;
  --tpg-orange-50:     #fff5e6;

  --tpg-purple:        #5214c0;        /* Primary — authority, trust, deep tech */
  --tpg-purple-700:    #3d0e90;
  --tpg-purple-600:    #4a12ad;
  --tpg-purple-500:    #5214c0;
  --tpg-purple-400:    #7a44d4;
  --tpg-purple-300:    #a87de4;
  --tpg-purple-200:    #d2b8f1;
  --tpg-purple-100:    #ebdcf9;
  --tpg-purple-50:     #f5edfc;

  /* Sky from the dashboard hero scene — used sparingly for illustration BGs */
  --tpg-sky-top:       #b8e0ff;
  --tpg-sky-bottom:    #fbe6c7;
  --tpg-grass:         #7bc560;

  /* -----------------------------------------------------------------------
     COLOR — Neutrals
     Warm-tinted to harmonize with the orange. Never pure black.
     ----------------------------------------------------------------------- */
  --tpg-ink:           #1a0d2e;        /* Headings, hero copy — deep purple-black */
  --tpg-ink-2:         #2d1f47;        /* Body */
  --tpg-ink-3:         #4a3a6b;        /* Muted body */
  --tpg-ink-4:         #7a6e94;        /* Captions, helper text */
  --tpg-line:          #e9e4f1;        /* Borders, dividers */
  --tpg-line-strong:   #d4cce0;
  --tpg-bg:            #ffffff;
  --tpg-bg-soft:       #faf7ff;        /* Tinted page wash */
  --tpg-bg-cream:      #fff8ee;        /* Warm wash for cards/accents */

  /* -----------------------------------------------------------------------
     COLOR — Semantic
     ----------------------------------------------------------------------- */
  --tpg-success:       #18a957;
  --tpg-success-bg:    #e3f7ec;
  --tpg-warning:       #f4b400;
  --tpg-warning-bg:    #fef4d3;
  --tpg-danger:        #d63d3d;
  --tpg-danger-bg:     #fde6e6;
  --tpg-info:          #2b7fff;
  --tpg-info-bg:       #e3eeff;

  /* -----------------------------------------------------------------------
     SEMANTIC color tokens (use these in components)
     ----------------------------------------------------------------------- */
  --fg-1:              var(--tpg-ink);
  --fg-2:              var(--tpg-ink-2);
  --fg-3:              var(--tpg-ink-3);
  --fg-muted:          var(--tpg-ink-4);
  --fg-on-brand:       #ffffff;
  --fg-link:           var(--tpg-purple);
  --fg-link-hover:     var(--tpg-purple-700);

  --bg-page:           var(--tpg-bg);
  --bg-soft:           var(--tpg-bg-soft);
  --bg-cream:          var(--tpg-bg-cream);
  --bg-card:           #ffffff;

  --brand-primary:     var(--tpg-purple);   /* the "trust" anchor */
  --brand-accent:      var(--tpg-orange);   /* the "magic" pop */

  --border:            var(--tpg-line);
  --border-strong:     var(--tpg-line-strong);

  /* -----------------------------------------------------------------------
     TYPE — Families
     ----------------------------------------------------------------------- */
  --font-display:      "League Spartan", "Inter", system-ui, sans-serif;
  --font-body:         "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:         ui-monospace, "SF Mono", Menlo, monospace;

  /* TYPE — Scale (using a 1.25 modular scale, snapped) */
  --fs-12:  0.75rem;
  --fs-14:  0.875rem;
  --fs-16:  1rem;
  --fs-18:  1.125rem;
  --fs-20:  1.25rem;
  --fs-24:  1.5rem;
  --fs-28:  1.75rem;
  --fs-32:  2rem;
  --fs-40:  2.5rem;
  --fs-48:  3rem;
  --fs-56:  3.5rem;
  --fs-64:  4rem;
  --fs-80:  5rem;

  /* TYPE — Weights (League Spartan reads VERY heavy at 800/900) */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-black:    800; /* @kind font */
  --fw-blacker:  900; /* @kind font */

  /* TYPE — Leading & tracking */
  --lh-tight:    1.05; /* @kind font */
  --lh-snug:     1.2;  /* @kind font */
  --lh-normal:   1.45; /* @kind font */
  --lh-relaxed:  1.6;  /* @kind font */

  --tr-tight:    -0.02em; /* @kind font */
  --tr-snug:     -0.01em; /* @kind font */
  --tr-normal:    0;      /* @kind font */
  --tr-wide:      0.02em; /* @kind font */
  --tr-wider:     0.08em; /* @kind font */  /* The deck's "T H E P L A N N I N G G A P" */

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

  /* -----------------------------------------------------------------------
     RADIUS — Generous, friendly. The app uses softly-rounded everything.
     ----------------------------------------------------------------------- */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  20px;
  --radius-2xl: 28px;
  --radius-pill: 9999px;

  /* -----------------------------------------------------------------------
     SHADOWS — Soft, warm. Avoid grey shadows; they feel cold against orange.
     ----------------------------------------------------------------------- */
  --shadow-xs:  0 1px 2px rgba(46, 16, 96, 0.06);
  --shadow-sm:  0 2px 6px rgba(46, 16, 96, 0.08);
  --shadow-md:  0 6px 16px rgba(46, 16, 96, 0.10);
  --shadow-lg:  0 16px 40px rgba(46, 16, 96, 0.14);
  --shadow-xl:  0 24px 60px rgba(46, 16, 96, 0.18);
  --shadow-glow-orange: 0 0 0 4px rgba(253, 140, 0, 0.18);
  --shadow-glow-purple: 0 0 0 4px rgba(82, 20, 192, 0.18);

  /* -----------------------------------------------------------------------
     MOTION
     ----------------------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */  /* slight overshoot, "magic" */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:    140ms; /* @kind other */
  --dur-base:    220ms; /* @kind other */
  --dur-slow:    360ms; /* @kind other */

  /* -----------------------------------------------------------------------
     LAYOUT
     ----------------------------------------------------------------------- */
  --container-narrow: 720px;
  --container:        1080px;
  --container-wide:   1280px;
}

/* =========================================================================
   SEMANTIC TYPE — apply these classes (or use the element styles below)
   ========================================================================= */

html { font-size: 16px; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display — League Spartan, very heavy. The Tech Plan Genie wordmark vibe. */
.tpg-display, h1.tpg-h1, .tpg-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-blacker);
  font-size: clamp(var(--fs-48), 6vw, var(--fs-80));
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
  text-transform: uppercase;
}

.tpg-h2, h2.tpg-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-48);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}

.tpg-h3, h3.tpg-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-32);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  color: var(--fg-1);
}

.tpg-h4, h4.tpg-h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

/* Eyebrow — wide-tracked all-caps small label, used on the deck */
.tpg-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-14);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--brand-primary);
}

.tpg-lead {
  font-family: var(--font-body);
  font-size: var(--fs-20);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  font-weight: var(--fw-regular);
}

p, .tpg-body {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.tpg-small {
  font-size: var(--fs-14);
  color: var(--fg-3);
}

.tpg-caption {
  font-size: var(--fs-12);
  color: var(--fg-muted);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
}

code, .tpg-code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-soft);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-xs);
  color: var(--brand-primary);
}

a {
  color: var(--fg-link);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--fg-link-hover); }