/* ==========================================================================
   PrepSora — Design System
   Single source of truth for brand tokens + base styles + core components.
   Loaded after GeneratePress via functions.php.

   Token prefix: --ps-*    Class prefix: .ps-*
   ========================================================================== */

:root {

  /* ----------------------------------------------------------------------
     COLOR — full scales derived from the brand palette
     Brand anchors: Navy #0D1B2A · Teal #0D9488 · Green #22C55E
                    Slate #475569 · Off-White #F7F9FB
     ---------------------------------------------------------------------- */

  /* Navy — custom scale anchored on the brand navy (#0D1B2A) */
  --ps-navy-950: #081019;
  --ps-navy-900: #0D1B2A;  /* brand navy — headings, footer, dark sections */
  --ps-navy-800: #122335;
  --ps-navy-700: #192F45;
  --ps-navy-600: #223D58;
  --ps-navy-500: #2F5276;
  --ps-navy-400: #496E94;
  --ps-navy-300: #7491B0;
  --ps-navy-200: #AABDD2;
  --ps-navy-100: #D7E0EA;
  --ps-navy-50:  #EFF3F8;

  /* Teal — brand teal (#0D9488) is the 600 step */
  --ps-teal-900: #134E4A;
  --ps-teal-800: #115E59;
  --ps-teal-700: #0F766E;
  --ps-teal-600: #0D9488;  /* brand teal — primary actions, links */
  --ps-teal-500: #14B8A6;
  --ps-teal-400: #2DD4BF;
  --ps-teal-300: #5EEAD4;
  --ps-teal-200: #99F6E4;
  --ps-teal-100: #CCFBF1;
  --ps-teal-50:  #F0FDFA;

  /* Green — brand green (#22C55E) is the 500 step. ACCENT ONLY. */
  --ps-green-700: #15803D;
  --ps-green-600: #16A34A;
  --ps-green-500: #22C55E;  /* brand green — CTAs, success, progress */
  --ps-green-400: #4ADE80;
  --ps-green-100: #DCFCE7;
  --ps-green-50:  #F0FDF4;

  /* Slate — neutral text + UI; brand body grey (#475569) is the 600 step */
  --ps-slate-900: #0F172A;
  --ps-slate-800: #1E293B;
  --ps-slate-700: #334155;
  --ps-slate-600: #475569;  /* brand slate — captions, secondary text */
  --ps-slate-500: #64748B;
  --ps-slate-400: #94A3B8;
  --ps-slate-300: #CBD5E1;
  --ps-slate-200: #E2E8F0;
  --ps-slate-100: #F1F5F9;
  --ps-slate-50:  #F8FAFC;

  --ps-white:    #FFFFFF;
  --ps-offwhite: #F7F9FB;  /* brand off-white — page background */

  /* ----------------------------------------------------------------------
     SEMANTIC TOKENS — use these in page CSS, not the raw scales above.
     ---------------------------------------------------------------------- */
  --ps-bg:              var(--ps-offwhite);
  --ps-surface:         var(--ps-white);
  --ps-surface-sunken:  var(--ps-slate-50);
  --ps-surface-dark:    var(--ps-navy-900);
  --ps-surface-darker:  var(--ps-navy-950);

  --ps-text:            var(--ps-slate-700);   /* primary body — chosen for long-read comfort */
  --ps-text-muted:      var(--ps-slate-500);
  --ps-heading:         var(--ps-navy-900);
  --ps-text-on-dark:        #E7EDF4;
  --ps-text-on-dark-muted:  #9DB0C5;

  --ps-primary:         var(--ps-teal-600);
  --ps-primary-hover:   var(--ps-teal-700);
  --ps-primary-active:  var(--ps-teal-800);
  --ps-primary-soft:    var(--ps-teal-50);

  --ps-accent:          var(--ps-green-500);   /* spend sparingly — the "go" colour */
  --ps-accent-hover:    var(--ps-green-600);
  --ps-accent-soft:     var(--ps-green-50);

  --ps-link:            var(--ps-teal-700);
  --ps-link-hover:      var(--ps-teal-800);

  --ps-border:          var(--ps-slate-200);
  --ps-border-strong:   var(--ps-slate-300);
  --ps-ring:            var(--ps-teal-500);

  --ps-success:         var(--ps-green-600);
  --ps-warning:         #B45309;
  --ps-danger:          #DC2626;

  /* ----------------------------------------------------------------------
     TYPOGRAPHY
     ---------------------------------------------------------------------- */
  --ps-font-display: 'Sora', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ps-font-body:    'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --ps-text-xs:   0.75rem;
  --ps-text-sm:   0.875rem;
  --ps-text-base: 1rem;
  --ps-text-lg:   1.125rem;
  --ps-text-xl:   1.25rem;
  --ps-text-2xl:  1.5rem;
  --ps-text-3xl:  1.875rem;
  --ps-text-4xl:  2.25rem;
  --ps-text-5xl:  clamp(2.5rem, 1.55rem + 3.8vw, 3.75rem);  /* fluid hero */

  --ps-leading-tight:  1.15;
  --ps-leading-snug:   1.3;
  --ps-leading-normal: 1.6;
  --ps-tracking-tight: -0.02em;
  --ps-tracking-wide:  0.08em;

  /* ----------------------------------------------------------------------
     SPACING (4px base) · RADII · SHADOWS · LAYOUT · MOTION
     ---------------------------------------------------------------------- */
  --ps-space-1: 0.25rem;
  --ps-space-2: 0.5rem;
  --ps-space-3: 0.75rem;
  --ps-space-4: 1rem;
  --ps-space-5: 1.5rem;
  --ps-space-6: 2rem;
  --ps-space-7: 3rem;
  --ps-space-8: 4rem;
  --ps-space-9: 6rem;

  --ps-radius-sm:   6px;
  --ps-radius:      10px;
  --ps-radius-md:   14px;
  --ps-radius-lg:   20px;
  --ps-radius-xl:   28px;
  --ps-radius-full: 999px;

  --ps-shadow-xs: 0 1px 2px rgba(13, 27, 42, 0.06);
  --ps-shadow-sm: 0 2px 8px rgba(13, 27, 42, 0.06);
  --ps-shadow:    0 6px 20px rgba(13, 27, 42, 0.08);
  --ps-shadow-lg: 0 18px 40px rgba(13, 27, 42, 0.12);

  --ps-container:        1180px;
  --ps-container-narrow: 760px;
  --ps-container-wide:   1320px;

  --ps-transition:      180ms ease;
  --ps-transition-slow: 320ms ease;
}

