/* =========================================================================
   Formasync — Design Tokens
   Single source of truth for color, spacing, type, motion.
   ========================================================================= */

:root {
    /* Brand */
    --brand-purple:        #6B4498;
    --brand-purple-light:  #8B5DBD;
    --brand-purple-glow:   rgba(107, 68, 152, 0.45);
    --brand-blue:          #2B3886;
    --brand-blue-light:    #3D4DA8;

    /* Surfaces (dark theme) */
    --bg-base:             #0E1330;
    --bg-surface:          #161D44;
    --bg-elevated:         #1F2856;
    --bg-overlay:          rgba(14, 19, 48, 0.88);

    /* Borders */
    --border-subtle:       rgba(255, 255, 255, 0.08);
    --border-default:      rgba(255, 255, 255, 0.14);
    --border-strong:       rgba(255, 255, 255, 0.24);

    /* Text */
    --text-primary:        #FFFFFF;
    --text-secondary:      rgba(255, 255, 255, 0.78);
    --text-muted:          rgba(255, 255, 255, 0.55);
    --text-on-purple:      #FFFFFF;

    /* Radii */
    --radius-sm:           6px;
    --radius-md:           12px;
    --radius-lg:           20px;
    --radius-pill:         999px;

    /* Spacing scale */
    --space-1:             0.25rem;
    --space-2:             0.5rem;
    --space-3:             0.75rem;
    --space-4:             1rem;
    --space-5:             1.5rem;
    --space-6:             2rem;
    --space-7:             3rem;
    --space-8:             4rem;
    --space-9:             6rem;

    /* Type scale */
    --text-xs:             0.75rem;
    --text-sm:             0.875rem;
    --text-base:           1rem;
    --text-lg:             1.125rem;
    --text-xl:             1.25rem;
    --text-2xl:            1.5rem;
    --text-3xl:            clamp(1.75rem, 3vw, 2.25rem);
    --text-4xl:            clamp(2rem, 4vw, 3rem);
    --text-5xl:            clamp(2.5rem, 6vw, 4.5rem);

    /* Layout */
    --container-max:       1200px;
    --container-pad:       clamp(1rem, 4vw, 2.5rem);
    --section-pad-y:       clamp(3rem, 8vw, 6rem);

    /* Motion */
    --ease-out:            cubic-bezier(0.2, 0.8, 0.2, 1);
    --transition-fast:     150ms var(--ease-out);
    --transition-base:     250ms var(--ease-out);

    /* Elevation */
    --shadow-sm:           0 2px 8px rgba(0, 0, 0, 0.30);
    --shadow-md:           0 8px 24px rgba(0, 0, 0, 0.40);
    --shadow-lg:           0 16px 48px rgba(0, 0, 0, 0.50);
    --shadow-glow:         0 0 60px var(--brand-purple-glow);
}