/* ========================================
   Design Tokens
   Shared scale-based tokens for spacing,
   typography, radius, transitions, layout,
   and z-index. Loaded before all other CSS.
   ======================================== */

/* Breakpoints (reference only, cannot use vars in @media)
   --bp-sm:  480px
   --bp-md:  768px
   --bp-lg:  1024px
   --bp-xl:  1200px
   ======================================== */

:root {
    /* ---- Spacing Scale ---- */
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-7: 2rem;      /* 32px */
    --space-8: 2.5rem;    /* 40px */
    --space-9: 3rem;      /* 48px */
    --space-10: 4rem;     /* 64px */

    /* ---- Border Radius ---- */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-full: 999px;

    /* ---- Font Family ---- */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace;

    /* ---- Font Size ---- */
    --font-size-2xs: 0.625rem;    /* 10px */
    --font-size-xs: 0.6875rem;    /* 11px */
    --font-size-sm: 0.75rem;      /* 12px */
    --font-size-base: 0.8125rem;  /* 13px */
    --font-size-md: 0.875rem;     /* 14px */
    --font-size-md-lg: 0.9375rem; /* 15px */
    --font-size-lg: 1rem;         /* 16px */
    --font-size-xl: 1.125rem;     /* 18px */
    --font-size-xl-2xl: 1.25rem;  /* 20px */
    --font-size-2xl: 1.5rem;      /* 24px */
    --font-size-2xl-3xl: 1.75rem; /* 28px */
    --font-size-3xl: 2rem;        /* 32px */
    --font-size-4xl: 2.5rem;      /* 40px */
    --font-size-5xl: 3rem;        /* 48px */
    --font-size-display: 6rem;    /* 96px */

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

    /* ---- Line Height ---- */
    --line-height-tight: 1.3;
    --line-height-base: 1.6;
    --line-height-relaxed: 1.8;

    /* ---- Transitions ---- */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* ---- Layout ---- */
    --max-w-sm: 36rem;     /* 576px */
    --max-w-md: 48rem;     /* 768px */
    --max-w-lg: 64rem;     /* 1024px */
    --max-w-xl: 80rem;     /* 1280px */
    --max-w-2xl: 96rem;    /* 1536px */
    --sidebar-width: 280px;
    --sidebar-right-width: 220px;
    --content-max-width: 800px;
    --modal-max-width: 600px;
    --form-max-width: 400px;

    /* ---- Utility Colors ---- */
    --text-white: #ffffff;
    --rank-gold-bg: #fbbf24;
    --rank-gold-text: #78350f;
    --rank-silver-bg: #d1d5db;
    --rank-silver-text: #374151;
    --rank-bronze-bg: #d97706;
    --rank-bronze-text: var(--text-white);

    /* ---- Shadows ---- */
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.15);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.1);
    --shadow-xl: 0 20px 60px rgba(0,0,0,0.5);
    --shadow-sidebar: 2px 0 8px rgba(0,0,0,0.1);
    --shadow-sidebar-left: -2px 0 8px rgba(0,0,0,0.1);
    --shadow-dark-dropdown: 0 4px 12px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.2);
    --backdrop: rgba(0, 0, 0, 0.5);

    /* ---- Z-Index ---- */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 1000;
    --z-skip-link: 10000;
}