/* ============================================================
   PISTAR — Design System Variables
   Premium CSS Custom Properties for Light & Dark Themes
   ============================================================ */

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

:root {
    /* ---- BRAND COLORS ---- */
    --pi-primary: #6C5CE7;
    --pi-primary-light: #A29BFE;
    --pi-primary-dark: #5A4BD1;
    --pi-primary-rgb: 108, 92, 231;
    --pi-secondary: #0984E3;
    --pi-secondary-light: #74B9FF;
    --pi-secondary-dark: #0770C2;
    --pi-accent: #00CEC9;
    --pi-accent-light: #55EFC4;
    --pi-accent-dark: #00B5B0;

    /* ---- STATUS COLORS ---- */
    --pi-success: #00B894;
    --pi-success-light: #55EFC4;
    --pi-success-bg: rgba(0, 184, 148, 0.08);
    --pi-warning: #FDCB6E;
    --pi-warning-dark: #E17055;
    --pi-warning-bg: rgba(253, 203, 110, 0.08);
    --pi-danger: #FF6B6B;
    --pi-danger-dark: #EE5A24;
    --pi-danger-bg: rgba(255, 107, 107, 0.08);
    --pi-info: #74B9FF;
    --pi-info-bg: rgba(116, 185, 255, 0.08);

    /* ---- TYPOGRAPHY ---- */
    --pi-font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --pi-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --pi-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    
    --pi-fs-xs: 0.75rem;    /* 12px */
    --pi-fs-sm: 0.8125rem;  /* 13px */
    --pi-fs-base: 0.9375rem; /* 15px */
    --pi-fs-md: 1rem;        /* 16px */
    --pi-fs-lg: 1.125rem;    /* 18px */
    --pi-fs-xl: 1.25rem;     /* 20px */
    --pi-fs-2xl: 1.5rem;     /* 24px */
    --pi-fs-3xl: 1.875rem;   /* 30px */
    --pi-fs-4xl: 2.25rem;    /* 36px */
    --pi-fs-5xl: 3rem;       /* 48px */
    --pi-fs-6xl: 3.75rem;    /* 60px */

    --pi-fw-light: 300;
    --pi-fw-normal: 400;
    --pi-fw-medium: 500;
    --pi-fw-semibold: 600;
    --pi-fw-bold: 700;
    --pi-fw-extrabold: 800;

    --pi-lh-tight: 1.2;
    --pi-lh-normal: 1.5;
    --pi-lh-relaxed: 1.75;

    /* ---- SPACING ---- */
    --pi-space-1: 0.25rem;   /* 4px */
    --pi-space-2: 0.5rem;    /* 8px */
    --pi-space-3: 0.75rem;   /* 12px */
    --pi-space-4: 1rem;      /* 16px */
    --pi-space-5: 1.25rem;   /* 20px */
    --pi-space-6: 1.5rem;    /* 24px */
    --pi-space-8: 2rem;      /* 32px */
    --pi-space-10: 2.5rem;   /* 40px */
    --pi-space-12: 3rem;     /* 48px */
    --pi-space-16: 4rem;     /* 64px */
    --pi-space-20: 5rem;     /* 80px */
    --pi-space-24: 6rem;     /* 96px */

    /* ---- BORDERS & RADIUS ---- */
    --pi-radius-sm: 6px;
    --pi-radius-md: 10px;
    --pi-radius-lg: 14px;
    --pi-radius-xl: 20px;
    --pi-radius-2xl: 28px;
    --pi-radius-full: 9999px;
    --pi-border-width: 1px;

    /* ---- SHADOWS ---- */
    --pi-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --pi-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --pi-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --pi-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1);
    --pi-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);
    --pi-shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.16);
    --pi-shadow-glow: 0 0 20px rgba(var(--pi-primary-rgb), 0.3);
    --pi-shadow-glow-lg: 0 0 40px rgba(var(--pi-primary-rgb), 0.2);

    /* ---- TRANSITIONS ---- */
    --pi-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --pi-transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --pi-transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
    --pi-transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ---- Z-INDEX ---- */
    --pi-z-dropdown: 100;
    --pi-z-sticky: 200;
    --pi-z-fixed: 300;
    --pi-z-modal-backdrop: 400;
    --pi-z-modal: 500;
    --pi-z-popover: 600;
    --pi-z-toast: 700;
    --pi-z-tooltip: 800;

    /* ---- LAYOUT ---- */
    --pi-container-sm: 640px;
    --pi-container-md: 768px;
    --pi-container-lg: 1024px;
    --pi-container-xl: 1200px;
    --pi-container-2xl: 1400px;
    --pi-navbar-height: 72px;
    --pi-bottom-nav-height: 64px;
    --pi-sidebar-width: 280px;

    /* ---- LIQUID GLASS BLUR & SATURATION TOKENS ---- */
    --pi-glass-blur-sm: 12px;
    --pi-glass-blur-md: 20px;
    --pi-glass-blur-lg: 28px;
    --pi-glass-blur-xl: 36px;
    --pi-glass-saturate: 190%;
}

