/* =============================================================
   Triple M Mobile Wash — Design Tokens
   Dark, glossy, premium. Aqua accents on midnight navy.
   ============================================================= */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Inter-Variable.woff2") format("woff2-variations");
}

:root {
  /* =========================================================
     COLOR — Primary
     ========================================================= */
  --mmm-midnight:        #020617; /* Primary background */
  --mmm-midnight-2:      #0a1222; /* Raised surface on midnight */
  --mmm-midnight-3:      #111a2e; /* Card / popover on midnight */

  --mmm-cyan:            #22D3EE; /* Primary accent — CyanX */
  --mmm-cyan-hover:      #67E8F9; /* Primary accent hover */
  --mmm-cyan-press:      #0891B2; /* Primary accent pressed */

  --mmm-sky:             #38BDF8; /* Secondary accent — Highlight Blue */
  --mmm-sky-hover:       #7DD3FC;

  /* =========================================================
     COLOR — Neutrals
     ========================================================= */
  --mmm-white:           #FFFFFF;
  --mmm-slate:           #9CA3AF; /* Secondary text, labels */
  --mmm-slate-2:         #6B7280; /* Hints / muted */
  --mmm-slate-dim:       #4B5563; /* Disabled */
  --mmm-black:           #000000;

  /* =========================================================
     COLOR — Semantic (dark‑surface defaults)
     ========================================================= */
  --mmm-bg:              var(--mmm-midnight);
  --mmm-bg-raised:       var(--mmm-midnight-2);
  --mmm-bg-card:         rgba(255, 255, 255, 0.04);
  --mmm-bg-card-hover:   rgba(255, 255, 255, 0.07);

  --mmm-fg:              var(--mmm-white);
  --mmm-fg-2:            var(--mmm-slate);
  --mmm-fg-3:            var(--mmm-slate-2);
  --mmm-fg-disabled:     var(--mmm-slate-dim);
  --mmm-fg-accent:       var(--mmm-cyan);

  --mmm-border:          rgba(255, 255, 255, 0.08);
  --mmm-border-strong:   rgba(255, 255, 255, 0.16);
  --mmm-border-accent:   var(--mmm-cyan);

  --mmm-success:         #22C55E;
  --mmm-warning:         #F59E0B;
  --mmm-danger:          #EF4444;

  /* =========================================================
     TYPE
     ========================================================= */
  --mmm-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mmm-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Sizes — desktop; on mobile shift up ~1px for body */
  --mmm-fs-display:  64px;  /* Hero headline */
  --mmm-fs-h1:       48px;
  --mmm-fs-h2:       36px;
  --mmm-fs-h3:       24px;
  --mmm-fs-h4:       20px;
  --mmm-fs-body:     16px;
  --mmm-fs-small:    14px;
  --mmm-fs-micro:    12px;

  --mmm-lh-tight:    1.1;
  --mmm-lh-heading:  1.2;
  --mmm-lh-body:     1.6;

  --mmm-fw-regular:  400;
  --mmm-fw-medium:   500;
  --mmm-fw-semibold: 600;
  --mmm-fw-bold:     700;

  --mmm-tracking-tight:  -0.02em;
  --mmm-tracking-normal: 0;
  --mmm-tracking-wide:   0.04em;

  /* =========================================================
     SPACING — 4px base
     ========================================================= */
  --mmm-space-1:   4px;
  --mmm-space-2:   8px;
  --mmm-space-3:   12px;
  --mmm-space-4:   16px;
  --mmm-space-5:   24px;
  --mmm-space-6:   32px;
  --mmm-space-7:   48px;
  --mmm-space-8:   64px;
  --mmm-space-9:   96px;
  --mmm-space-10:  128px;

  /* =========================================================
     RADII
     ========================================================= */
  --mmm-radius-sm:   6px;
  --mmm-radius-md:   12px;
  --mmm-radius-lg:   20px;
  --mmm-radius-xl:   28px;
  --mmm-radius-pill: 999px;

  /* =========================================================
     SHADOWS + GLOWS
     ========================================================= */
  --mmm-shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.3);
  --mmm-shadow-md:  0 6px 20px rgba(0, 0, 0, 0.35);
  --mmm-shadow-lg:  0 18px 48px rgba(0, 0, 0, 0.45);

  /* Aqua glow — used sparingly on hover / focus of primary buttons */
  --mmm-glow-cyan: 0 0 0 1px rgba(34, 211, 238, 0.4), 0 8px 28px rgba(34, 211, 238, 0.25);
  --mmm-ring:      0 0 0 3px rgba(34, 211, 238, 0.35);

  /* =========================================================
     MOTION
     ========================================================= */
  --mmm-ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --mmm-ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --mmm-dur-fast:     120ms;
  --mmm-dur-base:     200ms;
  --mmm-dur-slow:     320ms;

  /* =========================================================
     GRADIENTS
     ========================================================= */
  --mmm-gradient-hero:
    radial-gradient(1200px 600px at 80% -10%, rgba(34, 211, 238, 0.18), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(56, 189, 248, 0.10), transparent 60%),
    linear-gradient(180deg, #020617 0%, #020617 100%);
  --mmm-gradient-cta:
    linear-gradient(135deg, var(--mmm-cyan) 0%, var(--mmm-sky) 100%);
}

/* =============================================================
   Semantic element styles
   Consumers can either extend these class names or rely on the
   base element selectors. Everything assumes the dark surface.
   ============================================================= */

