/*
 * QazStack Design Tokens v2.0
 * Warm palette (default) + Dark theme (secondary)
 * Override --accent in project CSS to brand-customize.
 *
 * v2.0 changes:
 *   - Warm colour palette (aligned with modern design foundations)
 *   - Fluid typography via clamp()
 *   - Added --font-display for headings
 *   - Extended spacing scale
 *   - Added content-width tokens
 *   - prefers-reduced-motion media query
 *   - prefers-contrast media query
 */

/* ─── Light Theme (default) ─── */
:root {
    /* Surface & Background — warm tones */
    --bg: #F7F6F2;
    --bg-secondary: #EFEEEA;
    --surface: #FFFFFF;
    --surface-hover: #FAF9F7;

    /* Text — warm dark */
    --text: #28251D;
    --text-secondary: #5C5A52;
    --text-muted: #7A7974;
    --text-faint: #BAB9B4;
    --text-inverse: #ffffff;

    /* Accent / Brand (override per project) */
    --accent: #01696F;
    --accent-hover: #0C4E54;
    --accent-light: rgba(1, 105, 111, 0.10);
    --accent-text: #ffffff;

    /* Borders & Dividers */
    --border: #D4D1CA;
    --border-light: #E8E6E1;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);

    /* Radius */
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 14px;
    --radius-full: 9999px;

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

    /* Layout */
    --container-max: 1200px;
    --container-default: 960px;
    --container-narrow: 680px;
    --header-height: 64px;
    --sidebar-width: 260px;

    /* Typography — Onest (Cyrillic-first, distinctive) + fallbacks */
    --font-family: 'Onest', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Onest', system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'Fira Code', monospace;

    /* Fluid type scale (clamp-based) */
    --font-size-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.8125rem);
    --font-size-sm:   clamp(0.8125rem, 0.78rem + 0.2vw,  0.875rem);
    --font-size-base: clamp(0.9375rem, 0.9rem  + 0.2vw,  1rem);
    --font-size-lg:   clamp(1.0625rem, 1rem    + 0.3vw,  1.1875rem);
    --font-size-xl:   clamp(1.25rem,   1.1rem  + 0.6vw,  1.625rem);
    --font-size-2xl:  clamp(1.5rem,    1.2rem  + 1vw,    2rem);
    --font-size-3xl:  clamp(1.75rem,   1.3rem  + 1.5vw,  2.375rem);

    --line-height: 1.6;
    --line-height-tight: 1.2;

    /* Font weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;

    /* Semantic Colors */
    --success: #437A22;
    --success-light: #E8F5E0;
    --warning: #964219;
    --warning-light: #FFF3E0;
    --danger: #A12C7B;
    --danger-light: #FCE4F2;
    --info: #01696F;
    --info-light: #E0F4F5;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* Z-index scale */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-toast: 500;
}

/* ─── Dark Theme (secondary) ─── */
[data-theme="dark"] {
    --bg: #171614;
    --bg-secondary: #1C1B19;
    --surface: #201F1D;
    --surface-hover: #2A2926;

    --text: #CDCCCA;
    --text-secondary: #9A9995;
    --text-muted: #797876;
    --text-faint: #5A5957;
    --text-inverse: #171614;

    --accent-light: rgba(79, 152, 163, 0.15);

    --border: #393836;
    --border-light: #2F2E2C;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5);

    --success: #6DAA45;
    --success-light: rgba(109, 170, 69, 0.15);
    --warning: #BB653B;
    --warning-light: rgba(187, 101, 59, 0.15);
    --danger: #D163A7;
    --danger-light: rgba(209, 99, 167, 0.15);
    --info: #4F98A3;
    --info-light: rgba(79, 152, 163, 0.15);
}

/* ─── Accessibility: Reduced Motion ─── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ─── Accessibility: High Contrast ─── */
@media (prefers-contrast: more) {
    :root {
        --border: #999;
        --text-muted: #555;
        --shadow-sm: 0 0 0 1px #999;
    }
    [data-theme="dark"] {
        --border: #777;
        --text-muted: #aaa;
    }
}