/* ============================================================
   LIGHT THEME (Apple Liquid Glass)
   ============================================================ */
[data-theme="light"],
:root {
    /* Ambient Canvas Mesh Gradient */
    --pi-bg-mesh: radial-gradient(at 0% 0%, rgba(224, 231, 255, 0.65) 0, transparent 50%),
                  radial-gradient(at 100% 0%, rgba(254, 226, 226, 0.5) 0, transparent 50%),
                  radial-gradient(at 50% 100%, rgba(207, 250, 254, 0.55) 0, transparent 50%),
                  radial-gradient(at 80% 50%, rgba(243, 232, 255, 0.4) 0, transparent 50%),
                  #F6F8FD;

    --pi-bg-primary: #FFFFFF;
    --pi-bg-secondary: #F8F9FE;
    --pi-bg-tertiary: #F0F1F8;
    --pi-bg-elevated: rgba(255, 255, 255, 0.85);
    --pi-bg-card: rgba(255, 255, 255, 0.75);
    --pi-bg-input: rgba(255, 255, 255, 0.7);
    --pi-bg-hover: rgba(108, 92, 231, 0.05);
    --pi-bg-active: rgba(108, 92, 231, 0.1);
    --pi-bg-overlay: rgba(15, 23, 42, 0.45);

    /* Liquid Glass Specific Surfaces */
    --pi-glass-bg-base: rgba(255, 255, 255, 0.65);
    --pi-glass-bg-card: rgba(255, 255, 255, 0.75);
    --pi-glass-bg-card-hover: rgba(255, 255, 255, 0.88);
    --pi-glass-bg-elevated: rgba(255, 255, 255, 0.85);
    --pi-glass-bg-input: rgba(255, 255, 255, 0.7);
    --pi-glass-bg-input-focus: rgba(255, 255, 255, 0.95);
    --pi-glass-bg-pill: rgba(255, 255, 255, 0.75);
    --pi-glass-bg-sidebar: rgba(255, 255, 255, 0.76);
    --pi-glass-bg-navbar: rgba(255, 255, 255, 0.78);
    --pi-glass-bg-modal: rgba(255, 255, 255, 0.88);
    --pi-glass-bg-dropdown: rgba(255, 255, 255, 0.88);
    --pi-glass-bg-table: rgba(255, 255, 255, 0.72);

    /* Glass Borders & Inner Specular Highlights */
    --pi-glass-border: rgba(255, 255, 255, 0.65);
    --pi-glass-border-subtle: rgba(255, 255, 255, 0.45);
    --pi-glass-border-strong: rgba(255, 255, 255, 0.9);
    --pi-glass-inner-glow: inset 0 1.5px 1px 0 rgba(255, 255, 255, 0.95);
    --pi-glass-inner-shadow: inset 0 -1px 1px 0 rgba(0, 0, 0, 0.03);

    /* Glass Shadows */
    --pi-glass-shadow-sm: 0 4px 16px -2px rgba(0, 0, 0, 0.04);
    --pi-glass-shadow-md: 0 10px 30px -5px rgba(0, 0, 0, 0.06);
    --pi-glass-shadow-lg: 0 20px 48px -10px rgba(0, 0, 0, 0.08);
    --pi-glass-shadow-hover: 0 24px 54px -10px rgba(108, 92, 231, 0.2);

    /* Crisp Modern Typography */
    --pi-text-primary: #0F172A;
    --pi-text-secondary: #475569;
    --pi-text-tertiary: #94A3B8;
    --pi-text-inverse: #FFFFFF;
    --pi-text-link: var(--pi-primary);

    --pi-border-color: rgba(226, 232, 240, 0.8);
    --pi-border-light: rgba(241, 245, 249, 0.8);
    --pi-border-focus: var(--pi-primary);

    --pi-divider: rgba(226, 232, 240, 0.6);
    --pi-scrollbar-bg: rgba(241, 245, 249, 0.5);
    --pi-scrollbar-thumb: rgba(203, 213, 225, 0.8);

    --pi-badge-bg: rgba(108, 92, 231, 0.12);
    --pi-badge-text: var(--pi-primary);
    
    --pi-code-bg: rgba(241, 245, 249, 0.8);
    --pi-skeleton-base: rgba(226, 232, 240, 0.6);
    --pi-skeleton-shine: rgba(255, 255, 255, 0.8);
}

