/* ========================================================
   VANIAN Design System
   Shared tokens, typography, components & animations
   Include this file AFTER Tailwind CDN script on every page.
   ======================================================== */

:root {
    /* ---- Brand Colors (Zekko-like neutral) ---- */
    --v-primary-50:  #f8fafc;
    --v-primary-100: #f1f5f9;
    --v-primary-200: #e2e8f0;
    --v-primary-300: #cbd5e1;
    --v-primary-400: #94a3b8;
    --v-primary-500: #64748b;
    --v-primary-600: #334155;
    --v-primary-700: #1e293b;
    --v-primary-800: #0f172a;
    --v-primary-900: #020617;

    --v-accent-400: #38bdf8;
    --v-accent-500: #0ea5e9;
    --v-accent-600: #0284c7;

    --v-pink-400: #94a3b8;
    --v-pink-500: #64748b;
    --v-pink-600: #475569;

    --v-success-100: #d1fae5;
    --v-success-500: #10b981;
    --v-success-600: #059669;

    --v-warning-100: #fef3c7;
    --v-warning-500: #f59e0b;
    --v-warning-600: #d97706;

    --v-danger-100: #fee2e2;
    --v-danger-500: #ef4444;
    --v-danger-600: #dc2626;

    --v-info-100: #dbeafe;
    --v-info-500: #3b82f6;
    --v-info-600: #2563eb;

    /* ---- Neutral Scale ---- */
    --v-gray-50:  #f8fafc;
    --v-gray-100: #f1f5f9;
    --v-gray-200: #e2e8f0;
    --v-gray-300: #cbd5e1;
    --v-gray-400: #94a3b8;
    --v-gray-500: #64748b;
    --v-gray-600: #475569;
    --v-gray-700: #334155;
    --v-gray-800: #1e293b;
    --v-gray-900: #0f172a;

    /* ---- Semantic Tokens (Light) ---- */
    --v-bg: var(--v-gray-50);
    --v-bg-elevated: #ffffff;
    --v-surface: #ffffff;
    --v-border: var(--v-gray-200);
    --v-text: var(--v-gray-800);
    --v-text-muted: var(--v-gray-500);
    --v-text-inverse: #ffffff;

    /* ---- Gradients ---- */
    --v-grad-primary: linear-gradient(135deg, #0f172a 0%, #334155 100%);
    --v-grad-primary-soft: linear-gradient(135deg, #334155 0%, #64748b 100%);
    --v-grad-hero: linear-gradient(135deg, #f8fafc 0%, #eef2f7 45%, #e2e8f0 100%);

    /* ---- Shadows ---- */
    --v-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --v-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
    --v-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.08);
    --v-shadow-xl: 0 24px 48px rgba(15, 23, 42, 0.1);
    --v-ring: 0 0 0 4px rgba(51, 65, 85, 0.12);

    /* ---- Radius ---- */
    --v-radius-sm: 8px;
    --v-radius-md: 12px;
    --v-radius-lg: 16px;
    --v-radius-xl: 24px;
    --v-radius-full: 999px;

    /* ---- Spacing (4px baseline) ---- */
    --v-space-1: 4px;
    --v-space-2: 8px;
    --v-space-3: 12px;
    --v-space-4: 16px;
    --v-space-5: 24px;
    --v-space-6: 32px;
    --v-space-7: 48px;

    /* ---- Motion ---- */
    --v-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
    --v-transition: 0.25s ease;
    --v-transition-fast: 0.15s ease;
}

/* ---- Dark Mode Semantic Tokens ---- */
html.v-dark {
    --v-bg: var(--v-gray-900);
    --v-bg-elevated: #16213a;
    --v-surface: #16213a;
    --v-border: #26365a;
    --v-text: var(--v-gray-100);
    --v-text-muted: #93a4c3;
    --v-text-inverse: #0f172a;

    --v-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --v-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --v-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45);
    --v-shadow-xl: 0 28px 56px rgba(0, 0, 0, 0.5);
}

html.v-dark body { background: var(--v-bg); color: var(--v-text); }

/* ========================================================
   Typography
   ======================================================== */
.v-h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -0.5px; line-height: 1.2; color: var(--v-text); }
.v-h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 800; letter-spacing: -0.4px; line-height: 1.25; color: var(--v-text); }
.v-h3 { font-size: 22px; font-weight: 700; line-height: 1.3; color: var(--v-text); }
.v-h4 { font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--v-text); }
.v-body { font-size: 15px; font-weight: 400; line-height: 1.7; color: var(--v-text); }
.v-caption { font-size: 13px; font-weight: 500; color: var(--v-text-muted); }
.v-small { font-size: 12px; font-weight: 400; color: var(--v-text-muted); }
.v-gradient-text {
    color: var(--v-primary-800);
    -webkit-text-fill-color: initial;
    background: none;
}

/* ========================================================
   Buttons
   ======================================================== */
.v-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    font-weight: 700;
    font-size: 14px;
    border-radius: var(--v-radius-md);
    padding: 0 20px;
    min-height: 48px;
    cursor: pointer;
    border: none;
    transition: transform var(--v-transition-fast), box-shadow var(--v-transition-fast), background var(--v-transition-fast), opacity var(--v-transition-fast);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    white-space: nowrap;
}
.v-btn:active { transform: scale(0.97); }
.v-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }

.v-btn-sm { min-height: 40px; padding: 0 16px; font-size: 13px; }
.v-btn-lg { min-height: 52px; padding: 0 28px; font-size: 15px; }