html, body {
  background: var(--mmm-bg);
  color: var(--mmm-fg);
  font-family: var(--mmm-font-sans);
  font-size: var(--mmm-fs-body);
  line-height: var(--mmm-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, .mmm-h1 {
  font-size: var(--mmm-fs-h1);
  font-weight: var(--mmm-fw-bold);
  line-height: var(--mmm-lh-heading);
  letter-spacing: var(--mmm-tracking-tight);
  margin: 0;
}

h2, .mmm-h2 {
  font-size: var(--mmm-fs-h2);
  font-weight: var(--mmm-fw-bold);
  line-height: var(--mmm-lh-heading);
  letter-spacing: var(--mmm-tracking-tight);
  margin: 0;
}

h3, .mmm-h3 {
  font-size: var(--mmm-fs-h3);
  font-weight: var(--mmm-fw-semibold);
  line-height: var(--mmm-lh-heading);
  margin: 0;
}

h4, .mmm-h4 {
  font-size: var(--mmm-fs-h4);
  font-weight: var(--mmm-fw-semibold);
  line-height: var(--mmm-lh-heading);
  margin: 0;
}

p, .mmm-p {
  font-size: var(--mmm-fs-body);
  line-height: var(--mmm-lh-body);
  color: var(--mmm-fg-2);
  margin: 0;
  text-wrap: pretty;
}

.mmm-display {
  font-size: var(--mmm-fs-display);
  font-weight: var(--mmm-fw-bold);
  line-height: var(--mmm-lh-tight);
  letter-spacing: var(--mmm-tracking-tight);
}

.mmm-eyebrow {
  font-size: var(--mmm-fs-micro);
  font-weight: var(--mmm-fw-semibold);
  letter-spacing: var(--mmm-tracking-wide);
  text-transform: uppercase;
  color: var(--mmm-cyan);
}

.mmm-label {
  font-size: var(--mmm-fs-small);
  font-weight: var(--mmm-fw-medium);
  color: var(--mmm-fg-2);
}

code, .mmm-code {
  font-family: var(--mmm-font-mono);
  font-size: 0.92em;
  background: rgba(255,255,255,0.06);
  padding: 2px 6px;
  border-radius: var(--mmm-radius-sm);
  color: var(--mmm-cyan);
}

/* =============================================================
   Shared primitives (optional)
   ============================================================= */

.mmm-card {
  background: var(--mmm-bg-card);
  border: 1px solid var(--mmm-border);
  border-radius: var(--mmm-radius-lg);
  padding: var(--mmm-space-5);
  backdrop-filter: blur(8px);
  transition: background var(--mmm-dur-base) var(--mmm-ease-out),
              border-color var(--mmm-dur-base) var(--mmm-ease-out),
              transform var(--mmm-dur-base) var(--mmm-ease-out);
}
.mmm-card:hover {
  background: var(--mmm-bg-card-hover);
  border-color: var(--mmm-border-strong);
}

.mmm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mmm-space-2);
  font-family: var(--mmm-font-sans);
  font-size: var(--mmm-fs-body);
  font-weight: var(--mmm-fw-semibold);
  line-height: 1;
  padding: 14px 22px;
  border-radius: var(--mmm-radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--mmm-dur-base) var(--mmm-ease-out),
              box-shadow var(--mmm-dur-base) var(--mmm-ease-out),
              transform var(--mmm-dur-fast) var(--mmm-ease-out),
              color var(--mmm-dur-base) var(--mmm-ease-out);
}
.mmm-btn--primary {
  background: var(--mmm-cyan);
  color: #03151A;
}
.mmm-btn--primary:hover {
  background: var(--mmm-cyan-hover);
  box-shadow: var(--mmm-glow-cyan);
}
.mmm-btn--primary:active { transform: translateY(1px) scale(0.99); background: var(--mmm-cyan-press); color: var(--mmm-white); }
.mmm-btn--secondary {
  background: transparent;
  color: var(--mmm-white);
  border-color: var(--mmm-cyan);
}
.mmm-btn--secondary:hover {
  background: rgba(34, 211, 238, 0.08);
  border-color: var(--mmm-cyan-hover);
}
.mmm-btn--ghost {
  background: transparent;
  color: var(--mmm-fg-2);
}
.mmm-btn--ghost:hover { color: var(--mmm-white); background: rgba(255,255,255,0.04); }

.mmm-input {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--mmm-border);
  color: var(--mmm-white);
  font-family: var(--mmm-font-sans);
  font-size: var(--mmm-fs-body);
  padding: 12px 14px;
  border-radius: var(--mmm-radius-md);
  transition: border-color var(--mmm-dur-base) var(--mmm-ease-out),
              box-shadow var(--mmm-dur-base) var(--mmm-ease-out);
}
.mmm-input::placeholder { color: var(--mmm-slate-2); }
.mmm-input:focus {
  outline: none;
  border-color: var(--mmm-cyan);
  box-shadow: var(--mmm-ring);
}

.mmm-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--mmm-radius-pill);
  font-size: var(--mmm-fs-micro);
  font-weight: var(--mmm-fw-semibold);
  letter-spacing: var(--mmm-tracking-wide);
  text-transform: uppercase;
  background: rgba(34, 211, 238, 0.12);
  color: var(--mmm-cyan);
  border: 1px solid rgba(34, 211, 238, 0.28);
}