/**
 * impeccable.style — Design Quality Foundation
 * Cacheroo — SaaS/Product Register
 * Dark + Light mode with tinted neutrals
 *
 * 7 design domains: typography, color, spatial, motion, interaction, responsive, UX writing
 * Zero-LLM anti-pattern prevention built into token choices.
 *
 * Toggle: body.dark-mode class
 * Detection: localStorage('cacheroo-mode') → prefers-color-scheme fallback
 */

/* ================================
   DESIGN TOKENS — LIGHT MODE (default)
   ================================ */
:root {
  /* ── Typography Scale (1.333 — perfect fourth) ── */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: clamp(1.125rem, 1.5vw + 0.5rem, 1.333rem);
  --text-xl: clamp(1.333rem, 2vw + 0.5rem, 1.777rem);
  --text-2xl: clamp(1.777rem, 3vw + 0.5rem, 2.369rem);
  --text-3xl: clamp(2rem, 3.5vw + 0.5rem, 3.157rem);
  --text-4xl: clamp(2.25rem, 5vw + 0.5rem, 4.209rem);

  /* ── Typography Rhythm ── */
  --lh-heading: 1.1;
  --lh-body: 1.5;
  --lh-loose: 1.7;
  --measure: 65ch;

  /* ── Tinted Neutrals — LIGHT MODE ── */
  --dark: #0c0a12;
  --dark-hover: #1e1b26;
  --white: #faf9f7;
  --gray-900: #131018;
  --gray-800: #2a2632;
  --gray-700: #3d3847;
  --gray-600: #5c5763;
  --gray-500: #7a7580;
  --gray-400: #9a959f;
  --gray-300: #c4c0c9;
  --gray-200: #e0dde4;
  --gray-100: #f3f1f6;
  --gray-50: #f8f7fa;

  /* ── Semantic Colors ── */
  --text-on-dark: #faf9f7;
  --text-on-light: #0c0a12;
  --surface: #faf9f7;
  --surface-raised: #f3f1f6;
  --surface-sunken: #e8e5ec;
  --overlay: rgba(12, 10, 18, 0.5);

  /* ── Motion (ease-out-quart, no bounce/elastic) ── */
  --ease-default: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-leave: cubic-bezier(0.7, 0, 0.84, 0);
  --duration-micro: 150ms;
  --duration-state: 250ms;
  --duration-layout: 350ms;
  --duration-entrance: 600ms;

  /* ── Focus ── */
  --focus-ring: 2px solid var(--accent, #d4a574);
  --focus-offset: 3px;
}

/* ================================
   DARK MODE — body.dark-mode
   Inverts semantic roles, keeps accent color
   ================================ */
body.dark-mode {
  --dark: #faf9f7;
  --dark-hover: #e8e5ec;
  --white: #0c0a12;
  --gray-900: #f3f1f6;
  --gray-800: #e0dde4;
  --gray-700: #c4c0c9;
  --gray-600: #9a959f;
  --gray-500: #7a7580;
  --gray-400: #5c5763;
  --gray-300: #3d3847;
  --gray-200: #2a2632;
  --gray-100: #1a1724;
  --gray-50: #131018;

  --text-on-dark: #0c0a12;
  --text-on-light: #faf9f7;
  --surface: #0c0a12;
  --surface-raised: #1a1724;
  --surface-sunken: #131018;
  --overlay: rgba(250, 249, 247, 0.1);

  color-scheme: dark;
}

/* ================================
   TYPOGRAPHY — System Font Stack
   ================================ */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Dark background compensation: +letter-spacing */
body.dark-mode,
.cta-section,
.footer,
.sc-header {
  letter-spacing: 0.01em;
}

/* Dark mode: boost line-height for readability on dark surfaces */
body.dark-mode {
  line-height: 1.55;
}

/* Measure cap for body text */
.imp-measure p,
.imp-measure li,
article p,
article li {
  max-width: var(--measure);
}

/* ================================
   FOCUS — :focus-visible, never outline:none without replacement
   ================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: 4px;
}

/* ================================
   TOUCH TARGETS — 44px minimum globally
   ================================ */
a, button, [role="button"], input[type="checkbox"], input[type="radio"],
.nav-item, .nav-link {
  min-height: 44px;
  min-width: 44px;
}

p a, li a, span a, td a {
  min-height: auto;
  min-width: auto;
}

/* ================================
   MOTION — Entrance Animations (staggered fadeSlideUp)
   ================================ */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.imp-stagger {
  animation: fadeSlideUp var(--duration-entrance) var(--ease-enter) calc(var(--i, 0) * 75ms) both;
}

.hero-badge, .hero-section .badge { animation: fadeSlideUp var(--duration-entrance) var(--ease-enter) 0ms both; }
.hero-section h1, .hero-content h1 { animation: fadeSlideUp var(--duration-entrance) var(--ease-enter) 100ms both; }
.hero-section .lead, .hero-content .lead { animation: fadeSlideUp var(--duration-entrance) var(--ease-enter) 150ms both; }
.hero-stats { animation: fadeSlideUp var(--duration-entrance) var(--ease-enter) 200ms both; }
.hero-actions { animation: fadeSlideUp var(--duration-entrance) var(--ease-enter) 250ms both; }
.hero-badges { animation: fadeSlideUp var(--duration-entrance) var(--ease-enter) 300ms both; }
.hero-image, .hero-section .col-lg-6:last-child { animation: fadeSlideUp var(--duration-entrance) var(--ease-enter) 350ms both; }
.feature-card { animation: fadeSlideUp var(--duration-entrance) var(--ease-enter) calc(var(--i, 0) * 75ms + 200ms) both; }

.features-section .text-center,
.pricing-section .text-center,
.comparison-section .text-center,
[data-section-title] {
  animation: fadeSlideUp var(--duration-entrance) var(--ease-enter) 0ms both;
}

/* ================================
   TRANSITIONS — smooth state changes
   ================================ */
a, button, .btn, .nav-item, .feature-card, .pricing-card, .stat-card,
input, select, textarea {
  transition-property: color, background-color, border-color, box-shadow, opacity, transform;
  transition-duration: var(--duration-state);
  transition-timing-function: var(--ease-default);
}

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

/* ================================
   RESPONSIVE — touch targets
   ================================ */
@media (pointer: coarse) {
  a, button, [role="button"] { min-height: 48px; min-width: 48px; }
  p a, li a, span a, td a { min-height: auto; min-width: auto; }
}

/* ================================
   MODE TOGGLE BUTTON — fixed bottom-left
   ================================ */
.mode-toggle {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 900;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.25rem;
  color: var(--gray-400);
  padding: 8px;
  opacity: 0.6;
  transition: opacity var(--duration-state) var(--ease-default);
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mode-toggle:hover { opacity: 1; }