.v-btn-primary {
    background: var(--v-primary-800);
    color: #fff;
    box-shadow: var(--v-shadow-sm);
}
.v-btn-primary:hover { background: var(--v-primary-700); box-shadow: var(--v-shadow-md); transform: translateY(-1px); }

.v-btn-secondary {
    background: var(--v-surface);
    color: var(--v-primary-700);
    border: 1px solid var(--v-border);
}
.v-btn-secondary:hover { background: var(--v-gray-50); border-color: var(--v-primary-300); }
html.v-dark .v-btn-secondary { border-color: var(--v-primary-700); color: var(--v-primary-300); }
html.v-dark .v-btn-secondary:hover { background: rgba(99,102,241,0.12); }

.v-btn-ghost {
    background: transparent;
    color: var(--v-text-muted);
}
.v-btn-ghost:hover { background: var(--v-gray-100); color: var(--v-text); }
html.v-dark .v-btn-ghost:hover { background: rgba(255,255,255,0.06); }

.v-btn-danger {
    background: linear-gradient(135deg, var(--v-danger-500), var(--v-danger-600));
    color: #fff;
    box-shadow: 0 8px 20px rgba(239,68,68,0.25);
}
.v-btn-danger:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(239,68,68,0.3); }

.v-btn:focus-visible { outline: none; box-shadow: var(--v-ring); }

/* Spinner for loading buttons */
.v-spinner {
    width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: v-spin 0.7s linear infinite;
}
@keyframes v-spin { to { transform: rotate(360deg); } }

/* ========================================================
   Cards & Surfaces
   ======================================================== */
.v-card {
    background: var(--v-surface);
    border: 1px solid var(--v-border);
    border-radius: var(--v-radius-lg);
    box-shadow: var(--v-shadow-sm);
    transition: transform var(--v-transition), box-shadow var(--v-transition), border-color var(--v-transition);
}
.v-card-hover:hover {
    transform: translateY(-6px);
    box-shadow: var(--v-shadow-lg);
    border-color: var(--v-primary-200);
}
.v-card-elevated { box-shadow: var(--v-shadow-md); }
.v-card-gradient {
    background: var(--v-grad-primary);
    color: #fff;
    border: none;
}

/* ========================================================
   Badges
   ======================================================== */
.v-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border-radius: var(--v-radius-full);
    font-size: 12px;
    font-weight: 700;
}
.v-badge-success { background: var(--v-success-100); color: var(--v-success-600); }
.v-badge-warning { background: var(--v-warning-100); color: var(--v-warning-600); }
.v-badge-danger  { background: var(--v-danger-100);  color: var(--v-danger-600); }
.v-badge-info    { background: var(--v-info-100);    color: var(--v-info-600); }
.v-badge-primary { background: var(--v-primary-100); color: var(--v-primary-700); }

/* ========================================================
   Forms
   ======================================================== */
.v-field { margin-bottom: var(--v-space-4); }
.v-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--v-text);
}
.v-input, .v-select, .v-textarea {
    width: 100%;
    min-height: 48px;
    font-size: 16px;
    font-family: inherit;
    padding: 0 16px;
    border-radius: var(--v-radius-sm);
    border: 2px solid var(--v-border);
    background: var(--v-surface);
    color: var(--v-text);
    transition: border-color var(--v-transition-fast), box-shadow var(--v-transition-fast);
}
.v-textarea { min-height: 96px; padding: 12px 16px; resize: vertical; }
.v-input:focus, .v-select:focus, .v-textarea:focus {
    outline: none;
    border-color: var(--v-primary-500);
    box-shadow: var(--v-ring);
}
.v-input.v-invalid, .v-textarea.v-invalid { border-color: var(--v-danger-500); }
.v-input.v-valid, .v-textarea.v-valid { border-color: var(--v-success-500); }
.v-error-text { display: block; margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--v-danger-600); }
.v-help-text { display: block; margin-top: 6px; font-size: 12px; color: var(--v-text-muted); }

/* ========================================================
   Skeleton / Loading
   ======================================================== */
.v-skeleton {
    position: relative;
    overflow: hidden;
    background: var(--v-gray-200);
    border-radius: var(--v-radius-sm);
}
html.v-dark .v-skeleton { background: #223154; }
.v-skeleton::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    animation: v-shimmer 1.4s infinite;
}
html.v-dark .v-skeleton::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent); }
@keyframes v-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ========================================================
   Animations
   ======================================================== */
@keyframes v-fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes v-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes v-pop-in { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
.v-animate-up { animation: v-fade-up 0.5s var(--v-ease) both; }
.v-animate-in { animation: v-fade-in 0.4s ease both; }
.v-animate-pop { animation: v-pop-in 0.35s var(--v-ease) both; }

/* Focus ring utility (accessibility) */
.v-focus-ring:focus-visible { outline: none; box-shadow: var(--v-ring); }

/* ========================================================
   Theme Toggle Button
   ======================================================== */
.v-theme-toggle {
    width: 44px; height: 44px;
    border-radius: var(--v-radius-full);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--v-gray-100);
    color: var(--v-text-muted);
    border: 1px solid var(--v-border);
    cursor: pointer;
    transition: background var(--v-transition-fast), color var(--v-transition-fast), transform var(--v-transition-fast);
}
.v-theme-toggle:hover { transform: rotate(15deg); color: var(--v-primary-600); }
html.v-dark .v-theme-toggle { background: #1c2b4a; }

/* ========================================================
   Scrollbar
   ======================================================== */
* { scrollbar-width: thin; scrollbar-color: var(--v-gray-300) transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-thumb { background: var(--v-gray-300); border-radius: 4px; }
html.v-dark *::-webkit-scrollbar-thumb { background: #2c3e63; }