/**
 * CSS Variables - Pixel Perfect from Figma Design Tokens
 * Extracted from figma/design-tokens/color palette.png and Typography.png
 *
 * @package Vanilly
 */

:root {
    /* ========================================
       Colors - EXACT HEX VALUES FROM FIGMA
       ======================================== */

    /* Primary Colors */
    --color-primary: #6555D3; /* Main purple - rgb(101, 85, 211) */
    --color-primary-light: #8476E4; /* Light purple - rgb(132, 118, 228) */
    --color-primary-lighter: #C6C0EE; /* Very light purple - rgb(198, 192, 238) */
    --color-primary-dark: #4A3BA8; /* Dark purple - rgb(74, 59, 168) */

    /* Secondary Colors */
    --color-secondary: #D42E53; /* Red-pink accent - rgb(212, 46, 83) */
    --color-accent: #D42E53; /* Alias for secondary/accent color */

    /* Text Colors */
    --color-text: #2E303B; /* Dark gray text - rgb(46, 48, 59) */
    --color-text-light: #888FA2; /* Medium gray text - rgb(136, 143, 162) */
    --color-text-lighter: #DEE1E8; /* Very light gray - rgb(222, 225, 232) */

    /* Link Colors */
    --color-link: var(--color-primary); /* Link color - uses primary color */
    --color-link-hover: var(--color-primary-dark); /* Link hover color */
    --color-primary-hover: var(--color-primary-dark); /* Primary color on hover */

    /* Background Colors */
    --color-background: #FFFFFF; /* White */
    --color-background-light: #DEE1E8; /* Light gray background */
    --color-background-purple: #C6C0EE; /* Light purple background */

    /* Border Colors */
    --color-border: #DEE1E8; /* Border color */

    /* State Colors */
    --color-success: #28a745;
    --color-error: #dc3545;
    --color-warning: #ffc107;
    --color-info: #17a2b8;

    /* ========================================
       Typography - EXACT SIZES FROM FIGMA
       ======================================== */

    /* Font Families */
    --font-primary: 'IRANYekanX', 'Vazirmatn', 'Vazir', 'Tahoma', sans-serif;
    --font-secondary: 'IRANYekanX', 'Vazirmatn', 'Vazir', 'Tahoma', sans-serif;
    --font-heading: 'IRANYekanX', 'Vazirmatn', 'Vazir', 'Tahoma', sans-serif;

    /* Font Sizes - EXACT PIXEL VALUES */
    --font-size-h1: 24px;
    --font-size-h2: 22px;
    --font-size-h3: 20px;
    --font-size-h4: 18px;
    --font-size-h5: 16px;
    --font-size-h6: 14px;
    --font-size-body1: 16px;
    --font-size-body2: 14px;
    --font-size-body: 16px; /* Alias for body1 - main body text */

    /* Legacy sizes for compatibility */
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 22px;
    --font-size-3xl: 24px;
    --font-size-4xl: 32px; /* For large headings */

    /* Header/Title Sizes - Standardized */
    --font-size-section-title: 20px; /* For section titles (e.g., .section-title) */
    --font-size-footer-title-large: 24px; /* For main footer titles */
    --font-size-footer-title: 18px; /* For smaller footer titles */
    --font-weight-section-title: var(--font-weight-bold); /* 700 */
    --font-weight-footer-title: var(--font-weight-medium); /* 500 for footer widget titles */

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

    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* Letter Spacing */
    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.02em;

    /* ========================================
       Spacing - 8px Base Unit System
       ======================================== */
    --spacing-xs: 4px; /* 0.5 unit */
    --spacing-sm: 8px; /* 1 unit */
    --spacing-md: 16px; /* 2 units */
    --spacing-lg: 24px; /* 3 units */
    --spacing-xl: 32px; /* 4 units */
    --spacing-2xl: 48px; /* 6 units */
    --spacing-3xl: 64px; /* 8 units */
    --spacing-4xl: 96px; /* 12 units */
    --spacing-5xl: 128px; /* 16 units */

    /* ========================================
       Layout - EXACT MEASUREMENTS FROM FIGMA
       ======================================== */

    /* Container */
    --container-max-width: 1728px;
    --container-padding-x: 24px;
    --container-padding: 24px; /* Alias for container-padding-x */

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-full: 50%;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(46, 48, 59, 0.05);
    --shadow-md: 0 4px 6px rgba(46, 48, 59, 0.1);
    --shadow-lg: 0 8px 16px rgba(46, 48, 59, 0.15);
    --shadow-xl: 0 12px 24px rgba(46, 48, 59, 0.2);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 500ms ease;
}

/* Responsive Typography */
@media (min-width: 768px) {
    :root {
        --font-size-h1: 48px;
        --font-size-h2: 36px;
        --font-size-h3: 30px;
        --font-size-h4: 24px;
        --font-size-h5: 20px;
        --font-size-h6: 18px;
        --font-size-body1: 18px;
        --font-size-body2: 16px;
        --font-size-body: 18px; /* Responsive: body text increases on desktop */

        --container-padding-x: 48px;
        --container-padding: 48px; /* Responsive: container padding increases on desktop */
    }
}

@media (min-width: 1728px) {
    :root {
        --container-padding-x: 64px;
    }
}