/* ═══════════════════════════════════════════════════════════════════════════
    VPP DESIGN TOKEN FOUNDATION — Phase 1
    Enterprise Modern | Sky Blue/Teal | Light Mode Default
    ═══════════════════════════════════════════════════════════════════════════ */

/* ── Self-hosted fonts (F-31) ────────────────────────────────────
   Inter (sans display/body) + JetBrains Mono (code) shipped from
   /fonts so rendering is identical across Windows/Linux/macOS and
   removes the Google Fonts CDN runtime dependency. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/Inter-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/Inter-Medium.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/Inter-SemiBold.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/Inter-Bold.woff2') format('woff2');
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/JetBrainsMono-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/JetBrainsMono-Medium.woff2') format('woff2');
}
@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 100 700;
    font-display: block;
    src: url('../fonts/MaterialSymbolsOutlined.woff2') format('woff2-variations');
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-feature-settings: 'liga';
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ── Typography ──────────────────────────────────────────────── */
:root {
    --vpp-font-display: 'Inter', system-ui, -apple-system, sans-serif;
    --vpp-font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --vpp-font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

    --vpp-font-weight-normal: 400;
    --vpp-font-weight-medium: 500;
    --vpp-font-weight-semibold: 600;
    --vpp-font-weight-bold: 700;
    --vpp-font-weight-extrabold: 800;

    --vpp-text-xs: 0.75rem;      /* 12px - captions, badges */
    --vpp-text-sm: 0.8125rem;    /* 13px - body small */
    --vpp-text-base: 0.875rem;   /* 14px - body default */
    --vpp-text-md: 1rem;         /* 16px - body large */
    --vpp-text-lg: 1.125rem;     /* 18px */
    --vpp-text-xl: 1.25rem;      /* 20px - card titles */
    --vpp-text-2xl: 1.5rem;      /* 24px - section headers */
    --vpp-text-3xl: 1.875rem;    /* 30px - page titles */
    --vpp-text-4xl: 2.25rem;     /* 36px - hero */

    --vpp-leading-tight: 1.25;
    --vpp-leading-normal: 1.5;
    --vpp-leading-relaxed: 1.625;

    --vpp-tracking-tight: 0;
    --vpp-tracking-normal: 0;
    --vpp-tracking-wide: 0;
}

/* ── Colors: Dark Mode ───────────────────────────────────────── */
:root,
.rz-theme-dark {
    color-scheme: dark;

    /* Primary — Bright Blue */
    --vpp-primary-50: #E0F2FE;
    --vpp-primary-100: #BAE6FD;
    --vpp-primary-200: #7DD3FC;
    --vpp-primary-300: #38BDF8;
    --vpp-primary-400: #0EA5E9;
    --vpp-primary-500: #0EA5E9;
    --vpp-primary-600: #0284C7;
    --vpp-primary-700: #0369A1;
    --vpp-primary-800: #075985;
    --vpp-primary-900: #0C4A6E;
    --vpp-primary-rgb: 14, 165, 233;

    /* Accent — Teal */
    --vpp-accent-400: #2DD4BF;
    --vpp-accent-500: #14B8A6;
    --vpp-accent-600: #0D9488;

    /* Semantic — F-45: unified with Tailwind-style palette (sky/emerald/amber/red)
       so status badges differentiate Submitted(info), Pending(warning),
       Approved(success), Cancelled(light), Rejected(danger).
       Muted suffix = 10% alpha (0x1A) for subtle badge backgrounds. */
    --vpp-info: #0EA5E9;
    --vpp-info-rgb: 14, 165, 233;
    --vpp-info-muted: #0EA5E91A;
    --vpp-success: #10B981;
    --vpp-success-rgb: 16, 185, 129;
    --vpp-success-muted: #10B9811A;
    --vpp-warning: #F59E0B;
    --vpp-warning-rgb: 245, 158, 11;
    --vpp-warning-muted: #F59E0B1A;
    --vpp-danger: #EF4444;
    --vpp-danger-rgb: 239, 68, 68;
    --vpp-danger-muted: #EF44441A;

    /* Background Layers */
    --vpp-bg-base: #0A0A0A;
    --vpp-bg-elevated: #141414;
    --vpp-bg-surface: #1C2128;
    --vpp-bg-overlay: rgba(0, 0, 0, 0.6);
    --vpp-bg-tooltip: #27272A;

    /* Text */
    --vpp-text-primary: #FAFAFA;
    --vpp-text-secondary: #B5BDC9;
    --vpp-text-tertiary: #7A869A;
    --vpp-text-inverse: #0A0A0A;
    --vpp-text-on-surface: #FFFFFF;
    --vpp-text-link: var(--vpp-primary-400);

    /* Borders */
    --vpp-border-default: rgba(255, 255, 255, 0.08);
    --vpp-border-strong: rgba(255, 255, 255, 0.12);
    --vpp-border-focus: var(--vpp-primary-500);
}

/* ── Colors: Light Mode ───────────────────────────────────────── */
:root:not(.rz-theme-dark) {
    color-scheme: light;

    --vpp-bg-base: #F7F8F9;
    --vpp-bg-elevated: #FFFFFF;
    --vpp-bg-surface: #FFFFFF;
    --vpp-bg-overlay: rgba(0, 0, 0, 0.4);
    --vpp-bg-tooltip: #18181B;

    --vpp-text-primary: #172B4D;
    --vpp-text-secondary: #44526C;
    --vpp-text-tertiary: #6B778C;
    --vpp-text-inverse: #FAFAFA;
    --vpp-text-on-surface: #FFFFFF;
    --vpp-text-link: var(--vpp-primary-600);

    --vpp-border-default: rgba(9, 30, 66, 0.08);
    --vpp-border-strong: rgba(9, 30, 66, 0.14);
}

