/* ============================================================
   BestGuide Design Tokens v4
   Source of truth for all visual decisions.
   Ported from new_bestguide design system.
   ============================================================ */

:root {
    /* COLOR — Primary scale */
    --color-primary-50:  #F3EEFF;
    --color-primary-100: #E4D4FD;
    --color-primary-200: #C9AAFB;
    --color-primary-300: #AB7DF7;
    --color-primary-400: #9860F1;
    --color-primary-500: #8342EA;
    --color-primary-600: #6B2DC8;
    --color-primary-700: #5220A0;
    --color-primary-800: #381575;
    --color-primary-900: #1B0938;

    /* COLOR — Brand anchors */
    --color-brand-dark:  #1B0938;
    --color-brand-light: #F7FCFF;

    /* COLOR — Neutral scale */
    --color-neutral-0:   #FFFFFF;
    --color-neutral-50:  #F7FCFF;
    --color-neutral-100: #EEF3F8;
    --color-neutral-200: #D9E1EA;
    --color-neutral-300: #B8C4D0;
    --color-neutral-400: #8A98A8;
    --color-neutral-500: #5E6E80;
    --color-neutral-600: #3D505F;
    --color-neutral-700: #243140;
    --color-neutral-800: #131E29;

    /* COLOR — Semantic */
    --color-success-100: #DCFCE7;
    --color-success-500: #16A34A;
    --color-success-cta:            #00A674;
    --color-success-cta-hover:      #009165;
    --color-success-cta-active:     #007A54;
    --color-success-cta-foreground: #FFFFFF;
    --color-warning-100: #FFFBE0;
    --color-warning-500: #FCD018;
    --color-error-100:   #FFF0EE;
    --color-error-500:   #FF6958;
    --color-info-100:    #E0F2FE;
    --color-info-500:    #0EA5E9;

    /* SURFACE */
    --surface-page:    #F7FCFF;
    --surface-default: #FFFFFF;
    --surface-sunken:  #EEF3F8;

    /* TYPOGRAPHY */
    --text-display:  clamp(2.5rem, 5vw, 3.5rem);
    --text-h1:       clamp(2rem, 4vw, 2.75rem);
    --text-h2:       clamp(1.625rem, 3vw, 2.25rem);
    --text-h3:       clamp(1.25rem, 2.5vw, 1.75rem);
    --text-h4:       clamp(1.125rem, 2vw, 1.375rem);
    --text-body-lg:  1.125rem;
    --text-body:     1rem;
    --text-body-sm:  0.9375rem;
    --text-caption:  0.875rem;
    --text-label:    0.8125rem;
    --text-overline: 0.75rem;
    --text-micro:    0.6875rem;

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

    /* BORDER RADIUS */
    --radius-xs:   4px;
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-full: 9999px;

    /* SHADOWS */
    --shadow-xs:      0 1px 2px rgba(0,0,0,.06);
    --shadow-sm:      0 2px 8px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
    --shadow-md:      0 4px 16px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);
    --shadow-lg:      0 8px 32px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.06);
    --shadow-xl:      0 16px 48px rgba(0,0,0,.12), 0 8px 16px rgba(0,0,0,.08);
    --shadow-focus:   0 0 0 3px rgba(131,66,234,.30);
    --shadow-glow-sm: 0 0 12px rgba(131,66,234,.25);

    /* BORDERS */
    --border-subtle:  1px solid #D9E1EA;
    --border-default: 1px solid #B8C4D0;
    --border-brand:   1px solid #8342EA;

    /* MOTION */
    --duration-fast:    100ms;
    --duration-base:    200ms;
    --duration-slow:    300ms;
    --duration-enter:   400ms;
    --duration-complex: 600ms;

    --ease-default: cubic-bezier(0.2, 0, 0, 1);
    --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-in:      cubic-bezier(0.4, 0, 1, 1);
    --ease-out:     cubic-bezier(0, 0, 0.2, 1);

    /* MAX WIDTH */
    --max-container: 1280px;
}

/* KEYFRAMES */
@keyframes v4-fade-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes v4-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}
@keyframes v4-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-25%); }
}
@keyframes v4-slide-in-left {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}
@keyframes v4-orbit-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes v4-orbit-counter {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
}
@keyframes v4-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}