/**
 * Rhythmarkable — Design Tokens
 * Single source of truth for colour, type, spacing and motion. Colour and
 * typography values are overridden inline from Theme Settings (see
 * rm_print_dynamic_css() in functions.php) — the values below are fallbacks.
 */

:root {
  /* ---------- Colour: page background (overridden from Theme Settings) ---------- */
  --rm-page-background: #202a38;

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

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

  /* ---------- Colour: text ---------- */
  --rm-text-primary: #ffffff;
  --rm-text-secondary: rgba(255, 255, 255, 0.7);
  --rm-text-tertiary: rgba(255, 255, 255, 0.5);

  /* ---------- Colour: accent ---------- */
  --rm-accent: #c9889b;
  --rm-accent-strong: #b96f85;

  /* ---------- Colour: section background palette (see rm-bg-* in
     blocks.css) — single source of truth for the reusable "Background
     Color" block setting shared across all section blocks. ---------- */
  --rm-palette-midnight: #0f1b28;
  --rm-palette-dark-navy: #202b39;
  --rm-palette-dahlia-purple: #8270ae;
  --rm-palette-light-gray: #d3dae3;
  --rm-palette-white: #fefdfd;
  --rm-palette-cosmic-purple: linear-gradient(160deg, #8270ae 0%, #111827 45%, #202a38 100%);
  --rm-palette-cosmic-navy: linear-gradient(160deg, #111827 0%, #202a38 100%);

  /* ---------- Buttons (underline style — colour follows surrounding text) ---------- */
  --rm-button-text: var(--rm-text-primary);
  --rm-button-underline-width: 0.0625rem;
  --rm-button-padding-bottom: 0.3125rem;
  --rm-button-icon-size: 1rem;

  /* ---------- Typography (font family overridden from Theme Settings) ---------- */
  --rm-font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --rm-font-size-display: clamp(2.25rem, 7vw, 5.25rem);
  --rm-font-size-3xl: clamp(2rem, 5vw, 3rem);
  --rm-font-size-2xl: 2rem;
  --rm-font-size-xl: 1.25rem;
  /* Fluid "lead" size for intro copy: 18px on small phones scaling up to
     24px (1.5rem) by ~desktop. 1.125rem + 1vw crosses 1.5rem at 960px. */
  --rm-font-size-lead: clamp(1.125rem, 1.125rem + 0.63vw, 1.5rem);
  --rm-font-size-lg: 1.125rem;
  --rm-font-size-base: 1rem;
  --rm-font-size-sm: 0.875rem;

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

  --rm-letter-spacing-display: -0.02em;
  --rm-letter-spacing-meta: 0.20em;

  /* ---------- Layout (container width overridden from Theme Settings) ---------- */
  --rm-container: 87.5rem; /* 1400px */
  --rm-container-narrow: 55rem;
  --rm-container-gutter: 1.5rem;

  --rm-header-height: 5.5rem;
  --rm-content-min-height: 31.25rem; /* 500px */

  /* ---------- Navigation ---------- */
  --rm-nav-drawer-width: min(20rem, 85vw);
  --rm-nav-backdrop: rgba(0, 0, 0, 0.6);
  /* The mobile nav "sleeve" is a full-screen overlay (see .rm-mobile-nav in
     style.css), so the header — logo + hamburger/X toggle — needs to sit
     above it, not below, to stay visible/clickable while the menu is open. */
  --rm-z-header: 1030;
  --rm-z-nav-backdrop: 1010;
  --rm-z-nav-drawer: 1020;

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

  --rm-section-padding: 4.5rem;
  --rm-section-padding-lg: 7.5rem;

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

  /* ---------- Motion ---------- */
  --rm-duration: 0.35s;
  --rm-duration-fast: 0.2s;
  --rm-duration-slow: 0.6s;
  --rm-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (max-width: 40rem) {
  :root {
    --rm-section-padding: 2.25rem;
    --rm-section-padding-lg: 3.75rem;
    --rm-header-height: 4.5rem;
  }
}