/*
 * ── Self-hosted Fonts ──────────────────────────────────────────────────────
 * To switch fonts:
 * 1. Download woff2 + woff from https://gwfh.mranftl.com/fonts
 * 2. Place files in /assets/fonts/
 * 3. Create /assets/css/fonts.css and add @font-face blocks (template below)
 * 4. Update --mw-font-heading and --mw-font-body below to match new family name
 *
 * @font-face template:
 *
 * @font-face {
 *   font-family: 'Font Name';
 *   font-style: normal;
 *   font-weight: 400;
 *   font-display: swap;
 *   src: url('../fonts/font-name-400.woff2') format('woff2'),
 *        url('../fonts/font-name-400.woff')  format('woff');
 * }
 * ─────────────────────────────────────────────────────────────────────────
 */

:root {
  /* ── Brand Colors ── */
  --mw-primary: #c4896a;
  --mw-primary-dark: #a96d50;
  --mw-primary-light: #f0d9cc;
  --mw-secondary: #2d2424;
  --mw-accent: #d4af37;
  --mw-accent-light: #f5efc8;

  /* ── Neutrals ── */
  --mw-bg: #faf7f4;
  --mw-surface: #ffffff;
  --mw-border: #e8ddd5;
  --mw-text: #2d2424;
  --mw-text-muted: #8a7a72;
  --mw-text-light: #ffffff;

  /* ── Typography ── */
  --mw-font-heading: "Cormorant Garamond", Georgia, serif;
  --mw-font-body: "Nunito", system-ui, sans-serif;

  /* ── Font Sizes ── */
  --mw-fs-xs: 0.75rem;
  --mw-fs-sm: 0.875rem;
  --mw-fs-md: 1rem;
  --mw-fs-lg: 1.125rem;
  --mw-fs-xl: 1.25rem;
  --mw-fs-2xl: 1.5rem;
  --mw-fs-3xl: 2rem;
  --mw-fs-4xl: 2.5rem;
  --mw-fs-5xl: 3.5rem;

  /* ── Spacing ── */
  --mw-space-xs: 0.25rem;
  --mw-space-sm: 0.5rem;
  --mw-space-md: 1rem;
  --mw-space-lg: 1.5rem;
  --mw-space-xl: 2.5rem;
  --mw-space-2xl: 4rem;
  --mw-space-3xl: 6rem;

  /* ── Radius ── */
  --mw-radius-sm: 5px;
  --mw-radius-md: 10px;
  --mw-radius-lg: 15px;
  --mw-radius-xl: 25px;
  --mw-radius-pill: 10px;

  /* ── Shadows ── */
  --mw-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --mw-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
  --mw-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);

  /* ── Transitions ── */
  --mw-transition: 0.25s ease;

  /* ── Header ── */
  --mw-header-height: 90px;
  --mw-topbar-height: 32px;
  --mw-header-bg: #ffffff;

  /* ── Radius (extended) ── */
  --mw-radius-full: 9999px;

  /* ── Shadows (extended) ── */
  --mw-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.16);
  --mw-shadow-inner: inset 0 2px 6px rgba(0, 0, 0, 0.08);

  /* ── Motion: durations ── */
  --mw-duration-fast: 0.18s;
  --mw-duration-base: 0.25s;
  --mw-duration-slow: 0.45s;
  --mw-duration-slower: 0.65s;

  /* ── Motion: easings ── */
  --mw-ease: ease;
  --mw-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --mw-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --mw-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --mw-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Line heights ── */
  --mw-lh-tight: 1.2;
  --mw-lh-snug: 1.3;
  --mw-lh-normal: 1.5;
  --mw-lh-relaxed: 1.65;
  --mw-lh-loose: 1.85;

  /* ── Letter spacings ── */
  --mw-ls-tighter: -0.01em;
  --mw-ls-tight: 0.02em;
  --mw-ls-normal: 0.03em;
  --mw-ls-wide: 0.04em;
  --mw-ls-wider: 0.06em;
  --mw-ls-widest: 0.12em;

  /* ── Border widths ── */
  --mw-border-width-sm: 1px;
  --mw-border-width-md: 1.5px;
  --mw-border-width-lg: 2px;

  /* ── Z-index scale ── */
  --mw-z-below: -1;
  --mw-z-base: 0;
  --mw-z-raised: 5;
  --mw-z-overlay: 10;
  --mw-z-dropdown: 200;
  --mw-z-sticky: 1020;
  --mw-z-fixed: 1030;
  --mw-z-modal: 1050;
  --mw-z-toast: 1080;
  --mw-z-top: 999;

  /* ── Layout ── */
  --mw-container-max: 1200px;
  --mw-container-xl: 1400px;
  --mw-container-sm: 768px;

  /* ── Component sizes ── */
  --mw-input-height-sm: 36px;
  --mw-input-height-md: 48px;
  --mw-input-height-lg: 56px;
  --mw-icon-btn-sm: 36px;
  --mw-icon-btn-md: 42px;
  --mw-icon-btn-lg: 52px;

  /* ── Focus ring ── */
  --mw-focus-ring: 0 0 0 3px rgba(196, 137, 106, 0.15);
  --mw-focus-ring-strong: 0 0 0 3px rgba(196, 137, 106, 0.35);

  /* ── Overlay colors ── */
  --mw-overlay-light: rgba(255, 255, 255, 0.15);
  --mw-overlay-dark: rgba(0, 0, 0, 0.45);
  --mw-overlay-darker: rgba(0, 0, 0, 0.55);
  --mw-overlay-card: rgba(45, 36, 36, 0.45);
  --mw-overlay-primary: rgba(196, 137, 106, 0.75);

  /* ── Aspect ratios ── */
  --mw-ratio-square: 1 / 1;
  --mw-ratio-portrait: 4 / 3;
  --mw-ratio-video: 16 / 9;
  --mw-ratio-card: 3 / 2;
  --mw-ratio-tall: 5 / 6;

  /* ── Bootstrap overrides via CSS vars ── */
  --bs-body-font-family: var(--mw-font-body);
  --bs-body-color: var(--mw-text);
  --bs-body-bg: var(--mw-bg);
  --bs-border-color: var(--mw-border);
  --bs-primary: var(--mw-primary);
  --bs-primary-rgb: 196, 137, 106;
  --bs-link-color: var(--mw-primary);
  --bs-link-hover-color: var(--mw-primary-dark);
  --bs-border-radius: var(--mw-radius-md);
  --bs-border-radius-sm: var(--mw-radius-sm);
  --bs-border-radius-lg: var(--mw-radius-lg);
}