/* ========================================================================
   StudyFinder — Design system tokens
   Single source of truth for colors, typography, spacing, radii, shadows.
   Consumed by landing-saas.css and (incrementally) the rest of the site.
   ======================================================================== */

:root {

    /* ---- Color: brand ---- */
    --c-primary:        #7C3AED;
    --c-primary-600:    #6D28D9;
    --c-primary-50:     #F5EEFE;
    --c-accent:         #059669;
    --c-accent-50:      #ECFDF5;

    /* ---- Color: surfaces ---- */
    --c-bg:             #FAF7FF;
    --c-surface:        #FFFFFF;
    --c-muted:          #F7F3FD;

    /* ---- Color: text ---- */
    --c-fg:             #0F172A;
    --c-fg-soft:        #334155;
    --c-fg-mute:        #64748B;

    /* ---- Color: structure ---- */
    --c-border:         #EAE2F8;
    --c-border-soft:    #F1EBFB;

    /* ---- Color: semantic ---- */
    --c-danger:         #DC2626;
    --c-danger-50:      #FEE2E2;
    --c-warning:        #D97706;
    --c-warning-50:     #FEF3C7;
    --c-success:        #059669;
    --c-success-50:     #ECFDF5;

    /* ---- Typography: families ---- */
    --font-body:        'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:        'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* ---- Typography: scale ---- */
    --text-xs:          0.75rem;    /* 12px */
    --text-sm:          0.8125rem;  /* 13px */
    --text-base:        0.9375rem;  /* 15px */
    --text-md:          1rem;       /* 16px */
    --text-lg:          1.0625rem;  /* 17px */
    --text-xl:          1.125rem;   /* 18px */
    --text-2xl:         1.25rem;    /* 20px */
    --text-3xl:         1.5rem;     /* 24px */
    --text-4xl:         1.75rem;    /* 28px */
    --text-5xl:         2.25rem;    /* 36px */
    --text-hero:        clamp(2rem, 4vw + 1rem, 3.5rem);

    /* ---- Typography: weights ---- */
    --weight-normal:    400;
    --weight-medium:    500;
    --weight-semibold:  600;
    --weight-bold:      700;
    --weight-black:     800;

    /* ---- Typography: line-height & tracking ---- */
    --leading-tight:    1.15;
    --leading-snug:     1.35;
    --leading-normal:   1.55;
    --leading-relaxed:  1.7;
    --tracking-tight:   -0.03em;
    --tracking-normal:  0;
    --tracking-wide:    0.06em;

    /* ---- Spacing scale (4pt) ---- */
    --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;

    /* ---- Radii ---- */
    --radius-sm:        8px;
    --radius-md:        12px;
    --radius-lg:        20px;
    --radius-xl:        28px;
    --radius-full:      999px;

    /* ---- Shadows ---- */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.04), 0 2px 4px rgba(15, 23, 42, 0.03);
    --shadow-lg: 0 24px 48px -16px rgba(124, 58, 237, 0.18), 0 8px 24px -8px rgba(15, 23, 42, 0.08);

    /* ---- Layout ---- */
    --container-max:    1200px;
    --nav-height:       60px;
    --util-height:      34px;

    /* ---- Motion ---- */
    --ease-out:         cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out:      cubic-bezier(0.65, 0, 0.35, 1);
    --duration-fast:    160ms;
    --duration-base:    220ms;
    --duration-slow:    320ms;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast:    0ms;
        --duration-base:    0ms;
        --duration-slow:    0ms;
    }
}