/* =================================================================
   Persec Services — Foundation tokens
   Colors, typography, spacing, radii, shadows, motion
   ================================================================= */

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

:root {
  /* ----- Base color palette ----- */
  --persec-cream:        #FAF9F5;   /* default page canvas */
  --persec-cream-warm:   #F4F1E8;   /* slightly warmer band */
  --persec-white:        #FFFFFF;   /* elevated cards / inputs */
  --persec-ink:          #2B323A;   /* slate — darkest ink, never black */
  --persec-ink-soft:     #30302E;   /* charcoal */
  --persec-ink-muted:    #5A6470;   /* secondary text */
  --persec-ink-faint:    #8A93A0;   /* tertiary, captions */
  --persec-hairline:     rgba(43, 50, 58, 0.10);
  --persec-hairline-strong: rgba(43, 50, 58, 0.20);

  /* ----- Accents ----- */
  --persec-indigo:       #3D4FB8;   /* primary accent */
  --persec-indigo-dark:  #2E3D94;   /* hover */
  --persec-indigo-soft:  #E3E7F6;   /* tinted background */
  --persec-indigo-ink:   #1F2A6B;   /* indigo text on cream */

  --persec-amber:        #E89C2F;   /* safety amber — sparingly */
  --persec-amber-dark:   #C07B16;
  --persec-amber-soft:   #FAEDD2;

  /* ----- Semantic ----- */
  --persec-success:      #2E7D55;
  --persec-success-soft: #E0EFE6;
  --persec-warning:      #E89C2F;
  --persec-warning-soft: #FAEDD2;
  --persec-danger:       #B43A2E;
  --persec-danger-soft:  #F6DEDB;
  --persec-info:         #3D4FB8;
  --persec-info-soft:    #E3E7F6;

  /* ----- Surface aliases (semantic) ----- */
  --bg-page:             var(--persec-cream);
  --bg-elevated:         var(--persec-white);
  --bg-inverse:          var(--persec-ink);
  --bg-band:             var(--persec-cream-warm);
  --fg-default:          var(--persec-ink);
  --fg-muted:            var(--persec-ink-muted);
  --fg-faint:            var(--persec-ink-faint);
  --fg-on-inverse:       var(--persec-cream);
  --fg-link:             var(--persec-indigo);
  --border-default:      var(--persec-hairline);
  --border-strong:       var(--persec-hairline-strong);

  /* ----- Typography stacks ----- */
  --font-display: 'Urbanist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans:    'Public Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* ----- Type scale ----- */
  --fs-12: 12px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-22: 22px;
  --fs-28: 28px;
  --fs-36: 36px;
  --fs-48: 48px;
  --fs-60: 60px;
  --fs-80: 80px;
  --fs-120: 120px;
  --fs-165: 165px;

  /* ----- Spacing (4px base) ----- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-24: 96px;
  --sp-32: 128px;
  --sp-48: 192px;

  /* ----- Radii ----- */
  --radius-xs: 2px;
  --radius-sm: 4px;     /* buttons, inputs */
  --radius-md: 8px;     /* cards */
  --radius-lg: 16px;    /* feature panels */
  --radius-pill: 999px; /* chips, tags */

  /* ----- Shadows (two-step elevation, very soft) ----- */
  --shadow-1: 0 1px 2px rgba(31, 35, 40, 0.04), 0 1px 3px rgba(31, 35, 40, 0.06);
  --shadow-2: 0 4px 8px rgba(31, 35, 40, 0.06), 0 12px 24px rgba(31, 35, 40, 0.08);

  /* ----- Motion ----- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 300ms;

  /* ----- Layout ----- */
  --content-max: 1280px;
  --gutter: 24px;
}

/* =================================================================
   Semantic type recipes — use these directly
   ================================================================= */

.persec-display-xl,
.persec-display-lg,
.persec-display,
.persec-h1, .persec-h2, .persec-h3, .persec-h4,
.persec-body, .persec-body-lg, .persec-body-sm,
.persec-label, .persec-eyebrow,
.persec-button {
  color: var(--fg-default);
  font-feature-settings: 'ss01', 'tnum' off;
}

.persec-display-xl {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(80px, 12vw, 165px);
  line-height: 0.92;
  letter-spacing: -0.035em;
}

.persec-display-lg {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(60px, 8vw, 120px);
  line-height: 0.95;
  letter-spacing: -0.03em;
}

.persec-display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(48px, 6vw, 80px);
  line-height: 1.0;
  letter-spacing: -0.025em;
}

.persec-h1 {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-60);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.persec-h2 {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-48);
  line-height: 1.1;
  letter-spacing: -0.018em;
}

.persec-h3 {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-36);
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.persec-h4 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-22);
  line-height: 1.3;
  letter-spacing: -0.005em;
}

.persec-body-lg {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-18);
  line-height: 1.6;
}

.persec-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-16);
  line-height: 1.55;
}

.persec-body-sm {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-14);
  line-height: 1.5;
  color: var(--fg-muted);
}

.persec-label {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-14);
  line-height: 1.3;
  color: var(--fg-default);
}

.persec-eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.persec-button {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0;
}

/* =================================================================
   Base reset (opt-in — apply by adding .persec-base to <body>)
   ================================================================= */

.persec-base {
  margin: 0;
  background: var(--bg-page);
  color: var(--fg-default);
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* Wrapped in :where() so the global anchor styling has 0 specificity —
   component classes (.btn--primary, .site-nav__link, .program, etc.)
   override it without needing their own !important or extra selectors. */
.persec-base :where(a) {
  color: var(--fg-link);
  text-decoration: none;
  transition: text-decoration-color var(--dur-fast) var(--ease-standard);
}
.persec-base :where(a):hover {
  text-decoration: underline;
  text-decoration-color: var(--persec-amber);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.persec-base :focus-visible {
  outline: 2px solid var(--persec-indigo);
  outline-offset: 2px;
}

/* =================================================================
   Utility — band backgrounds for editorial rhythm
   ================================================================= */
.persec-band-cream  { background: var(--persec-cream); color: var(--fg-default); }
.persec-band-warm   { background: var(--persec-cream-warm); color: var(--fg-default); }
.persec-band-white  { background: var(--persec-white); color: var(--fg-default); }
.persec-band-ink    { background: var(--persec-ink); color: var(--fg-on-inverse); }
.persec-band-ink .persec-eyebrow { color: rgba(250,249,245,0.6); }