/**
 * Design System - CSS Custom Properties
 * Auto-generated from _redesign/DESIGN-SPECS.md
 *
 * @package Bonusovekody
 * @since 2.0.0
 */

:root {
    /* ============================================
     * COLORS
     * ============================================ */

    /* Blue Scale - Primary Brand */
    --blue-50: #EAF2FD;
    --blue-100: #BED6F8;
    --blue-200: #9EC2F5;
    --blue-300: #72A6F0;
    --blue-400: #5795ED;
    --blue-500: #2D7AE9;
    --blue-600: #296FD4;
    --blue-700: #2057A5;
    --blue-800: #194380;
    --blue-900: #133362;

    /* Green Scale - Success */
    --green-50: #F3FDEC;
    --green-100: #D9F8C3;
    --green-200: #C6F5A6;
    --green-300: #ACF17E;
    --green-400: #9CEE65;
    --green-500: #83EA3E;
    --green-600: #77D538;
    --green-700: #5DA62C;
    --green-800: #488122;
    --green-900: #37621A;

    /* Grey Scale - Neutrals */
    --grey-50: #F5F5F5;
    --grey-100: #E8E8E8;
    --grey-200: #B8B8B8;
    --grey-300: #969696;
    --grey-400: #666666;
    --grey-500: #484848;
    --grey-600: #1A1A1A;
    --grey-700: #181818;
    --grey-800: #121212;
    --grey-900: #0E0E0E;
    --grey-950: #0B0B0B;
    --black: #000000;
    --white: #FFFFFF;

    /* Additional Colors */
    --red-300: #EDC2BE;
    --red-400: #B13A2F;
    --orange-400: #FF3C00;
    --yellow-400: #F8C523;

    /* Special Backgrounds */
    --bg-light-blue: #E9EBF8;
    --bg-light-green: #D1EDBE;
    --bg-light-red: #F8E7E6;
    --bg-light-teal: #F5F9F9;
    --grey-slate: #8E98A8;

    /* Semantic Colors */
    --color-primary: var(--blue-500);
    --color-primary-hover: var(--blue-600);
    --color-primary-light: var(--blue-100);
    --color-primary-dark: var(--blue-700);
    --theme-color: var(--blue-500);

    --color-success: var(--green-600);
    --color-success-hover: var(--green-700);
    --color-success-light: var(--green-100);

    --color-error: var(--red-400);
    --color-error-light: var(--red-300);

    --color-warning: var(--yellow-400);

    --color-text-primary: var(--grey-600);
    --color-text-secondary: var(--grey-400);
    --color-text-muted: var(--grey-400);
    --color-text-disabled: var(--grey-300);

    --color-bg-primary: var(--white);
    --color-bg-secondary: var(--grey-50);
    --color-bg-tertiary: var(--blue-50);

    --color-border: var(--grey-100);
    --color-border-medium: var(--grey-200);
    --color-border-dark: var(--grey-400);

    /* ============================================
     * TYPOGRAPHY
     * ============================================ */

    /* Font Families */
    --font-heading: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-body: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'Courier New', Courier, monospace;

    /* Font Sizes */
    --font-size-h1: 40px;
    --font-size-h2: 32px;
    --font-size-h3: 24px;
    --font-size-h4: 18px;
    --font-size-h5: 16px;
    --font-size-h6: 14px;

    --font-size-large: 18px;
    --font-size-base: 16px;
    --font-size-small: 14px;
    --font-size-xs: 12px;
    --font-size-tiny: 10px;

    /* Line Heights */
    --line-height-h1: 48px;
    --line-height-h2: 40px;
    --line-height-h3: 32px;
    --line-height-h4: 24px;
    --line-height-h5: 24px;
    --line-height-h6: 16px;

    --line-height-large: 24px;
    --line-height-base: 24px;
    --line-height-small: 16px;
    --line-height-xs: 16px;

    /* Font Weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-black: 900;

    /* ============================================
     * SPACING
     * ============================================ */

    --space-0: 0;
    --space-1: 2px;
    --space-2: 4px;
    --space-3: 8px;
    --space-4: 12px;
    --space-5: 16px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 48px;
    --space-10: 64px;
    --space-11: 128px;

    /* Section Spacing */
    --section-padding-y: 64px;
    --section-padding-x: 24px;

    /* Component Spacing */
    --card-padding: 24px;
    --button-padding-y: 12px;
    --button-padding-x: 24px;
    --input-padding-y: 12px;
    --input-padding-x: 16px;

    /* ============================================
     * LAYOUT
     * ============================================ */

    --container-max-width: 1376px;
    --container-padding: 32px;
    --grid-gap: 32px;
    --header-height: 60px;

    /* ============================================
     * BORDER RADIUS
     * ============================================ */

    --radius-none: 0;
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-base: 12px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-full: 9999px;

    /* Component Radius */
    --button-radius: var(--radius-sm);
    --card-radius: var(--radius-base);
    --input-radius: var(--radius-sm);

    /* ============================================
     * SHADOWS
     * ============================================ */

    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.14);
    --shadow-base: 0 8px 16px rgba(161, 161, 161, 0.1);
    --shadow-md: 0 12px 24px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 16px 32px rgba(0, 0, 0, 0.16);
    --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.20);

    /* Component Shadows */
    --card-shadow: var(--shadow-base);
    --card-shadow-hover: var(--shadow-md);
    --button-shadow: var(--shadow-sm);

    /* ============================================
     * TRANSITIONS
     * ============================================ */

    --transition-fast: 150ms;
    --transition-base: 250ms;
    --transition-slow: 350ms;

    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);

    /* ============================================
     * Z-INDEX
     * ============================================ */

    --z-base: 0;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-tooltip: 1070;
}

/* ============================================
 * RESPONSIVE ADJUSTMENTS
 * ============================================ */

@media (max-width: 767px) {
    :root {
        /* Mobile Typography */
        --font-size-h1: 32px;
        --line-height-h1: 40px;
        --font-size-h2: 24px;
        --line-height-h2: 32px;
        --font-size-h3: 20px;
        --line-height-h3: 28px;

        /* Mobile Spacing */
        --section-padding-y: 32px;
        --section-padding-x: 16px;
        --container-padding: 16px;
        --grid-gap: 16px;
        --card-padding: 16px;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    :root {
        /* Tablet Spacing */
        --section-padding-y: 48px;
        --section-padding-x: 20px;
        --container-padding: 20px;
        --grid-gap: 20px;
    }
}