/* =============================================================================
   impeccable.css — design-system consolidation layer

   Loaded LAST on every page so it wins the cascade without rewriting any
   page-specific layout underneath. Removes the AI-SaaS anti-patterns that had
   accreted across 67+ stylesheets and unifies the app on ONE committed brand
   (the existing wg-brand coral), expressed in OKLCH with hex fallbacks.

   It changes NO markup and NO behaviour — every interactive element keeps its
   class names, ids, and JS hooks. Only visual treatment is normalised.

   Sections:
     1. Tokens — one committed palette (coral), OKLCH neutrals, neutral elevation
     2. Token remaps — collapse the purple + orange + coral systems onto one
     3. De-gradient — solid fills, kill 135deg gradients + gradient-on-text
     4. De-glass — solid surfaces instead of decorative blur
     5. Shape — cap over-rounding, end ghost-card (border AND shadow)
     6. Borders — replace side-stripe accents
     7. Typography — Inter + Sora only, balanced wrapping, hero ceiling
     8. Motion — exponential easing, no bounce, reduced-motion safety
     9. Layering — semantic z-index scale
    10. Responsive — overflow + fluid-grid safety
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. TOKENS — single committed palette
   Progressive enhancement: hex line first (universal), OKLCH line second
   (used where supported, ignored otherwise). Neutrals carry a faint warm tint
   toward the coral hue (chroma ~0.006) — warmth by accent, never warm cream.
   --------------------------------------------------------------------------- */
