/* ============================================================
   VPNET Design System — Tokens & Foundation
   Inspired by Stripe / Linear / Vercel aesthetics
   ============================================================ */

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

/* ---- Design Tokens ---- */
:root {
    /* Brand */
    --vp-primary: #0041FF;
    --vp-primary-hover: #0035D4;
    --vp-primary-active: #002AA8;
    --vp-primary-soft: rgba(0, 65, 255, 0.08);
    --vp-primary-softer: rgba(0, 65, 255, 0.04);
    --vp-primary-border: rgba(0, 65, 255, 0.2);
    --vp-primary-disabled: #99B5FF;

    /* Semantic */
    --vp-success: #16A34A;
    --vp-success-soft: rgba(22, 163, 74, 0.08);
    --vp-success-border: rgba(22, 163, 74, 0.2);
    --vp-warning: #D97706;
    --vp-warning-soft: rgba(217, 119, 6, 0.08);
    --vp-warning-border: rgba(217, 119, 6, 0.2);
    --vp-danger: #DC2626;
    --vp-danger-soft: rgba(220, 38, 38, 0.08);
    --vp-danger-border: rgba(220, 38, 38, 0.2);
    --vp-info: #0EA5E9;
    --vp-info-soft: rgba(14, 165, 233, 0.08);
    --vp-accent: #7C3AED;
    --vp-accent-soft: rgba(124, 58, 237, 0.08);

    /* Neutrals */
    --vp-text-primary: #0A0D14;
    --vp-text-secondary: #525866;
    --vp-text-tertiary: #868C98;
    --vp-text-placeholder: #B0B5BD;
    --vp-text-disabled: #CDD0D5;
    --vp-text-inverse: #FFFFFF;

    /* Surfaces */
    --vp-bg-page: #F7F8FA;
    --vp-bg-card: #FFFFFF;
    --vp-bg-elevated: #FFFFFF;
    --vp-bg-subtle: #F2F3F5;
    --vp-bg-muted: #E8EAED;
    --vp-bg-overlay: rgba(10, 13, 20, 0.5);

    /* Borders */
    --vp-border: #E2E4E9;
    --vp-border-light: #EEEFF2;
    --vp-border-focus: var(--vp-primary);

    /* Shadows */
    --vp-shadow-xs: 0 1px 2px rgba(10, 13, 20, 0.04);
    --vp-shadow-sm: 0 1px 3px rgba(10, 13, 20, 0.06), 0 1px 2px rgba(10, 13, 20, 0.04);
    --vp-shadow-md: 0 4px 12px rgba(10, 13, 20, 0.06), 0 1px 3px rgba(10, 13, 20, 0.04);
    --vp-shadow-lg: 0 12px 32px rgba(10, 13, 20, 0.08), 0 2px 6px rgba(10, 13, 20, 0.04);
    --vp-shadow-focus: 0 0 0 3px rgba(0, 65, 255, 0.15);

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

    --vp-text-xs: 0.75rem;    /* 12px */
    --vp-text-sm: 0.8125rem;  /* 13px */
    --vp-text-base: 0.875rem; /* 14px */
    --vp-text-md: 0.9375rem;  /* 15px */
    --vp-text-lg: 1.0625rem;  /* 17px */
    --vp-text-xl: 1.25rem;    /* 20px */
    --vp-text-2xl: 1.5rem;    /* 24px */
    --vp-text-3xl: 1.875rem;  /* 30px */

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

    /* Spacing */
    --vp-space-1: 4px;
    --vp-space-2: 8px;
    --vp-space-3: 12px;
    --vp-space-4: 16px;
    --vp-space-5: 20px;
    --vp-space-6: 24px;
    --vp-space-8: 32px;
    --vp-space-10: 40px;
    --vp-space-12: 48px;
    --vp-space-16: 64px;

    /* Radii */
    --vp-radius-sm: 6px;
    --vp-radius-md: 8px;
    --vp-radius-lg: 12px;
    --vp-radius-xl: 16px;
    --vp-radius-full: 9999px;

    /* Transitions */
    --vp-transition-fast: 120ms ease;
    --vp-transition-base: 180ms ease;
    --vp-transition-slow: 280ms ease;
}

/* ---- Base Reset ---- */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: var(--vp-font);
    font-size: var(--vp-text-base);
    line-height: var(--vp-leading-normal);
    color: var(--vp-text-primary);
    background: var(--vp-bg-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    min-height: 100vh;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color var(--vp-transition-fast);
}

/* ---- Typography Utilities ---- */
.vp-heading-xl {
    font-size: var(--vp-text-3xl);
    font-weight: 700;
    line-height: var(--vp-leading-tight);
    letter-spacing: -0.025em;
    color: var(--vp-text-primary);
}

.vp-heading-lg {
    font-size: var(--vp-text-2xl);
    font-weight: 700;
    line-height: var(--vp-leading-tight);
    letter-spacing: -0.02em;
    color: var(--vp-text-primary);
}

.vp-heading-md {
    font-size: var(--vp-text-xl);
    font-weight: 600;
    line-height: var(--vp-leading-tight);
    letter-spacing: -0.015em;
    color: var(--vp-text-primary);
}

.vp-heading-sm {
    font-size: var(--vp-text-lg);
    font-weight: 600;
    line-height: var(--vp-leading-tight);
    letter-spacing: -0.01em;
    color: var(--vp-text-primary);
}

.vp-text-sm {
    font-size: var(--vp-text-sm);
    color: var(--vp-text-secondary);
}

.vp-text-xs {
    font-size: var(--vp-text-xs);
    color: var(--vp-text-tertiary);
}

.vp-text-mono {
    font-family: var(--vp-font-mono);
    font-size: var(--vp-text-sm);
}