/* 
  uSpot Design Tokens
  Philosophy: Premium Lifestyle (High-contrast, bold typography, ample whitespace)
*/

@font-face {
    font-family: 'Avenir Arabic';
    src: url('../Avenir-Arabic-Medium.otf') format('opentype');
}

:root {
    /* Color Palette - Light Mode */
    --color-primary-navy: #050B1A;
    --color-background: #f9f9f9;
    --color-surface: #ffffff;
    --color-error: #ba1a1a;
    --color-text-primary: #050B1A;
    --color-text-secondary: #45464c;
    --color-text-inverse: #ffffff;
    --color-border: #e8e8e8;
    --color-accent: #050B1A;

    /* Spacing Scale (8px base) */
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 40px;
    --space-6: 48px;

    /* Typography */
    --font-family: 'Epilogue', sans-serif;
    --font-family-ar: 'Avenir Arabic', sans-serif;
    
    /* Layout */
    --border-radius-xl: 0.75rem;
    --border-radius-3xl: 1.5rem;
    --border-radius-full: 9999px;
    
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

html[lang="ar"] {
    font-size: 110%;
}

[lang="ar"] *:not(.material-symbols-outlined) {
    font-family: var(--font-family-ar) !important;
}

/* Specific overrides for Arabic typography parity */
[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3 {
    text-transform: none !important;
    letter-spacing: normal !important;
    font-weight: 800 !important; /* Bolder for Arabic titles */
}

[lang="ar"] h2 {
    font-size: 1.25rem !important; /* Boost category headers */
}

[lang="ar"] h3 {
    font-size: 1.15rem !important; /* Boost product titles */
}

/* Adjust small labels */
[lang="ar"] .text-xs, [lang="ar"] .text-\[10px\] {
    font-size: 0.85rem !important;
    letter-spacing: normal !important;
}

[data-theme="dark"] {
    /* Semantic Dark Mode Overrides */
    --color-primary-navy: #dce2f8;
    --color-background: #1a1c1c;
    --color-surface: #2f3131;
    --color-text-primary: #f0f1f1;
    --color-text-secondary: #c6c6cd;
    --color-text-inverse: #1a1c1c;
    --color-border: #45464c;
    --color-accent: #dce2f8;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Automatic system dark mode */
        --color-primary-navy: #dce2f8;
        --color-background: #1a1c1c;
        --color-surface: #2f3131;
        --color-text-primary: #f0f1f1;
        --color-text-secondary: #c6c6cd;
        --color-text-inverse: #1a1c1c;
        --color-border: #45464c;
        --color-accent: #dce2f8;
    }
}