/* ==========================================================================
   BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--ps-font-body);
  font-size: var(--ps-text-base);
  line-height: var(--ps-leading-normal);
  color: var(--ps-text);
  background-color: var(--ps-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ps-font-display);
  color: var(--ps-heading);
  line-height: var(--ps-leading-tight);
  letter-spacing: var(--ps-tracking-tight);
  font-weight: 700;
  margin: 0 0 var(--ps-space-4);
}

h1 { font-size: var(--ps-text-5xl); }
h2 { font-size: var(--ps-text-4xl); }
h3 { font-size: var(--ps-text-2xl); }
h4 { font-size: var(--ps-text-xl); }
h5 { font-size: var(--ps-text-lg); }
h6 { font-size: var(--ps-text-base); letter-spacing: var(--ps-tracking-wide); text-transform: uppercase; }

p { margin: 0 0 var(--ps-space-4); }

a {
  color: var(--ps-link);
  text-decoration: none;
  transition: color var(--ps-transition);
}
a:hover { color: var(--ps-link-hover); text-decoration: underline; }

img, svg, video { max-width: 100%; height: auto; }

strong, b { font-weight: 600; }

:focus-visible {
  outline: 3px solid var(--ps-ring);
  outline-offset: 2px;
  border-radius: var(--ps-radius-sm);
}

::selection { background: var(--ps-teal-200); color: var(--ps-navy-900); }

/* ==========================================================================
   LAYOUT HELPERS
   ========================================================================== */

.ps-container {
  width: 100%;
  max-width: var(--ps-container);
  margin-inline: auto;
  padding-inline: var(--ps-space-5);
}
.ps-container--narrow { max-width: var(--ps-container-narrow); }
.ps-container--wide   { max-width: var(--ps-container-wide); }

.ps-section { padding-block: var(--ps-space-8); }

.ps-section--dark {
  background: var(--ps-surface-dark);
  color: var(--ps-text-on-dark);
}
.ps-section--dark h1,
.ps-section--dark h2,
.ps-section--dark h3,
.ps-section--dark h4 { color: #fff; }

.ps-section--sunken { background: var(--ps-surface-sunken); }

/* Eyebrow label — small uppercase kicker above headings */
.ps-eyebrow {
  display: inline-block;
  font-family: var(--ps-font-body);
  font-size: var(--ps-text-sm);
  font-weight: 600;
  letter-spacing: var(--ps-tracking-wide);
  text-transform: uppercase;
  color: var(--ps-primary);
  margin-bottom: var(--ps-space-3);
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.ps-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ps-space-2);
  font-family: var(--ps-font-body);
  font-size: var(--ps-text-base);
  font-weight: 600;
  line-height: 1;
  padding: 0.875rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--ps-radius-full);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--ps-transition),
              color var(--ps-transition),
              border-color var(--ps-transition),
              transform var(--ps-transition),
              box-shadow var(--ps-transition);
}
.ps-btn:hover  { text-decoration: none; transform: translateY(-1px); }
.ps-btn:active { transform: translateY(0); }

