/**
 * Moust Boost — Design Tokens
 * Single source of truth for colour, type, spacing and motion.
 * See BRAND-GUIDELINES.md. Never hard-code values that exist here.
 */

:root {
  /* ---------- Colour: backgrounds ---------- */
  --mb-bg-primary: #0a0a0a;
  --mb-bg-secondary: #111827;
  --mb-bg-tertiary: #1c2230;
  --mb-bg-elevated: #202538;
  --mb-surface-subtle: rgba(255, 255, 255, 0.05);
  --mb-surface-default: rgba(255, 255, 255, 0.08);

  /* ---------- Colour: lines ---------- */
  --mb-border: rgba(255, 255, 255, 0.12);
  --mb-border-strong: rgba(255, 255, 255, 0.2);

  /* ---------- Colour: text ---------- */
  --mb-text-primary: #ffffff;
  --mb-text-secondary: rgba(255, 255, 255, 0.68);
  --mb-text-tertiary: rgba(255, 255, 255, 0.48);

  /* ---------- Colour: accent (provisional) ---------- */
  --mb-accent: #3b82f6;
  --mb-accent-strong: #2563eb;

  /* ---------- Buttons ----------
   * A muted slate-blue that sits in the same family as the dark backgrounds
   * rather than competing with them. Hover deliberately drops the fill and
   * switches to an outlined treatment, so the interaction reads as a change in
   * state rather than a change in colour.
   */
  --mb-button-bg: #415675;
  --mb-button-bg-hover: transparent;
  --mb-button-text: #ffffff;
  --mb-button-text-hover: #ffffff;
  --mb-button-border: transparent;
  --mb-button-border-hover: #ffffff;
  --mb-button-border-width: 0.0625rem;
  --mb-button-padding: 0.6875rem 1.375rem;
  --mb-button-icon-size: 1rem;

  /* ---------- Hero image tone ----------
   * The colour blended into hero imagery in `luminosity` mode. Defaults to the
   * hero copy-panel background so the photo reads as a monochrome wash of the
   * brand navy rather than a neutral greyscale. Overridden per-block inline.
   */
  --mb-hero-tone: var(--mb-bg-secondary);

  /* ---------- Typography ---------- */
  --mb-font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --mb-font-size-display: clamp(2.25rem, 7vw, 6.25rem);
  --mb-font-size-3xl: clamp(2rem, 5vw, 3rem);
  --mb-font-size-2xl: 2rem;
  --mb-font-size-xl: 1.25rem;
  --mb-font-size-lg: 1.125rem;
  --mb-font-size-base: 1rem;
  --mb-font-size-sm: 0.875rem;

  --mb-line-height-display: 1.1;
  --mb-line-height-heading: 1.15;
  --mb-line-height-body: 1.6;

  --mb-letter-spacing-display: -0.02em;
  --mb-letter-spacing-meta: 0.03em;

  /* ---------- Layout ---------- */
  --mb-container: 82.5rem;
  --mb-container-narrow: 55rem;
  --mb-container-wide: 90rem;
  --mb-container-gutter: 1.5rem;

  --mb-header-height: 6.375rem;

  /* ---------- Navigation ----------
   * The mobile drawer sits above the header so its close icon stays reachable;
   * the backdrop sits between the drawer and the header.
   */
  --mb-nav-drawer-width: min(20rem, 85vw);
  --mb-nav-backdrop: rgba(0, 0, 0, 0.6);
  --mb-z-header: 1000;
  --mb-z-nav-backdrop: 1010;
  --mb-z-nav-drawer: 1020;

  /* ---------- Spacing ---------- */
  --mb-space-2xs: 0.5rem;
  --mb-space-xs: 0.75rem;
  --mb-space-sm: 1rem;
  --mb-space-md: 1.5rem;
  --mb-space-lg: 2.5rem;
  --mb-space-xl: 3.75rem;
  --mb-space-2xl: 5rem;

  --mb-section-padding: 4.5rem;
  --mb-section-padding-lg: 7.5rem;
  --mb-section-padding-reduced: 1.5rem;

  /* ---------- Radii & elevation ---------- */
  --mb-radius-sm: 0.5rem;
  --mb-radius: 0.75rem;
  --mb-radius-lg: 1.125rem;
  --mb-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.35);

  /* ---------- Motion ---------- */
  --mb-duration: 0.35s;
  --mb-duration-fast: 0.2s;
  --mb-stagger: 0.06s;
  --mb-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --mb-fade-distance: 0.875rem;
}