/* ============================================================
   DTR Design System - CSS Custom Properties & Tokens
   Modern, Premium, Light-Mode Design
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
    /* ── Primary Palette ── */
    --primary-50:  hsl(230, 94%, 97%);
    --primary-100: hsl(230, 90%, 93%);
    --primary-200: hsl(230, 85%, 85%);
    --primary-300: hsl(230, 80%, 72%);
    --primary-400: hsl(230, 76%, 60%);
    --primary-500: hsl(230, 72%, 50%);
    --primary-600: hsl(230, 75%, 42%);
    --primary-700: hsl(230, 78%, 34%);
    --primary-800: hsl(230, 80%, 26%);
    --primary-900: hsl(230, 82%, 18%);

    /* ── Accent / Vibrant ── */
    --accent-400: hsl(270, 76%, 58%);
    --accent-500: hsl(270, 72%, 50%);
    --accent-600: hsl(270, 75%, 42%);

    /* ── Success / Green ── */
    --success-50:  hsl(152, 70%, 96%);
    --success-100: hsl(152, 65%, 88%);
    --success-400: hsl(152, 60%, 48%);
    --success-500: hsl(152, 65%, 40%);
    --success-600: hsl(152, 68%, 32%);

    /* ── Warning / Amber ── */
    --warning-50:  hsl(38, 95%, 96%);
    --warning-100: hsl(38, 90%, 88%);
    --warning-400: hsl(38, 90%, 55%);
    --warning-500: hsl(38, 92%, 48%);
    --warning-600: hsl(38, 94%, 38%);

    /* ── Danger / Red ── */
    --danger-50:  hsl(0, 86%, 97%);
    --danger-100: hsl(0, 80%, 90%);
    --danger-400: hsl(0, 72%, 58%);
    --danger-500: hsl(0, 75%, 50%);
    --danger-600: hsl(0, 78%, 42%);

    /* ── Info / Cyan ── */
    --info-50:  hsl(195, 85%, 96%);
    --info-400: hsl(195, 75%, 48%);
    --info-500: hsl(195, 78%, 42%);

    /* ── Neutrals ── */
    --neutral-0:   hsl(0, 0%, 100%);
    --neutral-50:  hsl(220, 20%, 98%);
    --neutral-100: hsl(220, 18%, 96%);
    --neutral-200: hsl(220, 16%, 91%);
    --neutral-300: hsl(220, 14%, 82%);
    --neutral-400: hsl(220, 12%, 66%);
    --neutral-500: hsl(220, 10%, 50%);
    --neutral-600: hsl(220, 12%, 38%);
    --neutral-700: hsl(220, 14%, 28%);
    --neutral-800: hsl(220, 18%, 18%);
    --neutral-900: hsl(220, 22%, 10%);

    /* ── Sidebar (Deep Dark) ── */
    --sidebar-bg:       hsl(225, 30%, 14%);
    --sidebar-hover:    hsl(225, 28%, 20%);
    --sidebar-active:   hsl(230, 72%, 50%);
    --sidebar-text:     hsl(220, 20%, 75%);
    --sidebar-text-active: hsl(0, 0%, 100%);
    --sidebar-width:    260px;
    --sidebar-width-collapsed: 72px;

    /* ── Layout ── */
    --header-height: 64px;
    --content-padding: 18px;
    --border-radius-sm: 6px;
    --border-radius-md: 10px;
    --border-radius-lg: 16px;
    --border-radius-xl: 24px;
    --border-radius-full: 9999px;

    /* ── Typography ── */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    --text-xs:  0.75rem;
    --text-sm:  0.8125rem;
    --text-base: 0.9375rem;
    --text-md:  1rem;
    --text-lg:  1.125rem;
    --text-xl:  1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;

    /* ── Shadows (Layered depth) ── */
    --shadow-xs:  0 1px 2px hsla(220, 20%, 10%, 0.04);
    --shadow-sm:  0 1px 3px hsla(220, 20%, 10%, 0.06), 0 1px 2px hsla(220, 20%, 10%, 0.04);
    --shadow-md:  0 4px 6px -1px hsla(220, 20%, 10%, 0.07), 0 2px 4px -2px hsla(220, 20%, 10%, 0.05);
    --shadow-lg:  0 10px 15px -3px hsla(220, 20%, 10%, 0.08), 0 4px 6px -4px hsla(220, 20%, 10%, 0.05);
    --shadow-xl:  0 20px 25px -5px hsla(220, 20%, 10%, 0.1), 0 8px 10px -6px hsla(220, 20%, 10%, 0.06);
    --shadow-glass: 0 8px 32px hsla(230, 60%, 20%, 0.12);

    /* ── Glassmorphism ── */
    --glass-bg: hsla(0, 0%, 100%, 0.72);
    --glass-border: hsla(220, 20%, 90%, 0.6);
    --glass-blur: blur(16px);

    /* ── Transitions ── */
    --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 150ms;
    --duration-base: 250ms;
    --duration-slow: 400ms;

    /* ── Z-Index Scale ── */
    --z-dropdown:  100;
    --z-sticky:    200;
    --z-overlay:   300;
    --z-modal:     400;
    --z-toast:     500;
}