:root {
  /* Committed accent — coral (terracotta), a non-generic fitness hue */
  --ix-accent-700: #C75A3F;  --ix-accent-700: oklch(0.555 0.140 36);
  --ix-accent-600: #E76F51;  --ix-accent-600: oklch(0.645 0.145 38); /* primary */
  --ix-accent-500: #FB8C6E;  --ix-accent-500: oklch(0.715 0.135 40);
  --ix-accent-300: #FFB59A;  --ix-accent-300: oklch(0.815 0.090 45);
  --ix-accent-100: #FFE7DD;  --ix-accent-100: oklch(0.935 0.030 45);
  --ix-accent-fg:  #1A1102;  /* foreground on accent — passes AA on coral */

  /* Neutral ramp (OKLCH, faint warm tint, perceptually even) */
  --ix-ink:       #221F1C;   --ix-ink:       oklch(0.235 0.008 55);
  --ix-n-900:     #2B2723;   --ix-n-900:     oklch(0.285 0.009 55);
  --ix-n-800:     #3D3833;   --ix-n-800:     oklch(0.360 0.009 55);
  --ix-n-700:     #514B45;   --ix-n-700:     oklch(0.445 0.009 55);
  --ix-n-600:     #6B645D;   --ix-n-600:     oklch(0.545 0.009 55); /* secondary text >=4.5:1 */
  --ix-n-500:     #867E76;   --ix-n-500:     oklch(0.645 0.008 55);
  --ix-n-400:     #A59D95;   --ix-n-400:     oklch(0.745 0.007 55);
  --ix-n-300:     #CFC8C1;   --ix-n-300:     oklch(0.845 0.006 58); /* borders */
  --ix-n-200:     #E4DED8;   --ix-n-200:     oklch(0.905 0.005 60);
  --ix-n-100:     #F1EDE8;   --ix-n-100:     oklch(0.945 0.004 62);
  --ix-n-50:      #F8F5F1;   --ix-n-50:      oklch(0.972 0.003 64);
  --ix-surface:   #FBF9F6;   --ix-surface:   oklch(0.984 0.002 66);
  --ix-card:      #FFFFFF;

  /* Status — committed, not generic (teal / amber / red) */
  --ix-good: #20A39E;  --ix-good: oklch(0.660 0.090 192);
  --ix-warn: #C77700;  --ix-warn: oklch(0.620 0.140 65);
  --ix-bad:  #C13B3B;  --ix-bad:  oklch(0.560 0.155 27);

  /* Neutral elevation — defined, no colored glow (codex-ghost-card safe: */
  /* cards use a hairline border OR one of these, never both heavy). */
  --ix-shadow-sm: 0 1px 2px rgba(34, 31, 28, 0.06);
  --ix-shadow-md: 0 4px 10px -3px rgba(34, 31, 28, 0.10);
  --ix-shadow-lg: 0 10px 24px -8px rgba(34, 31, 28, 0.14);

  /* Radius — cards 12-14px; pill reserved for tags/buttons only */
  --ix-radius-sm: 8px;
  --ix-radius:    14px;
  --ix-radius-pill: 999px;

  /* Exponential easing — no bounce, no elastic */
  --ix-ease: cubic-bezier(0.22, 1, 0.36, 1);          /* ease-out-quint  */
  --ix-ease-strong: cubic-bezier(0.16, 1, 0.3, 1);     /* ease-out-expo   */
  --ix-dur: 220ms;

  /* Semantic z-index scale */
  --ix-z-dropdown: 1000;
  --ix-z-sticky:   1100;
  --ix-z-backdrop: 1200;
  --ix-z-modal:    1300;
  --ix-z-toast:    1400;
  --ix-z-tooltip:  1500;

  /* Type stacks — Inter (body) + Sora (display); Poppins retired */
  --ix-font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ix-font-display: 'Sora', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* -----------------------------------------------------------------------------
   2. TOKEN REMAPS — collapse the three competing systems onto the coral one.
   Every page-specific stylesheet references these variables, so remapping them
   here re-skins the whole app instantly and consistently.
   --------------------------------------------------------------------------- */
:root {
  /* modern-design-system.css (was AI purple) */
  --primary-purple: var(--ix-accent-600);
  --primary-dark:   var(--ix-accent-700);
  --primary-light:  var(--ix-accent-500);

  /* style.css (was a second, orange brand) */
  --primary-color:  var(--ix-accent-600);
  --primary-hover:  var(--ix-accent-700);
  --secondary-color: var(--ix-accent-500);
  --accent-color:   var(--ix-accent-500);
  --ring-color:     var(--ix-accent-600);
  --beta-color:     var(--ix-accent-600);
  --dark:           var(--ix-ink);

  /* shared semantic tokens */
  --accent-pink:   var(--ix-accent-500);
  --accent-orange: var(--ix-accent-500);
  --success-green: var(--ix-good);
  --error-red:     var(--ix-bad);
  --warning-yellow: var(--ix-warn);

  --bg-body:    var(--ix-surface);
  --bg-card:    var(--ix-card);
  --bg-surface: var(--ix-n-50);
  --bg-surface-secondary: var(--ix-n-100);
  --light-bg:   var(--ix-n-50);

  --text-main:      var(--ix-ink);
  --text-secondary: var(--ix-n-600);
  --text-muted:     var(--ix-n-500);
  --border-default: var(--ix-n-300);

  /* neutral grays mapped onto warm-tinted ramp */
  --gray-50:  var(--ix-n-50);
  --gray-100: var(--ix-n-100);
  --gray-200: var(--ix-n-200);
  --gray-300: var(--ix-n-300);
  --gray-400: var(--ix-n-400);
  --gray-500: var(--ix-n-500);
  --gray-600: var(--ix-n-600);
  --gray-700: var(--ix-n-700);
  --gray-800: var(--ix-n-800);
  --gray-900: var(--ix-n-900);
  --off-white: var(--ix-surface);

  /* GRADIENTS -> flat fills (skill-ban: kill 135deg cliche + vibrant rainbow).
     Expressed as single-stop gradients so they stay valid wherever the codebase
     consumes them via `background` OR `background-image`. */
  --primary-gradient:         linear-gradient(var(--ix-accent-600), var(--ix-accent-600));
  --primary-gradient-vibrant: linear-gradient(var(--ix-accent-600), var(--ix-accent-600));
  --accent-gradient:          linear-gradient(var(--ix-accent-500), var(--ix-accent-500));
  --success-gradient:         linear-gradient(var(--ix-good), var(--ix-good));
  --wg-grad-coral:            linear-gradient(var(--ix-accent-600), var(--ix-accent-600));

  /* SHADOWS -> neutral, no colored glow */
  --shadow-sm:    var(--ix-shadow-sm);
  --shadow-md:    var(--ix-shadow-md);
  --shadow-lg:    var(--ix-shadow-lg);
  --shadow-xl:    var(--ix-shadow-lg);
  --shadow-glow:  var(--ix-shadow-md);
  --shadow-glass: var(--ix-shadow-md);
  --card-shadow:  var(--ix-shadow-sm);

  /* RADII -> sane, non-amateur (codex-over-round) */
  --radius-sm: var(--ix-radius-sm);
  --radius-md: 12px;
  --radius-lg: var(--ix-radius);
  --radius-xl: var(--ix-radius);
  --border-radius: var(--ix-radius);

  /* glass effect neutralised */
  --bg-glass:     var(--ix-card);
  --border-glass: var(--ix-n-300);
  --glass-blur:   none;

  /* TYPE -> retire Poppins, standardise on Inter + Sora */
  --font-sans:    var(--ix-font-sans);
  --font-display: var(--ix-font-display);
  --font-family:  var(--ix-font-sans);
  --wg-font-display: var(--ix-font-display);

  /* TRANSITIONS -> exponential, kill the spring/bounce */
  --transition-fast:   140ms var(--ix-ease);
  --transition-base:   var(--ix-dur) var(--ix-ease);
  --transition-slow:   420ms var(--ix-ease-strong);
  --transition-spring: 360ms var(--ix-ease-strong);
  --transition-speed:  var(--ix-dur);
}

/* Dark theme: re-map the same legacy tokens to dark neutrals + a brighter
   coral so contrast holds. wg-brand handles its own shell separately. */
[data-theme="dark"] {
  --ix-surface: #0F1A2E; --ix-surface: oklch(0.235 0.020 255);
  --ix-card:    #16223A; --ix-card:    oklch(0.290 0.022 255);
  --ix-ink:     #F4F1EC; --ix-ink:     oklch(0.960 0.004 70);
  --ix-n-600:   #B3ADA5; --ix-n-600:   oklch(0.760 0.008 70);
  --ix-n-500:   #9A948C; --ix-n-500:   oklch(0.680 0.008 70);
  --ix-n-300:   #34405A; --ix-n-300:   oklch(0.360 0.020 255);
  --ix-n-200:   #222E46; --ix-n-200:   oklch(0.320 0.018 255);

  --primary-purple: var(--ix-accent-500);
  --primary-color:  var(--ix-accent-500);
  --text-main:      var(--ix-ink);
  --text-secondary: var(--ix-n-600);
  --bg-body:        var(--ix-surface);
  --bg-card:        var(--ix-card);
  --border-default: var(--ix-n-300);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.45);
  --shadow-md: 0 4px 12px -3px rgba(0,0,0,0.5);
  --shadow-lg: 0 12px 28px -8px rgba(0,0,0,0.55);
}

