/* ============================================================================
   PRENDERGAST DIGITAL — DESIGN SYSTEM  (pds-system.css)
   One source of truth for the showcase site. Load AFTER each page's inline
   <style> so the elevated definitions win. Tailwind utilities remain available
   (this file never fights utilities — it owns tokens, type, components, motion).
   See DESIGN-SYSTEM.md for the governing spec.
   ============================================================================ */

/* ---- 1. TOKENS --------------------------------------------------------------- */
:root {
  /* Brand */
  --pds-green:        #155937;
  --pds-green-dark:   #0e3d25;
  --pds-green-light:  #e7f1ea;
  --pds-yellow:       #f6d64b;
  --pds-yellow-dark:  #e6c43a;
  --pds-ink:          #1A1A1A;
  --pds-muted:        #5A5A6A;
  --pds-surface:      #FFFFFF;
  --pds-subtle:       #F5F5F3;
  --pds-border:       #E2E2DF;
  /* Dawnkin zone */
  --dk-deep:          #003E53;
  --dk-sky:           #1599C3;
  --dk-surface:       #EAF6FA;

  /* Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* Shadow — tinted green-black for a premium, non-grey feel */
  --shadow-sm: 0 1px 2px rgba(16,40,28,.06), 0 1px 1px rgba(16,40,28,.04);
  --shadow-md: 0 6px 20px -4px rgba(16,40,28,.10), 0 2px 6px -2px rgba(16,40,28,.06);
  --shadow-lg: 0 18px 40px -12px rgba(16,40,28,.16), 0 6px 14px -6px rgba(16,40,28,.08);

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --t-fast: .15s;
  --t-med: .25s;

  /* Type */
  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;
  --font-tight: 'Inter Tight', 'Inter', system-ui, sans-serif;

  /* Rhythm */
  --container: 1160px;
  --gutter: clamp(1.5rem, 4vw, 2.5rem);
  --section-y: clamp(3.5rem, 6vw, 5.5rem);
}

/* ---- 2. BASE / PREMIUM DEFAULTS --------------------------------------------- */
html { scroll-behavior: smooth; }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--pds-yellow); color: var(--pds-green); }
/* Anchored sections clear the sticky header */
:where([id]) { scroll-margin-top: 5rem; }
*:focus-visible { outline: 3px solid rgba(21,89,55,.55); outline-offset: 2px; border-radius: 2px; }
img, svg, canvas { display: block; max-width: 100%; }

/* ---- 3. TYPOGRAPHY ----------------------------------------------------------- */
.text-display {
  font-family: var(--font-tight);
  font-size: clamp(2.4rem, 1.5rem + 3.6vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 600;
}
.text-h2 {
  font-family: var(--font-tight);
  font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.25rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  font-weight: 600;
}
.text-h3 {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-weight: 600;
}
.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.lead {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.7;
  color: var(--pds-ink);
}
.measure   { max-width: 68ch; }
.measure-sm{ max-width: 54ch; }

/* ---- 4. LAYOUT --------------------------------------------------------------- */
.pds-container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section       { padding-block: var(--section-y); }
.section-tight { padding-block: clamp(2.5rem, 4vw, 3.5rem); }

/* ---- 5. BUTTONS -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-sans); font-size: .9375rem; font-weight: 500; line-height: 1;
  padding: .8125rem 1.5rem; border-radius: var(--r-md);
  border: 1px solid transparent; text-decoration: none; cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn .arrow-icon { transition: transform var(--t-fast) var(--ease); }
.btn:hover .arrow-icon { transform: translateX(3px); }

/* Primary = yellow (the single global conversion action) */
.btn-primary { background: var(--pds-yellow); color: var(--pds-green); }
.btn-primary:hover { background: var(--pds-yellow-dark); box-shadow: var(--shadow-md); }

/* Dark = solid green (in-page primary on light backgrounds) */
.btn-dark { background: var(--pds-green); color: #fff; }
.btn-dark:hover { background: var(--pds-green-dark); box-shadow: var(--shadow-md); }

/* Outline (on light) */
.btn-outline { background: transparent; color: var(--pds-green); border-color: var(--pds-border); }
.btn-outline:hover { border-color: var(--pds-green); color: var(--pds-green); }

/* Outline on dark/green/teal backgrounds */
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn-outline-light:hover { background: #fff; color: var(--pds-green); }

/* Dawnkin zone primary */
.btn-sky { background: var(--dk-sky); color: #fff; }
.btn-sky:hover { background: #117aaa; box-shadow: var(--shadow-md); }

/* ---- 6. CARDS / SURFACES ----------------------------------------------------- */
.card {
  background: var(--pds-surface);
  border: 1px solid var(--pds-border);
  border-radius: var(--r-lg);
}
.card-lift { transition: box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.card-lift:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: #d6d6d2; }

/* ---- 7. BADGES / PILLS ------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: .375rem;
  font-size: .625rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: .25rem .5rem; border-radius: var(--r-pill); line-height: 1;
}
.badge-product { background: var(--dk-sky); color: #fff; }
.badge-soon    { background: var(--pds-muted); color: #fff; }
.badge-live    { background: #2D7A4F; color: #fff; }

/* ---- 8. LINKS / MOTION ------------------------------------------------------- */
.arrow-link .arrow-icon { display: inline-block; transition: transform var(--t-fast) var(--ease); }
.arrow-link:hover .arrow-icon { transform: translateX(3px); }

.key-link { position: relative; }
.key-link::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: var(--pds-yellow); transition: width var(--t-med) var(--ease); }
.key-link:hover::after { width: 100%; }

/* Scroll reveal (paired with the page's IntersectionObserver toggling .visible) */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Decorative top hairline for CTA/accent bands */
.accent-top { position: relative; }
.accent-top::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--pds-yellow); }

/* ---- 9. REDUCED MOTION ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn, .btn .arrow-icon, .arrow-link .arrow-icon, .key-link::after, .card-lift { transition: none !important; }
  .btn:hover, .card-lift:hover { transform: none !important; }
}