/**
 * FadaHosting Design System - Design Tokens
 * ==========================================
 * Centralized design variables for consistent styling across all pages
 */

:root {
    /* ========================================
   * COLOR PALETTE
   * ======================================== */

    /* Primary Colors - Brand */
    --color-primary: #00b19a;
    --color-primary-light: #00d4b8;
    --color-primary-dark: #009984;
    --color-primary-50: rgba(0, 177, 154, 0.05);
    --color-primary-100: rgba(0, 177, 154, 0.1);
    --color-primary-200: rgba(0, 177, 154, 0.2);

    /* Secondary Colors */
    --color-secondary: #6243ff;
    --color-secondary-light: #8B70FF;
    --color-secondary-dark: #4a2fd9;

    /* Accent Colors */
    --color-accent-purple: #8B70FF;
    --color-accent-blue: #3795fc;
    --color-accent-green: #17bd54;
    --color-accent-yellow: #ffd247;
    --color-accent-red: #ff4d4d;

    /* Neutral Colors - Text */
    --color-text-primary: #131415;
    --color-text-secondary: #404248;
    --color-text-tertiary: #6b7280;
    --color-text-muted: #9ca3af;
    --color-text-light: #b1b5bf;
    --color-text-white: #ffffff;

    /* Neutral Colors - Background */
    --color-bg-dark: #06070a;
    --color-bg-dark-secondary: #0d0f14;
    --color-bg-white: #ffffff;
    --color-bg-light: #f8fafc;
    --color-bg-subtle: #f5f7f9;
    --color-bg-muted: #f3f4f6;

    /* Border Colors */
    --color-border-light: #e5e7eb;
    --color-border-medium: #d9dfe5;
    --color-border-dark: #343641;

    /* Feature Box Gradient Colors */
    --color-feature-purple: #e6e2fa;
    --color-feature-purple-border: #CEC9EA;
    --color-feature-gray: #F1F1F1;
    --color-feature-gray-border: #DADADA;
    --color-feature-blue: #E4EFFB;
    --color-feature-blue-border: #CFDDEB;
    --color-feature-pink: #F4EAF4;
    --color-feature-pink-border: #E8D8E8;
    --color-feature-green: #DEF7EA;
    --color-feature-green-border: #C4E2D3;
    --color-feature-yellow: #FAF9D5;
    --color-feature-yellow-border: #E5E4C0;

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

    /* Font Families */
    --font-primary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-heading: "Outfit", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

    /* Font Sizes - Desktop */
    --text-xs: 12px;
    --text-sm: 14px;
    --text-base: 16px;
    --text-lg: 18px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 28px;
    --text-4xl: 32px;
    --text-5xl: 40px;
    --text-6xl: 48px;
    --text-7xl: 56px;

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

    /* Line Heights */
    --leading-none: 1;
    --leading-tight: 1.2;
    --leading-snug: 1.4;
    --leading-normal: 1.6;
    --leading-relaxed: 1.7;
    --leading-loose: 1.8;

    /* Letter Spacing */
    --tracking-tight: -0.025em;
    --tracking-normal: 0;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;

    /* ========================================
   * SPACING SCALE (4px base)
   * ======================================== */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-14: 56px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-30: 120px;

    /* ========================================
   * BORDER RADIUS
   * ======================================== */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-3xl: 32px;
    --radius-full: 9999px;

    /* ========================================
   * SHADOWS
   * ======================================== */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 15px 40px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 20px 50px rgba(0, 0, 0, 0.15);
    --shadow-card: 0 5px 20px rgba(0, 0, 0, 0.05);
    --shadow-card-hover: 0 15px 40px rgba(0, 0, 0, 0.1);
    --shadow-dropdown: 0 10px 30px rgba(0, 0, 0, 0.12);

    /* ========================================
   * TRANSITIONS
   * ======================================== */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-medium: 0.3s ease;
    --transition-slow: 0.4s ease;
    --transition-slower: 0.5s ease;

    /* Transition with transforms */
    --transition-transform: transform 0.3s ease;
    --transition-all: all 0.3s ease;

    /* ========================================
   * Z-INDEX SCALE
   * ======================================== */
    --z-below: -1;
    --z-base: 0;
    --z-above: 1;
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-header: 1000;
    --z-overlay: 5000;
    --z-modal: 10000;
    --z-toast: 15000;

    /* ========================================
   * BREAKPOINTS (for reference in JS)
   * ======================================== */
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-2xl: 1400px;

    /* ========================================
   * CONTAINER
   * ======================================== */
    --container-max: 1350px;
    --container-padding: 15px;

    /* ========================================
   * SECTION PADDING
   * ======================================== */
    --section-padding: 120px;
    --section-padding-sm: 80px;
    --section-padding-xs: 60px;
}

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

/* Tablet */
@media (max-width: 991px) {
    :root {
        --text-7xl: 42px;
        --text-6xl: 36px;
        --text-5xl: 32px;
        --text-4xl: 28px;
        --text-3xl: 24px;
        --section-padding: 80px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    :root {
        --text-7xl: 36px;
        --text-6xl: 32px;
        --text-5xl: 28px;
        --text-4xl: 24px;
        --text-3xl: 22px;
        --text-2xl: 20px;
        --section-padding: 60px;
        --section-padding-sm: 50px;
        --section-padding-xs: 40px;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    :root {
        --text-7xl: 32px;
        --text-6xl: 28px;
        --text-5xl: 24px;
        --text-4xl: 22px;
        --section-padding: 50px;
    }
}