/* ============================================================
   MQM M5 — MULTI-AXIS FINGERPRINT THEME
   ============================================================
   Install this CSS in your WordPress theme (via functions.php
   or Customizer > Additional CSS). It defines all the CSS
   custom properties that the generated post_content references.

   AXES:
     A. Palette  (8)  → .palette-1 … .palette-8
     B. Typography (5) → .typo-1 … .typo-5
     C. Radius (4)    → .radius-1 … .radius-4
     D. Spacing (3)   → .spacing-1 … .spacing-3
     E. Layout (5)    → .layout-1 … .layout-5

   Total visual combos: 8 × 5 × 4 × 3 × 5 = 2,400
   × 216 DOM skins = 518,400 unique fingerprints
   ============================================================ */

/* ====== AXIS A: COLOR PALETTES (8) ====== */

/* 1 — Royal Gold */
.palette-1 {
  --p-bg: #0a0606; --p-text: #f5e9c8; --p-accent: #d4af37; --p-accent-dark: #3d2e0a;
  --p-card: #130c02; --p-muted: #a89670; --p-heading: #fff8e1;
  --p-hero-bg: linear-gradient(135deg, #1a0f05 0%, #3d1f08 50%, #0a0606 100%);
  --p-cta-bg: linear-gradient(180deg, #f4c542 0%, #d4a017 100%); --p-cta-text: #2a1a00;
}

/* 2 — Neon Arcade */
.palette-2 {
  --p-bg: #05051a; --p-text: #e0e7ff; --p-accent: #00e5ff; --p-accent-dark: #1a1a5c;
  --p-card: #0f0f3d; --p-muted: #a0a8d0; --p-heading: #ffffff;
  --p-hero-bg: linear-gradient(135deg, #05051a 0%, #1a0a3d 40%, #0a1a3d 70%, #05051a 100%);
  --p-cta-bg: linear-gradient(135deg, #ff2e93 0%, #ff6b6b 100%); --p-cta-text: #ffffff;
}

/* 3 — Minimal Sport */
.palette-3 {
  --p-bg: #0d1612; --p-text: #e8eae0; --p-accent: #5fbd8f; --p-accent-dark: #1e4332;
  --p-card: #121e19; --p-muted: #8a9488; --p-heading: #ffffff;
  --p-hero-bg: linear-gradient(135deg, #0d1612 0%, #132a1e 45%, #0d1612 100%);
  --p-cta-bg: linear-gradient(135deg, #5fbd8f 0%, #3d9e6e 100%); --p-cta-text: #0d1612;
}

/* 4 — Crimson Night */
.palette-4 {
  --p-bg: #0c0508; --p-text: #f0d9de; --p-accent: #e63946; --p-accent-dark: #4a1520;
  --p-card: #170a10; --p-muted: #a8808a; --p-heading: #ffe8ec;
  --p-hero-bg: linear-gradient(135deg, #1a0610 0%, #3d0f1e 50%, #0c0508 100%);
  --p-cta-bg: linear-gradient(180deg, #f25c6a 0%, #c5202f 100%); --p-cta-text: #1a0008;
}

/* 5 — Arctic Blue */
.palette-5 {
  --p-bg: #080c14; --p-text: #d4dde8; --p-accent: #4ea8de; --p-accent-dark: #162a3e;
  --p-card: #0e1520; --p-muted: #8096aa; --p-heading: #eaf2ff;
  --p-hero-bg: linear-gradient(135deg, #0a1220 0%, #152840 50%, #080c14 100%);
  --p-cta-bg: linear-gradient(180deg, #5dbde6 0%, #2e8bc0 100%); --p-cta-text: #051020;
}

/* 6 — Violet Dusk */
.palette-6 {
  --p-bg: #0e0714; --p-text: #e2d8f0; --p-accent: #a855f7; --p-accent-dark: #3b1a6e;
  --p-card: #150c22; --p-muted: #9a88b4; --p-heading: #f0e6ff;
  --p-hero-bg: linear-gradient(135deg, #12081e 0%, #2d1650 50%, #0e0714 100%);
  --p-cta-bg: linear-gradient(180deg, #c084fc 0%, #9333ea 100%); --p-cta-text: #0e0020;
}

/* 7 — Amber Ember */
.palette-7 {
  --p-bg: #100a04; --p-text: #f0e0c8; --p-accent: #f59e0b; --p-accent-dark: #4a3008;
  --p-card: #1a1008; --p-muted: #b09060; --p-heading: #fff4dc;
  --p-hero-bg: linear-gradient(135deg, #1a1005 0%, #3d2a08 50%, #100a04 100%);
  --p-cta-bg: linear-gradient(180deg, #fbbf24 0%, #d97706 100%); --p-cta-text: #1c0e00;
}

/* 8 — Slate Steel */
.palette-8 {
  --p-bg: #0c0c10; --p-text: #d8dae0; --p-accent: #94a3b8; --p-accent-dark: #2a3040;
  --p-card: #14161c; --p-muted: #7a8290; --p-heading: #eef0f6;
  --p-hero-bg: linear-gradient(135deg, #10121a 0%, #1e2030 50%, #0c0c10 100%);
  --p-cta-bg: linear-gradient(180deg, #cbd5e1 0%, #94a3b8 100%); --p-cta-text: #0c0c10;
}


/* ====== AXIS B: TYPOGRAPHY (5) ====== */

.typo-1 {
  --t-font: "Inter", -apple-system, sans-serif;
  --t-h1: 44px; --t-h2: 32px; --t-h3: 18px; --t-body: 14px; --t-small: 12px;
  --t-lh: 1.7; --t-h-weight: 700; --t-h-spacing: -0.3px;
}
.typo-2 {
  --t-font: "Poppins", -apple-system, sans-serif;
  --t-h1: 48px; --t-h2: 30px; --t-h3: 17px; --t-body: 15px; --t-small: 11px;
  --t-lh: 1.65; --t-h-weight: 800; --t-h-spacing: -0.5px;
}
.typo-3 {
  --t-font: "Space Grotesk", -apple-system, sans-serif;
  --t-h1: 42px; --t-h2: 28px; --t-h3: 16px; --t-body: 14px; --t-small: 11px;
  --t-lh: 1.75; --t-h-weight: 700; --t-h-spacing: -1px;
}
.typo-4 {
  --t-font: "Outfit", -apple-system, sans-serif;
  --t-h1: 46px; --t-h2: 34px; --t-h3: 19px; --t-body: 15px; --t-small: 12px;
  --t-lh: 1.6; --t-h-weight: 600; --t-h-spacing: 0px;
}
.typo-5 {
  --t-font: "Plus Jakarta Sans", -apple-system, sans-serif;
  --t-h1: 40px; --t-h2: 26px; --t-h3: 16px; --t-body: 13px; --t-small: 10px;
  --t-lh: 1.8; --t-h-weight: 700; --t-h-spacing: -0.2px;
}


/* ====== AXIS C: BORDER RADIUS (4) ====== */

.radius-1 { --r-card: 0px;  --r-btn: 2px;  --r-icon: 50%; --r-thumb: 0px;  } /* razor */
.radius-2 { --r-card: 8px;  --r-btn: 6px;  --r-icon: 50%; --r-thumb: 6px;  } /* soft */
.radius-3 { --r-card: 16px; --r-btn: 30px; --r-icon: 14px; --r-thumb: 12px; } /* round */
.radius-4 { --r-card: 4px;  --r-btn: 4px;  --r-icon: 8px;  --r-thumb: 4px;  } /* subtle */


/* ====== AXIS D: SPACING RHYTHM (3) ====== */

.spacing-1 { --s-section: 50px 24px; --s-card: 20px 18px; --s-gap: 14px; --s-hero: 60px 24px 60px; }
.spacing-2 { --s-section: 70px 24px; --s-card: 28px 24px; --s-gap: 20px; --s-hero: 80px 24px 100px; }
.spacing-3 { --s-section: 96px 32px; --s-card: 36px 30px; --s-gap: 28px; --s-hero: 110px 32px 120px; }


/* ====== AXIS E: LAYOUT STRUCTURE (5) ====== */

/* Layout 1 — Centered Classic */
.layout-1 {
  --l-hero-align: center; --l-justify: center;
  --l-hero-tpl: 1fr; --l-hero-text-max: 900px;
  --l-h2-align: center; --l-intro-align: center;
  --l-grid-tpl: repeat(3, 1fr); --l-grid-tpl-sm: repeat(2, 1fr);
  --l-card-dir: column; --l-card-gap: 0px; --l-card-align: stretch;
  --l-faq-tpl: 1fr; --l-faq-dir: column;
  --l-section-max: 1200px;
  --l-cta-dir: row; --l-badge-dir: row;
  --l-show-hero-visual: none;
}

/* Layout 2 — Split Hero */
.layout-2 {
  --l-hero-align: left; --l-justify: flex-start;
  --l-hero-tpl: 1fr 1fr; --l-hero-text-max: none;
  --l-h2-align: left; --l-intro-align: left;
  --l-grid-tpl: repeat(2, 1fr); --l-grid-tpl-sm: 1fr;
  --l-card-dir: row; --l-card-gap: 16px; --l-card-align: flex-start;
  --l-faq-tpl: 1fr 1fr; --l-faq-dir: row;
  --l-section-max: 1100px;
  --l-cta-dir: row; --l-badge-dir: row;
  --l-show-hero-visual: flex;
}

/* Layout 3 — Wide Gallery */
.layout-3 {
  --l-hero-align: center; --l-justify: center;
  --l-hero-tpl: 1fr; --l-hero-text-max: 800px;
  --l-h2-align: center; --l-intro-align: center;
  --l-grid-tpl: repeat(4, 1fr); --l-grid-tpl-sm: repeat(2, 1fr);
  --l-card-dir: column; --l-card-gap: 0px; --l-card-align: stretch;
  --l-faq-tpl: 1fr 1fr; --l-faq-dir: row;
  --l-section-max: 1280px;
  --l-cta-dir: column; --l-badge-dir: row;
  --l-show-hero-visual: none;
}

/* Layout 4 — Editorial */
.layout-4 {
  --l-hero-align: center; --l-justify: center;
  --l-hero-tpl: 1fr; --l-hero-text-max: 700px;
  --l-h2-align: center; --l-intro-align: center;
  --l-grid-tpl: 1fr; --l-grid-tpl-sm: 1fr;
  --l-card-dir: column; --l-card-gap: 0px; --l-card-align: stretch;
  --l-faq-tpl: 1fr; --l-faq-dir: column;
  --l-section-max: 800px;
  --l-cta-dir: column; --l-badge-dir: column;
  --l-show-hero-visual: none;
}

/* Layout 5 — Asymmetric Left */
.layout-5 {
  --l-hero-align: left; --l-justify: flex-start;
  --l-hero-tpl: 1fr; --l-hero-text-max: 750px;
  --l-h2-align: left; --l-intro-align: left;
  --l-grid-tpl: repeat(3, 1fr); --l-grid-tpl-sm: repeat(2, 1fr);
  --l-card-dir: row; --l-card-gap: 16px; --l-card-align: flex-start;
  --l-faq-tpl: 1fr; --l-faq-dir: column;
  --l-section-max: 1100px;
  --l-cta-dir: row; --l-badge-dir: row;
  --l-show-hero-visual: none;
}


/* ====== GOOGLE FONTS — add to your theme's <head> ====== */
/*
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Outfit:wght@400;600;700&family=Plus+Jakarta+Sans:wght@400;600;700&family=Poppins:wght@400;600;700;800&family=Space+Grotesk:wght@400;600;700&display=swap" rel="stylesheet">
*/


/* ====== WP THEME INTEGRATION SNIPPET (functions.php) ====== */
/*
// Add to your theme's functions.php:

function mqm_m5_enqueue_theme() {
    wp_enqueue_style('mqm-m5-theme', get_template_directory_uri() . '/theme.css', array(), '5.0');
    wp_enqueue_style('mqm-m5-fonts', 'https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Outfit:wght@400;600;700&family=Plus+Jakarta+Sans:wght@400;600;700&family=Poppins:wght@400;600;700;800&family=Space+Grotesk:wght@400;600;700&display=swap', array(), null);
}
add_action('wp_enqueue_scripts', 'mqm_m5_enqueue_theme');
*/