/* SPL Management design tokens v0.3 (post-review)
   All names are prefixed --spl- so they never collide with GeneratePress's
   --accent / --base / --contrast globals. Load before spl.css.
   Structure: raw palette -> semantic layer -> .is-dark remap. */
:root {
  color-scheme: light;

  /* palette */
  --spl-navy-900: #132235;
  --spl-navy-800: #1B2F47;
  --spl-navy-700: #24405E;
  --spl-navy-950: #0B1522;
  --spl-graphite-900: #2A2E33;
  --spl-steel-600: #3F5F7A;
  --spl-slate-500: #5B6873;
  --spl-stone-200: #DEDFDA;
  --spl-stone-100: #ECEDEA;
  --spl-white-50: #F7F8F6;
  --spl-gold-500: #B3945D;
  --spl-gold-200: #E6D7B8;
  --spl-error-600: #9A4A3C;   /* 5.8:1 on Soft White */
  --spl-success-600: #3E6B4F; /* 5.6:1 on Soft White */

  /* semantic: surfaces and ink */
  --spl-bg: var(--spl-white-50);
  --spl-bg-alt: var(--spl-stone-100);
  --spl-bg-dark: var(--spl-navy-900);
  --spl-surface: #FFFFFF;
  --spl-surface-dark: var(--spl-navy-800);
  --spl-surface-dark-hover: var(--spl-navy-700);
  --spl-ink: var(--spl-graphite-900);
  --spl-ink-soft: var(--spl-graphite-900);           /* body copy; remapped to 80% white on dark */
  --spl-ink-muted: var(--spl-slate-500);             /* captions, meta */
  --spl-ink-on-dark: var(--spl-white-50);
  --spl-brand: var(--spl-navy-900);
  --spl-brand-2: var(--spl-steel-600);
  --spl-accent: var(--spl-gold-500);
  --spl-line: var(--spl-stone-200);
  --spl-line-on-dark: rgba(247, 248, 246, 0.14);
  --spl-eyebrow-ink: var(--spl-steel-600);           /* gold on dark */
  --spl-icon: var(--spl-steel-600);

  /* semantic: interaction */
  --spl-link: var(--spl-steel-600);
  --spl-link-hover: var(--spl-navy-900);
  --spl-link-underline-offset: 4px;
  --spl-focus: var(--spl-steel-600);
  --spl-focus-ring: 0 0 0 2px var(--spl-focus);
  --spl-btn-h: 48px;
  --spl-btn-bg: var(--spl-navy-900);
  --spl-btn-bg-hover: var(--spl-navy-800);
  --spl-btn-ink: var(--spl-white-50);
  --spl-btn-outline: var(--spl-steel-600);
  --spl-btn-outline-ink: var(--spl-navy-900);
  --spl-btn-outline-hover-bg: var(--spl-stone-100);
  --spl-input-h: 56px;
  --spl-input-bg: var(--spl-surface);
  --spl-input-border: var(--spl-slate-500);
  --spl-input-border-hover: var(--spl-slate-500);
  --spl-input-border-focus: var(--spl-steel-600);
  --spl-input-placeholder: var(--spl-slate-500);
  --spl-error: var(--spl-error-600);
  --spl-success: var(--spl-success-600);

  /* semantic: overlays and stacking */
  --spl-grid-line: rgba(247, 248, 246, 0.06);
  --spl-grid-size: 64px;
  --spl-scrim-hero: rgba(19, 34, 53, 0.35);
  --spl-scrim-logo: rgba(19, 34, 53, 0.6);
  --spl-header-bg-scrolled: rgba(19, 34, 53, 0.96);
  --spl-photo-desat: 0.8;
  --spl-photo-overlay: 0.2;
  --spl-z-header: 100;
  --spl-z-nav: 200;
  --spl-z-skip: 300;

  /* type */
  --spl-font-head: "Manrope", system-ui, sans-serif;
  --spl-font-body: "Inter", system-ui, sans-serif;
  --spl-font-accent: "Fraunces", Georgia, serif;
  --spl-text-display: clamp(2.5rem, 1.6rem + 4vw, 4.5rem);
  --spl-text-h1: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
  --spl-text-h2: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  --spl-text-h3: clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem);
  --spl-text-body-l: 1.125rem;
  --spl-text-body: 1rem;
  --spl-text-ui: 0.9375rem;
  --spl-text-caption: 0.875rem;
  --spl-text-eyebrow: 0.75rem;
  --spl-tracking-eyebrow: 0.14em;
  --spl-tracking-head: -0.01em;
  --spl-tracking-display: -0.015em;
  --spl-leading-display: 1.05;
  --spl-leading-head: 1.1;
  --spl-leading-body: 1.6;
  --spl-leading-article: 1.7;
  --spl-measure: 68ch;

  /* layout */
  --spl-container: 1200px;
  --spl-container-bleed: 1360px;
  --spl-container-pad: clamp(16px, 2.5vw, 32px);
  --spl-gutter: 24px;
  --spl-space-1: 8px;
  --spl-space-2: 16px;
  --spl-space-3: 24px;
  --spl-space-4: 32px;
  --spl-space-6: 48px;
  --spl-space-8: 64px;
  --spl-space-section: clamp(4rem, 3rem + 5vw, 8rem);
  --spl-radius: 2px;
  --spl-shadow-overlay: 0 12px 32px rgba(19, 34, 53, 0.12);
  --spl-header-h: 72px;
  --spl-target-min: 24px;

  /* motion */
  --spl-dur-micro: 150ms;
  --spl-dur-state: 200ms;
  --spl-dur-reveal: 600ms;
  --spl-stagger: 70ms;
  --spl-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --spl-ease-state: cubic-bezier(0.4, 0, 0.2, 1);
}