/* ── Spacing Scale (4px base) ─────────────────────────────────── */
:root {
    --vpp-space-0: 0;
    --vpp-space-1: 0.25rem;    /* 4px */
    --vpp-space-2: 0.5rem;     /* 8px */
    --vpp-space-3: 0.75rem;    /* 12px */
    --vpp-space-4: 1rem;       /* 16px */
    --vpp-space-5: 1.25rem;    /* 20px */
    --vpp-space-6: 1.5rem;     /* 24px */
    --vpp-space-8: 2rem;       /* 32px */
    --vpp-space-10: 2.5rem;    /* 40px */
    --vpp-space-12: 3rem;      /* 48px */
    --vpp-space-16: 4rem;      /* 64px */
    --vpp-space-20: 5rem;      /* 80px */

    /* Layout */
    --vpp-sidebar-width: 260px;
    --vpp-sidebar-collapsed-width: 68px;
    --vpp-header-height: 60px;
    --vpp-content-max-width: 100%;
    --vpp-wizard-width: 800px;

    /* Layout Magic Numbers (legacy migration) */
    --ppj-logo-primary-color: #001836;
    --ppj-logo-secondary-color: #690202;
}

/* ── Border Radius ────────────────────────────────────────────── */
:root {
    --vpp-radius-none: 0;
    --vpp-radius-sm: 4px;
    --vpp-radius-md: 6px;
    --vpp-radius-lg: 8px;
    --vpp-radius-xl: 10px;
    --vpp-radius-2xl: 12px;
    --vpp-radius-full: 9999px;

    /* Component-specific */
    --vpp-radius-card: var(--vpp-radius-md);
    --vpp-radius-button: var(--vpp-radius-md);
    --vpp-radius-input: var(--vpp-radius-md);
    --vpp-radius-modal: 8px;
    --vpp-radius-badge: var(--vpp-radius-full);
    --vpp-radius-avatar: var(--vpp-radius-full);
}

/* ── Shadows ──────────────────────────────────────────────────── */
:root,
.rz-theme-dark {
    --vpp-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --vpp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.2);
    --vpp-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2);
    --vpp-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5), 0 4px 6px rgba(0, 0, 0, 0.2);
    --vpp-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.5), 0 8px 10px rgba(0, 0, 0, 0.2);
    --vpp-shadow-glow: 0 0 20px rgba(14, 165, 233, 0.15);
    --vpp-shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.3);
}

:root:not(.rz-theme-dark) {
    --vpp-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --vpp-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --vpp-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
    --vpp-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    --vpp-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 8px 10px rgba(0, 0, 0, 0.05);
    --vpp-shadow-glow: 0 0 20px rgba(14, 165, 233, 0.1);
    --vpp-shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.08);
}

/* ── Transitions ──────────────────────────────────────────────── */
:root {
    --vpp-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --vpp-transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --vpp-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --vpp-transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Z-Index Scale ────────────────────────────────────────────── */
:root {
    --vpp-z-dropdown: 100;
    --vpp-z-sticky: 200;
    --vpp-z-sidebar: 300;
    --vpp-z-header: 400;
    --vpp-z-modal-backdrop: 500;
    --vpp-z-modal: 600;
    --vpp-z-toast: 700;
    --vpp-z-tooltip: 800;
}

/* ── Global Base Styles ───────────────────────────────────────── */
html {
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scrollbar-gutter: stable;
}

body {
    font-family: var(--vpp-font-body);
    font-size: var(--vpp-text-base);
    line-height: var(--vpp-leading-normal);
    color: var(--vpp-text-primary);
    background-color: var(--vpp-bg-base);
    transition: background-color var(--vpp-transition-slow),
                color var(--vpp-transition-slow);
    scrollbar-gutter: stable;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--vpp-font-display);
    font-weight: var(--vpp-font-weight-semibold);
    letter-spacing: var(--vpp-tracking-tight);
    line-height: var(--vpp-leading-tight);
}

h1 { font-size: var(--vpp-text-4xl); }
h2 { font-size: var(--vpp-text-3xl); }
h3 { font-size: var(--vpp-text-2xl); }
h4 { font-size: var(--vpp-text-xl); }

/* ── Glass Surface Utility ────────────────────────────────────── */
.vpp-glass {
    background: rgba(26, 26, 26, 0.7);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid var(--vpp-border-default);
}

.rz-theme-dark .vpp-glass,
:root.rz-theme-dark .vpp-glass {
    background: rgba(26, 26, 26, 0.7);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
}

:root:not(.rz-theme-dark) .vpp-glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
}

/* ── Scrollbar (dark mode optimized) ──────────────────────────── */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--vpp-radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

:root:not(.rz-theme-dark) ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
}

:root:not(.rz-theme-dark) ::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
}

/* ── Focus Ring ───────────────────────────────────────────────── */
*:focus-visible {
    outline: 2px solid var(--vpp-primary-500);
    outline-offset: 2px;
}

/* ── Shimmer Skeleton ─────────────────────────────────────────── */
@keyframes vpp-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.vpp-skeleton {
    background: linear-gradient(
        90deg,
        var(--vpp-border-default) 25%,
        var(--vpp-bg-elevated) 50%,
        var(--vpp-border-default) 75%
    );
    background-size: 200% 100%;
    animation: vpp-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--vpp-radius-sm);
}