:root {
    --p-50:   #f5f3ff;
    --p-100:  #ede9fe;
    --p-200:  #ddd6fe;
    --p-300:  #c4b5fd;
    --p-400:  #a78bfa;
    --p-500:  #8b5cf6;
    --p-600:  #7c3aed;
    --p-700:  #6d28d9;
    --p-800:  #5b21b6;
    --p-900:  #4c1d95;

    --canvas:          #f2f0f9;
    --canvas-surface:  #ffffff;
    --canvas-raised:   #faf9ff;
    --canvas-border:   rgba(109, 40, 217, 0.12);
    --canvas-border-2: rgba(109, 40, 217, 0.22);
    --canvas-text:     #14082a;
    --canvas-muted:    rgba(20, 8, 42, 0.52);
    --canvas-subtle:   rgba(20, 8, 42, 0.32);

    --chrome:          #100820;
    --chrome-surface:  #1c0e38;
    --chrome-raised:   #261550;
    --chrome-border:   rgba(139, 92, 246, 0.18);
    --chrome-border-2: rgba(139, 92, 246, 0.32);
    --chrome-text:     #f0ebff;
    --chrome-muted:    rgba(240, 235, 255, 0.55);
    --chrome-subtle:   rgba(240, 235, 255, 0.30);

    --primary:        #8b5cf6;
    --primary-dark:   #7c3aed;
    --primary-darker: #6d28d9;
    --primary-glow:   rgba(139, 92, 246, 0.35);
    --primary-glow-2: rgba(139, 92, 246, 0.15);

    --danger:      #e53e3e;
    --danger-bg:   rgba(229, 62, 62, 0.08);
    --danger-border: rgba(229, 62, 62, 0.3);
    --success:     #38a169;
    --success-bg:  rgba(56, 161, 105, 0.08);
    --info:        #3182ce;
    --info-bg:     rgba(49, 130, 206, 0.08);
    --warning:     #d69e2e;
    --warning-bg:  rgba(214, 158, 46, 0.08);

    --grad-brand:   linear-gradient(135deg, #5b21b6 0%, #7c3aed 45%, #8b5cf6 100%);
    --grad-brand-h: linear-gradient(135deg, #4c1d95 0%, #6d28d9 45%, #7c3aed 100%);
    --grad-chrome:  linear-gradient(180deg, #100820 0%, #1a0b35 100%);
    --grad-text:    linear-gradient(135deg, #a78bfa 0%, #c4b5fd 50%, #ddd6fe 100%);
    --grad-text-dk: linear-gradient(135deg, #6d28d9 0%, #7c3aed 50%, #8b5cf6 100%);
    --grad-danger:  linear-gradient(135deg, #e53e3e, #c53030);

    --sh-xs:  0 1px 2px rgba(0,0,0,0.06);
    --sh-sm:  0 1px 4px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
    --sh-md:  0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.05);
    --sh-lg:  0 8px 32px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.06);
    --sh-xl:  0 16px 48px rgba(0,0,0,0.12), 0 8px 20px rgba(0,0,0,0.07);
    --sh-2xl: 0 24px 64px rgba(0,0,0,0.14), 0 12px 28px rgba(0,0,0,0.08);
    --sh-brand: 0 4px 20px rgba(124,58,237,0.38), 0 1px 4px rgba(0,0,0,0.1);
    --sh-brand-lg: 0 8px 32px rgba(109,40,217,0.45), 0 2px 8px rgba(0,0,0,0.12);
    --sh-chrome: 0 8px 40px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3);

    --r-xs:   4px;
    --r-sm:   8px;
    --r-md:   12px;
    --r-lg:   16px;
    --r-xl:   20px;
    --r-2xl:  24px;
    --r-3xl:  32px;
    --r-full: 9999px;

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-std: cubic-bezier(0.4, 0, 0.2, 1);

    --t-fast:   140ms var(--ease-std);
    --t-base:   200ms var(--ease-std);
    --t-slow:   320ms var(--ease-out);
    --t-spring: 480ms var(--ease-spring);
}

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

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    color-scheme: light;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--canvas-text);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background-color: var(--canvas);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 70% 50% at 100% 0%, rgba(139,92,246,0.07) 0%, transparent 55%),
        radial-gradient(ellipse 55% 40% at 0% 100%, rgba(109,40,217,0.05) 0%, transparent 55%),
        var(--canvas);
    pointer-events: none;
}


*:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
    border-radius: var(--r-sm);
}

::-webkit-scrollbar          { width: 5px; height: 5px; }
::-webkit-scrollbar-track    { background: transparent; }
::-webkit-scrollbar-thumb    { background: rgba(139,92,246,0.25); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(139,92,246,0.45); }

.text-gradient {
    background: var(--grad-text-dk);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@keyframes hi-fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes hi-fadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes hi-fadeInFast {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes hi-scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes hi-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.7; transform: scale(1.15); }
}
@keyframes hi-glow-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(139,92,246,0.5); }
    50%       { box-shadow: 0 0 20px rgba(139,92,246,0.9), 0 0 40px rgba(139,92,246,0.3); }
}
@keyframes hi-shimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}