/* =============================================================
   DESIGN TOKENS — Cleaning Business Landing Page
   Custom palette: The Dust Busters of Mobile official logo palette
   ============================================================= */

:root {
  /* Type scale (fluid) */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);
  --text-hero: clamp(2.75rem, 1rem + 5.5vw, 5.5rem);

  /* Spacing — 4px base */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* Transition */
  --transition-interactive: 200ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Content widths */
  --content-narrow: 640px;
  --content-default: 1040px;
  --content-wide: 1240px;

  /* Fonts */
  --font-body: 'Inter', 'Helvetica Neue', system-ui, sans-serif;
  --font-display: 'Fraunces', 'Times New Roman', Georgia, serif;
}

/* ---------- LIGHT THEME (default) ---------- */
:root,
[data-theme='light'] {
  /* Official palette anchors */
  --brand-midnight-navy: #05091f;
  --brand-deep-navy: #0b2a5b;
  --brand-royal-blue: #1e88d6;
  --brand-sky-blue: #5ec7f2;
  --brand-electric-blue: #0d97ee;
  --brand-gold-yellow: #fdd917;
  --brand-warm-gold: #f5ae05;
  --brand-shield-gold: #d49a00;
  --brand-steel-gray: #9ca3a8;
  --brand-cool-gray: #99a1a7;
  --brand-charcoal: #3a3a3a;
  --brand-vacuum-red: #d62828;
  --brand-spray-green: #2ecf6b;
  --brand-clean-white: #ffffff;

  /* Surfaces — clean white, with blue-tinted layers for freshness */
  --color-bg: #f6fbff;
  --color-surface: #ffffff;
  --color-surface-2: #eaf7ff;
  --color-surface-offset: #d8f1ff;
  --color-surface-offset-2: #c4eaff;

  /* Borders & dividers */
  --color-border: #b7d7e8;
  --color-divider: #d8eaf4;

  /* Text */
  --color-text: #05091f;
  --color-text-muted: #38526d;
  --color-text-faint: #74899c;
  --color-text-inverse: #ffffff;

  /* Primary — royal/electric blues build trust and cleanliness */
  --color-primary: #0d97ee;
  --color-primary-hover: #1e88d6;
  --color-primary-active: #0b2a5b;
  --color-primary-soft: #dff4ff;

  /* CTA/accent — gold draws the eye and feels optimistic */
  --color-accent: #fdd917;
  --color-accent-hover: #f5ae05;
  --color-accent-active: #d49a00;
  --color-accent-soft: #fff5bd;
  --color-accent-text: #05091f;

  /* Supporting psychology colors — use sparingly */
  --color-energy: #d62828;
  --color-energy-soft: #ffe0df;
  --color-fresh: #2ecf6b;
  --color-fresh-soft: #dffbea;
  --color-navy: #0b2a5b;

  /* Status */
  --color-success: #1f9d58;
  --color-warning: #d49a00;

  /* Shadows — tuned for light, cool surfaces */
  --shadow-xs: 0 1px 2px rgba(5, 9, 31, 0.05);
  --shadow-sm: 0 2px 8px rgba(5, 9, 31, 0.07);
  --shadow-md: 0 10px 28px rgba(5, 9, 31, 0.10);
  --shadow-lg: 0 28px 70px rgba(5, 9, 31, 0.16);

  /* Decorative gradients — vibrant, but kept airy for readability */
  --gradient-wash: linear-gradient(135deg, #dff4ff 0%, #ffffff 42%, #fff5bd 100%);
  --gradient-hero: radial-gradient(
      ellipse 85% 62% at 12% 0%,
      rgba(13, 151, 238, 0.18),
      transparent 60%
    ),
    radial-gradient(ellipse 65% 58% at 88% 12%, rgba(253, 217, 23, 0.24), transparent 62%),
    radial-gradient(ellipse 46% 38% at 62% 82%, rgba(46, 207, 107, 0.12), transparent 64%);
}

/* ---------- DARK THEME ---------- */
[data-theme='dark'] {
  --color-bg: #05091f;
  --color-surface: #0b1738;
  --color-surface-2: #0b2a5b;
  --color-surface-offset: #123a75;
  --color-surface-offset-2: #164b96;

  --color-border: #225181;
  --color-divider: #153b6c;

  --color-text: #ffffff;
  --color-text-muted: #c3d8e8;
  --color-text-faint: #8ca9bd;
  --color-text-inverse: #05091f;

  --color-primary: #5ec7f2;
  --color-primary-hover: #8edcff;
  --color-primary-active: #c8efff;
  --color-primary-soft: #0b2a5b;

  --color-accent: #fdd917;
  --color-accent-hover: #ffe46a;
  --color-accent-active: #f5ae05;
  --color-accent-soft: #4a3c08;
  --color-accent-text: #05091f;

  --color-energy: #ff5555;
  --color-energy-soft: #551d23;
  --color-fresh: #2ecf6b;
  --color-fresh-soft: #123d2a;
  --color-navy: #0b2a5b;

  --color-success: #2ecf6b;
  --color-warning: #fdd917;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.45);

  --gradient-wash: linear-gradient(135deg, #0b2a5b 0%, #05091f 52%, #4a3c08 100%);
  --gradient-hero: radial-gradient(
      ellipse 80% 60% at 16% 0%,
      rgba(94, 199, 242, 0.18),
      transparent 60%
    ),
    radial-gradient(ellipse 70% 60% at 90% 20%, rgba(253, 217, 23, 0.14), transparent 60%),
    radial-gradient(ellipse 46% 38% at 62% 82%, rgba(46, 207, 107, 0.10), transparent 64%);
}

/* System preference fallback when user hasn't toggled */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #05091f;
    --color-surface: #0b1738;
    --color-surface-2: #0b2a5b;
    --color-surface-offset: #123a75;
    --color-surface-offset-2: #164b96;
    --color-border: #225181;
    --color-divider: #153b6c;
    --color-text: #ffffff;
    --color-text-muted: #c3d8e8;
    --color-text-faint: #8ca9bd;
    --color-text-inverse: #05091f;
    --color-primary: #5ec7f2;
    --color-primary-hover: #8edcff;
    --color-primary-active: #c8efff;
    --color-primary-soft: #0b2a5b;
    --color-accent: #fdd917;
    --color-accent-hover: #ffe46a;
    --color-accent-active: #f5ae05;
    --color-accent-soft: #4a3c08;
    --color-accent-text: #05091f;
    --color-energy: #ff5555;
    --color-energy-soft: #551d23;
    --color-fresh: #2ecf6b;
    --color-fresh-soft: #123d2a;
    --color-navy: #0b2a5b;
    --color-success: #2ecf6b;
    --color-warning: #fdd917;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.30);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.45);
    --gradient-wash: linear-gradient(135deg, #0b2a5b 0%, #05091f 52%, #4a3c08 100%);
    --gradient-hero: radial-gradient(
        ellipse 80% 60% at 16% 0%,
        rgba(94, 199, 242, 0.18),
        transparent 60%
      ),
      radial-gradient(ellipse 70% 60% at 90% 20%, rgba(253, 217, 23, 0.14), transparent 60%),
      radial-gradient(ellipse 46% 38% at 62% 82%, rgba(46, 207, 107, 0.10), transparent 64%);
  }
}