/* -----------------------------------------------------------------------------
   3. DE-GRADIENT TEXT  (skill-ban-gradient-text)
   Every gradient-clipped heading becomes a solid ink/accent color.
   --------------------------------------------------------------------------- */
.text-gradient, .gradient-text,
.hero-content, .user-name, .stat-value, .stat-number,
.affirmations-header, .affirmation-feature,
.prompt-icon, .icon-left, .personality-icon-large {
  background: none !important;
  -webkit-background-clip: border-box !important;
          background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--ix-ink);
}
.text-gradient, .gradient-text { color: var(--ix-accent-700); }

/* -----------------------------------------------------------------------------
   4. DE-GLASS  (skill-ban-glassmorphism-default)
   Decorative blur/glass cards become honest solid surfaces.
   --------------------------------------------------------------------------- */
.glass-card,
[class*="glass-"], [class*="-glass"], .glass {
  background: var(--ix-card) !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  border: 1px solid var(--ix-n-200) !important;
  box-shadow: var(--ix-shadow-sm) !important;
}
[data-theme="dark"] .glass-card,
[data-theme="dark"] [class*="glass-"],
[data-theme="dark"] [class*="-glass"] {
  background: var(--ix-card) !important;
  border-color: var(--ix-n-300) !important;
}
/* decorative blurred gradient blobs — purely ornamental, remove */
.gradient-sphere, .sphere-1, .sphere-2, .sphere-3 { display: none !important; }