/* ============================================================
   DARK THEME (Apple Liquid Glass Dark)
   ============================================================ */
[data-theme="dark"] {
    /* Ambient Canvas Mesh Gradient */
    --pi-bg-mesh: radial-gradient(at 0% 0%, rgba(49, 46, 129, 0.45) 0, transparent 55%),
                  radial-gradient(at 100% 20%, rgba(88, 28, 135, 0.35) 0, transparent 55%),
                  radial-gradient(at 50% 100%, rgba(15, 118, 110, 0.25) 0, transparent 60%),
                  radial-gradient(at 20% 80%, rgba(30, 27, 75, 0.4) 0, transparent 55%),
                  #0B0B19;

    --pi-bg-primary: #0F0F23;
    --pi-bg-secondary: #141432;
    --pi-bg-tertiary: #1C1C42;
    --pi-bg-elevated: rgba(26, 26, 56, 0.8);
    --pi-bg-card: rgba(22, 22, 48, 0.72);
    --pi-bg-input: rgba(18, 18, 40, 0.65);
    --pi-bg-hover: rgba(108, 92, 231, 0.1);
    --pi-bg-active: rgba(108, 92, 231, 0.18);
    --pi-bg-overlay: rgba(0, 0, 0, 0.75);

    /* Liquid Glass Specific Surfaces */
    --pi-glass-bg-base: rgba(18, 18, 38, 0.65);
    --pi-glass-bg-card: rgba(22, 22, 48, 0.72);
    --pi-glass-bg-card-hover: rgba(28, 28, 62, 0.85);
    --pi-glass-bg-elevated: rgba(26, 26, 56, 0.8);
    --pi-glass-bg-input: rgba(18, 18, 40, 0.65);
    --pi-glass-bg-input-focus: rgba(26, 26, 58, 0.92);
    --pi-glass-bg-pill: rgba(26, 26, 56, 0.72);
    --pi-glass-bg-sidebar: rgba(16, 16, 36, 0.78);
    --pi-glass-bg-navbar: rgba(14, 14, 30, 0.82);
    --pi-glass-bg-modal: rgba(20, 20, 46, 0.92);
    --pi-glass-bg-dropdown: rgba(22, 22, 50, 0.9);
    --pi-glass-bg-table: rgba(20, 20, 44, 0.68);

    /* Glass Borders & Inner Specular Highlights */
    --pi-glass-border: rgba(255, 255, 255, 0.12);
    --pi-glass-border-subtle: rgba(255, 255, 255, 0.08);
    --pi-glass-border-strong: rgba(255, 255, 255, 0.22);
    --pi-glass-inner-glow: inset 0 1.5px 1px 0 rgba(255, 255, 255, 0.18);
    --pi-glass-inner-shadow: inset 0 -1px 1px 0 rgba(0, 0, 0, 0.4);

    /* Glass Shadows */
    --pi-glass-shadow-sm: 0 4px 16px -2px rgba(0, 0, 0, 0.3);
    --pi-glass-shadow-md: 0 12px 36px -6px rgba(0, 0, 0, 0.45);
    --pi-glass-shadow-lg: 0 24px 56px -10px rgba(0, 0, 0, 0.55);
    --pi-glass-shadow-hover: 0 28px 60px -10px rgba(108, 92, 231, 0.35);

    /* Crisp Modern Typography */
    --pi-text-primary: #F8FAFC;
    --pi-text-secondary: #94A3B8;
    --pi-text-tertiary: #64748B;
    --pi-text-inverse: #0B0B19;
    --pi-text-link: var(--pi-primary-light);

    --pi-border-color: rgba(255, 255, 255, 0.1);
    --pi-border-light: rgba(255, 255, 255, 0.06);
    --pi-border-focus: var(--pi-primary-light);

    --pi-divider: rgba(255, 255, 255, 0.08);
    --pi-scrollbar-bg: rgba(20, 20, 44, 0.6);
    --pi-scrollbar-thumb: rgba(58, 58, 106, 0.8);

    --pi-badge-bg: rgba(108, 92, 231, 0.22);
    --pi-badge-text: var(--pi-primary-light);
    
    --pi-code-bg: rgba(30, 30, 69, 0.8);
    --pi-skeleton-base: rgba(35, 35, 80, 0.6);
    --pi-skeleton-shine: rgba(42, 42, 90, 0.8);

    --pi-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --pi-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
    --pi-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
    --pi-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.38);
    --pi-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.45);
    --pi-shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.55);
}