/**
 * Quick Media Theme - Fluid Design Tokens Engine
 *
 * Implements fluid clamp() spacing & typography scales, container metrics,
 * border-radius tokens, and responsive CSS Grid systems with zero runtime overhead.
 */

:root {
    /* 1. Fluid Spacing Scales (Scales smoothly between 380px and 1279px viewports) */
    --space-xs: clamp(0.90rem, calc(0.90rem + 0.0021 * (100vw - 380px)), 1.10rem);
    --space-s: clamp(1.30rem, calc(1.30rem + 0.0032 * (100vw - 380px)), 1.60rem);
    --space-m: clamp(2.00rem, calc(2.00rem + 0.0042 * (100vw - 380px)), 2.40rem);
    --space-l: clamp(2.50rem, calc(2.50rem + 0.0050 * (100vw - 380px)), 3.00rem);
    --space-xl: clamp(3.20rem, calc(3.20rem + 0.0053 * (100vw - 380px)), 4.50rem);
    --space-xxl: clamp(4.00rem, calc(4.00rem + 0.0053 * (100vw - 380px)), 5.00rem);
    --space-section: clamp(4.50rem, calc(4.50rem + 0.0105 * (100vw - 380px)), 6.50rem);

    /* 2. Fluid Typography Scales */
    --text-xs: clamp(0.85rem, calc(0.85rem + 0.0010 * (100vw - 380px)), 0.90rem);
    --text-s: clamp(0.95rem, calc(0.95rem + 0.0011 * (100vw - 380px)), 1.05rem);
    --text-m: clamp(1.05rem, calc(1.05rem + 0.0012 * (100vw - 380px)), 1.15rem);
    --text-mm: clamp(1.15rem, calc(1.15rem + 0.0015 * (100vw - 380px)), 1.30rem);
    --text-l: clamp(1.25rem, calc(1.25rem + 0.0018 * (100vw - 380px)), 1.45rem);
    --text-xl: clamp(1.45rem, calc(1.45rem + 0.0022 * (100vw - 380px)), 1.75rem);
    --text-xxl: clamp(1.80rem, calc(1.80rem + 0.0025 * (100vw - 380px)), 2.20rem);

    /* Fluid Headings */
    --h1: clamp(2.50rem, calc(2.50rem + 0.0200 * (100vw - 380px)), 4.20rem);
    --h2: clamp(2.10rem, calc(2.10rem + 0.0150 * (100vw - 380px)), 3.20rem);
    --h3: clamp(1.75rem, calc(1.75rem + 0.0100 * (100vw - 380px)), 2.40rem);
    --h4: clamp(1.40rem, calc(1.40rem + 0.0060 * (100vw - 380px)), 1.85rem);
    --h5: clamp(1.20rem, calc(1.20rem + 0.0040 * (100vw - 380px)), 1.45rem);
    --h6: clamp(1.05rem, calc(1.05rem + 0.0020 * (100vw - 380px)), 1.20rem);

    /* 3. Typography Rhythm & Fonts */
    --qm-font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --qm-font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --text-line-height: 1.65;
    --heading-line-height: 1.2;
    --text-font-weight: 400;
    --heading-font-weight: 700;

    /* 4. Brand & System Colors */
    --qm-primary: #054f8e;
    --qm-primary-dark: #043f72;
    --qm-primary-ultra-dark: #032f55;
    --qm-primary-light: #dae5ee;
    --qm-primary-ultra-light: #f3f6f9;

    --qm-secondary: #ff800b;
    --qm-secondary-dark: #cc6609;
    --qm-secondary-ultra-dark: #994d07;
    --qm-secondary-light: #ffecda;

    --qm-base: #4d4d66;
    --qm-base-dark: #3e3e52;
    --qm-base-ultra-dark: #1e293b;
    --qm-base-light: #e2e8f0;
    --qm-base-ultra-light: #f8fafc;

    --qm-text-color: #334155;
    --qm-heading-color: #0f172a;
    --qm-bg-color: #ffffff;

    /* 5. Layout Sizing & Bounds */
    --container-width: 1330px;
    --container-min-width: 380px;
    --container-narrow: 980px;
    --container-padding: var(--space-m);
    --grid-gap: var(--space-m);
    --card-gap: var(--space-m);

    /* 6. Border Radius */
    --radius-s: 8px;
    --radius-m: 14px;
    --radius-l: 20px;
    --radius-xl: 32px;
    --radius-btn: 8px;
    --radius-pill: 9999px;
    --radius-circle: 50%;

    /* 7. Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px -1px rgba(0, 0, 0, 0.08), 0 2px 6px -1px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 12px 28px -4px rgba(0, 0, 0, 0.12), 0 6px 12px -2px rgba(0, 0, 0, 0.05);
}

/* Base Clean Structure (2-Level DOM) */
:is(.qmt-section,.qm-section) {
    width: 100%;
    position: relative;
    padding-top: var(--space-section);
    padding-bottom: var(--space-section);
}

:is(.qmt-section--tight,.qm-section--tight) {
    padding-top: var(--space-l);
    padding-bottom: var(--space-l);
}

:is(.qmt-section--hero,.qm-section--hero) {
    padding-top: calc(var(--space-section) * 1.3);
    padding-bottom: calc(var(--space-section) * 1.3);
}

:is(.qmt-container,.qm-container) {
    width: 100%;
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

:is(.qmt-container--narrow,.qm-container--narrow) {
    max-width: var(--container-narrow);
}

:is(.qmt-container--full,.qm-container--full) {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* 8. Pure CSS Grid System (Responsive presets with zero runtime JS) */
:is(.qmt-grid,.qm-grid) {
    display: grid;
    gap: var(--grid-gap);
    width: 100%;
}

:is(.qmt-grid-1,.qm-grid-1)  { grid-template-columns: repeat(1, minmax(0, 1fr)); }
:is(.qmt-grid-2,.qm-grid-2)  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:is(.qmt-grid-3,.qm-grid-3)  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
:is(.qmt-grid-4,.qm-grid-4)  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
:is(.qmt-grid-5,.qm-grid-5)  { grid-template-columns: repeat(5, minmax(0, 1fr)); }
:is(.qmt-grid-6,.qm-grid-6)  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
:is(.qmt-grid-12,.qm-grid-12) { grid-template-columns: repeat(12, minmax(0, 1fr)); }

:is(.qmt-grid-1-2,.qm-grid-1-2) { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
:is(.qmt-grid-2-1,.qm-grid-2-1) { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
:is(.qmt-grid-1-3,.qm-grid-1-3) { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
:is(.qmt-grid-3-1,.qm-grid-3-1) { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }

/* Responsive Breakdowns */
@media (max-width: 991px) {
    :is(.qmt-grid-3,.qm-grid-3), :is(.qmt-grid-4,.qm-grid-4), :is(.qmt-grid-5,.qm-grid-5), :is(.qmt-grid-6,.qm-grid-6) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    :is(.qmt-grid-1-2,.qm-grid-1-2), :is(.qmt-grid-2-1,.qm-grid-2-1), :is(.qmt-grid-1-3,.qm-grid-1-3), :is(.qmt-grid-3-1,.qm-grid-3-1) {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    :is(.qmt-grid-2,.qm-grid-2), :is(.qmt-grid-3,.qm-grid-3), :is(.qmt-grid-4,.qm-grid-4) {
        grid-template-columns: 1fr;
    }
}

/* Flexbox Helpers */
:is(.qmt-flex,.qm-flex) {
    display: flex;
    gap: var(--space-s);
}

:is(.qmt-flex--center,.qm-flex--center) {
    align-items: center;
    justify-content: center;
}

:is(.qmt-flex--between,.qm-flex--between) {
    align-items: center;
    justify-content: space-between;
}

:is(.qmt-flex--column,.qm-flex--column) {
    flex-direction: column;
}

:is(.qmt-flex--wrap,.qm-flex--wrap) {
    flex-wrap: wrap;
}