/* -----------------------------------------------------------------------------
   5. SHAPE  (skill-ban-codex-over-round + skill-ban-codex-ghost-card)
   Cap card rounding at 14px; pills stay pills. End the border+heavy-shadow
   "ghost card": give common cards ONE resting treatment (hairline border,
   light shadow), elevate on hover.
   --------------------------------------------------------------------------- */
.card, .stat-card, .answer-card, .equipment-card, .muscle-card,
.cardio-type-card, .risk-card, .template-card, .analytics-card,
.preset-card, .personality-prompt-card, .nav-card, .module-card,
.goal-card, .feature-card, .glass-card, .dashboard-card, .info-card {
  border-radius: var(--ix-radius);
  box-shadow: var(--ix-shadow-sm);
}
/* keep genuinely round things round (avatars, icon chips, toggles, pills) */
.avatar, .rounded-full, .pill, .badge, .chip, .tag,
.btn-pill, [class*="avatar"], [class*="-circle"] {
  border-radius: var(--ix-radius-pill) !important;
}
/* buttons: comfortable, not over-round */
.btn, button.btn, .button, input[type="submit"] { border-radius: 10px; }

/* -----------------------------------------------------------------------------
   6. SIDE-STRIPE BORDERS  (skill-ban-side-stripe-borders)
   Thick left/right accent bars on callouts/cards/alerts -> full hairline
   border + faint accent tint instead. Scoped to callout-ish components so
   structural left borders (tables, code) are untouched.
   --------------------------------------------------------------------------- */
.alert, .callout, .notice, .note, .tip, .banner,
.info-box, .warning-box, .insight-card, .highlight-card {
  border-left-width: 1px !important;
  border: 1px solid var(--ix-n-200);
  border-radius: var(--ix-radius);
}

/* -----------------------------------------------------------------------------
   7. TYPOGRAPHY
   --------------------------------------------------------------------------- */
body { font-family: var(--ix-font-sans); }
h1, h2, h3, h4, h5, h6,
.display, .hero-title, .section-title, .page-title { font-family: var(--ix-font-display); }

/* balanced headings, no orphans in prose (skill-typo-text-wrap-*) */
h1, h2, h3, .hero-title, .section-title, .page-title { text-wrap: balance; }
p, li, .lead, .subtitle { text-wrap: pretty; }

/* hero ceiling + tracking floor (skill-typo-hero-ceiling / tracking-floor) */
.hero-title, h1.display, .display-xl {
  font-size: clamp(2rem, 5vw + 1rem, 6rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.hero-title { letter-spacing: max(-0.04em, -0.02em); }

/* readable measure for prose blocks (skill-typo-line-length) */
.prose, article p, .post-body p, .blog-content p { max-width: 72ch; }

/* -----------------------------------------------------------------------------
   8. MOTION  (skill-motion-ease-out-exp + reduced-motion safety)
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* keep AOS-revealed content visible when motion is off */
  [data-aos] { opacity: 1 !important; transform: none !important; }
}

/* -----------------------------------------------------------------------------
   9. LAYERING  (skill-layout-z-index-scale)
   Re-base the worst arbitrary z-indexes onto the semantic scale.
   --------------------------------------------------------------------------- */
.modal-backdrop, .overlay, .modal-overlay { z-index: var(--ix-z-backdrop); }
.modal, .modal-content, [role="dialog"], dialog { z-index: var(--ix-z-modal); }
.toast, .toast-container, .notification-toast { z-index: var(--ix-z-toast); }
.tooltip, [role="tooltip"] { z-index: var(--ix-z-tooltip); }
.dropdown-menu, .dropdown-content { z-index: var(--ix-z-dropdown); }

/* -----------------------------------------------------------------------------
   10. RESPONSIVE SAFETY  (skill-ban-text-overflow + fluid grids)
   --------------------------------------------------------------------------- */
img, svg, video, canvas { max-width: 100%; height: auto; }
h1, h2, h3, .hero-title, .page-title { overflow-wrap: break-word; }
/* grid children must be allowed to shrink or they overflow on mobile */
.grid > *, [class*="grid"] > * { min-width: 0; }

/* focus visibility — accent ring, consistent everywhere */
:focus-visible {
  outline: 2px solid var(--ix-accent-600);
  outline-offset: 2px;
}