html { scroll-padding-top: calc(var(--spl-header-h) + 8px); }

/* Dark scope: drop this class on any navy band. */
.is-dark {
  color-scheme: dark;
  --spl-bg: var(--spl-navy-900);
  --spl-bg-alt: var(--spl-navy-800);
  --spl-surface: var(--spl-navy-800);
  --spl-ink: var(--spl-white-50);
  --spl-ink-soft: rgba(247, 248, 246, 0.8);
  --spl-ink-muted: rgba(247, 248, 246, 0.64);
  --spl-line: var(--spl-line-on-dark);
  --spl-brand: var(--spl-white-50);
  --spl-brand-2: var(--spl-white-50);
  --spl-eyebrow-ink: var(--spl-gold-500);
  --spl-icon: var(--spl-white-50);
  --spl-link: var(--spl-white-50);
  --spl-link-hover: var(--spl-gold-200);
  --spl-focus: var(--spl-gold-500);
  --spl-btn-bg: var(--spl-white-50);
  --spl-btn-bg-hover: var(--spl-stone-100);
  --spl-btn-ink: var(--spl-navy-900);
  --spl-btn-outline: var(--spl-white-50);
  --spl-btn-outline-ink: var(--spl-white-50);
  --spl-btn-outline-hover-bg: rgba(247, 247, 246, 0.08);
  --spl-input-bg: var(--spl-navy-800);
  --spl-input-border: rgba(247, 248, 246, 0.5);
  --spl-input-border-hover: rgba(247, 248, 246, 0.4);
  --spl-input-border-focus: var(--spl-gold-500);
  --spl-input-placeholder: rgba(247, 248, 246, 0.5);
  background: var(--spl-bg);
  color: var(--spl-ink);
}

/* Reduced motion: durations collapse, transforms are removed.
   spl-motion.js must mirror this by skipping transform tweens. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --spl-dur-micro: 0ms;
    --spl-dur-state: 0ms;
    --spl-dur-reveal: 200ms;
    --spl-stagger: 0ms;
  }
  .spl-reveal, .spl-reveal-stagger > *, .spl-draw { transform: none !important; }
}