/* Primary — brand teal, the default action */
.ps-btn--primary { background: var(--ps-primary); color: #fff; }
.ps-btn--primary:hover { background: var(--ps-primary-hover); color: #fff; box-shadow: var(--ps-shadow-sm); }

/* CTA — bright green with deep-navy label: high contrast, the "start / buy" moment */
.ps-btn--cta { background: var(--ps-accent); color: var(--ps-navy-950); }
.ps-btn--cta:hover { background: var(--ps-accent-hover); color: var(--ps-navy-950); box-shadow: var(--ps-shadow-sm); }

/* Ghost — outlined, secondary action */
.ps-btn--ghost { background: transparent; color: var(--ps-primary); border-color: var(--ps-border-strong); }
.ps-btn--ghost:hover { background: var(--ps-primary-soft); color: var(--ps-primary-hover); }

/* On dark backgrounds */
.ps-btn--on-dark { background: #fff; color: var(--ps-navy-900); }
.ps-btn--on-dark:hover { background: var(--ps-slate-100); color: var(--ps-navy-900); }

/* ==========================================================================
   CARD
   ========================================================================== */

.ps-card {
  background: var(--ps-surface);
  border: 1px solid var(--ps-border);
  border-radius: var(--ps-radius-md);
  padding: var(--ps-space-5);
  box-shadow: var(--ps-shadow-xs);
  transition: box-shadow var(--ps-transition), transform var(--ps-transition);
}
.ps-card:hover { box-shadow: var(--ps-shadow); transform: translateY(-2px); }

/* ==========================================================================
   SHARED PAGE COMPONENTS (used across multiple page templates)
   ========================================================================== */

/* Section head: eyebrow + heading */
.ps-section-head { max-width: 60ch; margin-bottom: var(--ps-space-6); }
.ps-section-head h2 { margin: 0; }
.ps-section-head .ps-eyebrow { margin-bottom: var(--ps-space-2); }
.ps-section-head--center { margin-inline: auto; text-align: center; }

/* Readable prose block */
.ps-prose { max-width: 70ch; }
.ps-prose p { font-size: var(--ps-text-lg); }
.ps-prose p:last-child { margin-bottom: 0; }

/* Eyebrow on dark sections */
.ps-section--dark .ps-eyebrow { color: var(--ps-teal-300); }

/* Button row */
.ps-btn-row { display: flex; flex-wrap: wrap; gap: var(--ps-space-3); }
.ps-btn-row--center { justify-content: center; }

/* Ghost button for dark backgrounds */
.ps-btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.5); }
.ps-btn--ghost-light:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }

/* Status badge */
.ps-badge { display: inline-block; font-size: var(--ps-text-xs); font-weight: 700; padding: 3px 10px; border-radius: var(--ps-radius-full); }
.ps-badge--live { background: var(--ps-green-100); color: var(--ps-green-700); }
.ps-badge--soon { background: var(--ps-slate-100); color: var(--ps-slate-500); }

/* FAQ accordion (native <details>) */
.ps-faq__list { max-width: var(--ps-container-narrow); margin: var(--ps-space-6) auto 0; }
.ps-faq__item { border-bottom: 1px solid var(--ps-border); }
.ps-faq__item summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--ps-space-4);
	padding: var(--ps-space-5) 0;
	font-family: var(--ps-font-display);
	font-weight: 600;
	font-size: var(--ps-text-lg);
	color: var(--ps-navy-900);
}
.ps-faq__item summary::-webkit-details-marker { display: none; }
.ps-faq__item summary::after { content: "+"; color: var(--ps-primary); font-size: 1.5em; font-weight: 400; line-height: 1; }
.ps-faq__item[open] summary::after { content: "\2212"; }
.ps-faq__item p { margin: 0; padding: 0 0 var(--ps-space-5); color: var(--ps-text); max-width: 64ch; }

/* Closing CTA band (teal gradient) */
.ps-cta-band { background: linear-gradient(135deg, var(--ps-teal-700), var(--ps-teal-900)); color: #fff; }
.ps-cta-band__inner { text-align: center; padding-block: var(--ps-space-8); }
.ps-cta-band h2 { color: #fff; }
.ps-cta-band p { color: var(--ps-teal-100); max-width: 50ch; margin: 0 auto var(--ps-space-5); }
.ps-cta-band .ps-btn-row { justify-content: center; }

/* ==========================================================================
   ACCESSIBILITY: respect reduced-motion preferences
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}