/* WMJR Consulting — Design Tokens
   Original system inspired by structural patterns of consultative
   data-firm sites; not derivative of any specific brand. */

:root {
  /* === BRAND PALETTES (toggleable via Tweaks) === */
  /* Default: Sunrise — pulled from WMJR logo: black wordmark, coral cloud, charcoal */
  --brand-deep:    #1A1A1A;   /* near-black, wordmark anchor */
  --brand-mid:     #4A4A4A;   /* charcoal grey from logo accents */
  --brand-accent:  #F26B3A;   /* coral-orange from cloud icon */
  --brand-spark:   #FFB04D;   /* warm amber highlight */

  /* Neutrals — warm-cool balanced */
  --ink-1:   #0E1620;   /* primary text on light */
  --ink-2:   #2A3340;   /* secondary text */
  --ink-3:   #5A6470;   /* tertiary, captions */
  --ink-4:   #98A0AA;   /* placeholder, dividers ink */
  --line:    #E1E5EA;   /* hairlines */
  --line-2:  #EEF1F4;   /* subtle dividers */
  --bg:      #F7F8FA;   /* canvas */
  --bg-alt:  #FFFFFF;   /* surface */
  --bg-deep: #ECEEF2;   /* sunken */
  --paper:   #FAF7F2;   /* warm paper accent */

  /* Semantic */
  --ok:      #1F8A5B;
  --warn:    #C28A00;
  --err:     #C0392B;

  /* === TYPE === */
  /* Space Grotesk: geometric tech display — AI/data authority */
  /* Inter: optimised for screen readability — body text */
  /* Montserrat: reserved for WMJRMark wordmark (inline in component) */
  --font-display: "Space Grotesk", "Helvetica Neue", system-ui, sans-serif;
  --font-body:    "Inter", "Helvetica Neue", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* === CTA === */
  /* #C44B24 = coral darkened to 4.63:1 contrast with white (WCAG AA) */
  --btn-primary: #C44B24;

  /* Scale (1.25 modular, 16px base) */
  --t-xs:  12px;
  --t-sm:  14px;
  --t-md:  16px;
  --t-lg:  18px;
  --t-xl:  22px;
  --t-2xl: 28px;
  --t-3xl: 36px;
  --t-4xl: 48px;
  --t-5xl: 64px;
  --t-6xl: 84px;

  /* === SPACE === */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* === RADII === */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* === SHADOWS === */
  --shadow-1: 0 1px 2px rgba(14,22,32,0.06), 0 1px 1px rgba(14,22,32,0.04);
  --shadow-2: 0 4px 16px rgba(14,22,32,0.08), 0 1px 2px rgba(14,22,32,0.04);
  --shadow-3: 0 18px 48px -12px rgba(14,22,32,0.22), 0 4px 12px rgba(14,22,32,0.06);
}

/* Alternate palettes — applied via [data-palette="..."] on root */
[data-palette="atlantic"] {
  --brand-deep:    #0B1A2E;
  --brand-mid:     #163A66;
  --brand-accent:  #2E73E8;
  --brand-spark:   #5BD0C7;
}
[data-palette="forest"] {
  --brand-deep:    #0E2620;
  --brand-mid:     #14463A;
  --brand-accent:  #1F8A5B;
  --brand-spark:   #B7D964;
}
[data-palette="violet"] {
  --brand-deep:    #15102E;
  --brand-mid:     #2E2466;
  --brand-accent:  #6E54E8;
  --brand-spark:   #C7B5FF;
}

[data-theme="dark"] {
  --ink-1:   #F5F6F8;
  --ink-2:   #C5CAD2;
  --ink-3:   #8A929C;
  --ink-4:   #5A6470;
  --line:    #2A3340;
  --line-2:  #1A2230;
  --bg:      #0E1620;
  --bg-alt:  #161F2C;
  --bg-deep: #0A1018;
  --paper:   #1A2230;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
body {
  font-family: var(--font-body);
  color: var(--ink-1);
  background: var(--bg);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; }
a, button, [role="button"] { cursor: pointer; }

/* ── Scroll fade-in ── */
.lp-fade {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s ease-out, transform 0.65s ease-out;
}
.lp-fade.lp-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .lp-fade { opacity: 1; transform: none; transition: none; }
}

/* ── Responsive layout ── */
@media (max-width: 1024px) {
  .lp-testimonials-grid { grid-template-columns: 1fr !important; }
  .lp-hero-grid       { grid-template-columns: 1fr !important; }
  .lp-hero-panel      { min-height: 260px !important; }
  .lp-services-panel  { grid-template-columns: 1fr !important; }
  .lp-metrics-grid    { grid-template-columns: repeat(2, 1fr) !important; }
  .lp-cases-grid      { grid-template-columns: repeat(2, 1fr) !important; }
  .lp-process-grid    { grid-template-columns: repeat(2, 1fr) !important; gap: 28px !important; }
  .lp-about-grid      { grid-template-columns: 1fr !important; gap: 48px !important; }
  .lp-cta-inner       { grid-template-columns: 1fr !important; }
  .lp-contact-grid    { grid-template-columns: 1fr !important; }
  .lp-footer-grid     { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
}

@media (max-width: 640px) {
  section             { padding-left: 20px !important; padding-right: 20px !important; }
  .lp-nav-links       { display: none !important; }
  .lp-nav-cta         { display: none !important; }
  .lp-hamburger       { display: flex !important; }
  .lp-hero-cta        { flex-direction: column !important; }
  .lp-hero-cta button { width: 100% !important; justify-content: center !important; }
  .lp-hero-stats      { flex-direction: column !important; gap: 8px !important; }
  .lp-metrics-grid    { grid-template-columns: 1fr !important; }
  .lp-cases-grid      { grid-template-columns: 1fr !important; }
  .lp-process-grid    { grid-template-columns: 1fr !important; }
  .lp-form-grid       { grid-template-columns: 1fr !important; }
  .lp-cta-inner       { padding: 36px 20px !important; }
  .lp-footer-grid     { grid-template-columns: 1fr !important; }
}