/* ============================================================
   Students Valley - Design Tokens & Variables
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
    /* Typography */
    --font-primary: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --fs-xs: 0.75rem;
    --fs-sm: 0.8125rem;
    --fs-base: 0.9375rem;
    --fs-md: 1.0625rem;
    --fs-lg: 1.25rem;
    --fs-xl: 1.5rem;
    --fs-2xl: 1.875rem;
    --fs-3xl: 2.25rem;
    --fs-4xl: 3rem;
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;
    --lh-tight: 1.2;
    --lh-normal: 1.5;
    --lh-relaxed: 1.7;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;

    /* Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-2xl: 28px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);

    /* Transitions */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
    --transition-fast: 150ms var(--ease-out);
    --transition-base: 250ms var(--ease-out);
    --transition-slow: 400ms var(--ease-out);

    /* Layout */
    --container-max: 1200px;
    --container-narrow: 800px;
    --header-height: 64px;
    --sidebar-width: 260px;
}

/* ---- LIGHT THEME (default) ---- */
:root,
[data-theme="light"] {
    /* --color-primary: #4F46E5; */
    --color-primary: #19183b;
    --color-primary-hover: #4338CA;
    --color-primary-light: #EEF2FF;
    --color-primary-subtle: #C7D2FE;
    --color-secondary: #F59E0B;
    --color-secondary-hover: #D97706;
    --color-secondary-light: #FEF3C7;
    --color-accent: #10B981;
    --color-accent-light: #D1FAE5;
    --color-danger: #EF4444;
    --color-danger-light: #FEE2E2;
    --color-warning: #F59E0B;
    --color-warning-light: #FEF3C7;

    --bg-body: #F4F5FF;
    --bg-surface: #FFFFFF;
    --bg-surface-hover: #F3F4F8;
    --bg-surface-raised: #FFFFFF;
    --bg-muted: #F1F3F9;
    --bg-input: #FFFFFF;
    --bg-header: rgba(255, 255, 255, 0.85);

    --text-primary: #1A1D2B;
    --text-secondary: #5B6078;
    --text-muted: #8C91A5;
    --text-inverse: #FFFFFF;
    --text-link: #4F46E5;

    --border-color: #D8DAE0;
    --border-light: #F0F1F5;
    --divider: #ECEEF4;

    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
    --card-shadow-hover: 0 8px 24px rgba(79, 70, 229, 0.1);

    --badge-new-bg: #DCFCE7;
    --badge-new-text: #166534;
    --badge-used-bg: #FEF3C7;
    --badge-used-text: #92400E;
    --badge-discount-bg: #FEE2E2;
    --badge-discount-text: #DC2626;

    --overlay: rgba(0, 0, 0, 0.4);
    --skeleton-base: #E5E7EE;
    --skeleton-shine: #F1F3F9;
}

/* ---- DARK THEME ---- */
[data-theme="dark"] {
    --color-primary: #818CF8;
    --color-primary-hover: #A5B4FC;
    --color-primary-light: rgba(129, 140, 248, 0.12);
    --color-primary-subtle: rgba(129, 140, 248, 0.2);
    --color-secondary: #FBBF24;
    --color-secondary-hover: #FCD34D;
    --color-secondary-light: rgba(251, 191, 36, 0.12);
    --color-accent: #34D399;
    --color-accent-light: rgba(52, 211, 153, 0.12);
    --color-danger: #F87171;
    --color-danger-light: rgba(248, 113, 113, 0.12);
    --color-warning: #FBBF24;
    --color-warning-light: rgba(251, 191, 36, 0.12);

    --bg-body: #0F1117;
    --bg-surface: #1A1D2B;
    --bg-surface-hover: #242838;
    --bg-surface-raised: #21253A;
    --bg-muted: #1E2233;
    --bg-input: #1E2233;
    --bg-header: rgba(15, 17, 23, 0.9);

    --text-primary: #F0F1F5;
    --text-secondary: #A0A5BD;
    --text-muted: #6B7194;
    --text-inverse: #0F1117;
    --text-link: #818CF8;

    --border-color: #2A2E42;
    --border-light: #232740;
    --divider: #262A3E;

    --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.15);
    --card-shadow-hover: 0 8px 24px rgba(129, 140, 248, 0.12);

    --badge-new-bg: rgba(52, 211, 153, 0.15);
    --badge-new-text: #34D399;
    --badge-used-bg: rgba(251, 191, 36, 0.15);
    --badge-used-text: #FBBF24;
    --badge-discount-bg: rgba(248, 113, 113, 0.15);
    --badge-discount-text: #F87171;

    --overlay: rgba(0, 0, 0, 0.6);
    --skeleton-base: #1E2233;
    --skeleton-shine: #262A3E;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.35);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.4);
}

/* Mobile Typography Scaling */
@media (max-width: 768px) {
    :root {
        --fs-xs: 0.6rem;
        --fs-sm: 0.7rem;
        --fs-base: 0.8rem;
        --fs-md: 0.9rem;
        --fs-lg: 1.0rem;
        --fs-xl: 1.2rem;
        --fs-2xl: 1.4rem;
        --fs-3xl: 1.7rem;
        --fs-4xl: 2.1rem;
    }
}