/* ══════════════════════════════════════════════════════════════════
   01-tokens.css — Design tokens
   Source of truth: https://getxplain.ai/brand-guidelines (v1.1 · Apr 2026)
   ══════════════════════════════════════════════════════════════════ */

:root {
    /* ——— Color scale ————————————————————————————————— */
    --xp-bg:           #0B0820;
    --xp-bg-deep:      #050218;
    --xp-surface:      #1a0c52;
    --xp-surface-2:    #140d35;
    --xp-surface-3:    #221157;

    --xp-purple:       #7B4DFF;
    --xp-purple-lt:    #a78bfa;
    --xp-purple-dk:    #5a2fd6;
    --xp-lavender:     #C4B0FF;

    --xp-orange:       #F5A623;
    --xp-orange-lt:    #FFC06B;
    --xp-orange-dk:    #C9841A;
    --xp-gold:         #FFD700;

    --xp-blue:         #3B82F6;
    --xp-blue-lt:      #60a5fa;

    --xp-magenta:      #9C2C6B;
    --xp-coral:        #FF4B5C;
    --xp-green:        #10B981;

    --xp-ink:          #110D2B;
    --xp-muted:        #3D3760;

    /* ——— Semantic text ——————————————————————————————— */
    --xp-text-1:       #ffffff;                /* primary — headings */
    --xp-text-2:       rgba(255,255,255,0.92); /* body */
    --xp-text-3:       rgba(255,255,255,0.72); /* secondary */
    --xp-text-4:       rgba(255,255,255,0.48); /* tertiary / metadata */
    --xp-text-5:       rgba(255,255,255,0.28); /* disabled */

    /* ——— Surfaces (glass) ——————————————————————————— */
    --xp-card:         rgba(255,255,255,0.05);
    --xp-card-hover:   rgba(255,255,255,0.08);
    --xp-card-elevated:rgba(255,255,255,0.07);
    --xp-card-border:  rgba(255,255,255,0.10);
    --xp-card-border-strong: rgba(255,255,255,0.16);
    --xp-card-border-accent: rgba(123,77,255,0.28);

    /* ——— Typography ————————————————————————————————— */
    --xp-font-h:       'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --xp-font-b:       'Space Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --xp-font-ar:      'Amiri', 'Scheherazade New', 'Noto Naskh Arabic', serif;

    /* Scale: size / line-height */
    --fs-display-xl:   clamp(2.5rem, 5vw, 3.5rem);  /* 40→56 */
    --lh-display-xl:   1.12;
    --fs-display:      clamp(2rem, 4vw, 2.5rem);    /* 32→40 */
    --lh-display:      1.18;
    --fs-h1:           clamp(1.5rem, 3vw, 2rem);    /* 24→32 */
    --lh-h1:           1.22;
    --fs-h2:           1.5rem;
    --lh-h2:           1.3;
    --fs-h3:           1.25rem;
    --lh-h3:           1.35;
    --fs-body-lg:      1.125rem;
    --lh-body-lg:      1.6;
    --fs-body:         1rem;
    --lh-body:         1.65;
    --fs-caption:      0.875rem;
    --lh-caption:      1.55;
    --fs-micro:        0.75rem;
    --lh-micro:        1.5;

    /* ——— Space scale (4pt grid) ——————————————————————— */
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  20px;
    --sp-6:  24px;
    --sp-7:  32px;
    --sp-8:  40px;
    --sp-9:  48px;
    --sp-10: 64px;
    --sp-11: 80px;
    --sp-12: 96px;

    /* ——— Radius ————————————————————————————————————— */
    --r-sm:   8px;
    --r-md:   12px;
    --r-lg:   20px;
    --r-xl:   28px;
    --r-2xl:  32px;
    --r-pill: 999px;

    /* ——— Shadows (purple-tinted, cosmic feel) ———————————— */
    --sh-card:          0 10px 30px rgba(11, 8, 32, 0.4),
                        inset 0 1px 0 rgba(255,255,255,0.04);
    --sh-card-hover:    0 18px 48px rgba(123, 77, 255, 0.28),
                        inset 0 1px 0 rgba(255,255,255,0.06);
    --sh-button:        0 8px 22px rgba(123, 77, 255, 0.30);
    --sh-button-cta:    0 8px 22px rgba(245, 166, 35, 0.32);
    --sh-glow-purple:   0 0 38px rgba(123, 77, 255, 0.45);
    --sh-glow-orange:   0 0 28px rgba(245, 166, 35, 0.40);

    /* ——— Motion ————————————————————————————————————— */
    --t-fast:   180ms;
    --t-base:   240ms;
    --t-slow:   360ms;
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

    /* ——— Gradients ————————————————————————————————— */
    --g-primary:   linear-gradient(135deg, var(--xp-purple) 0%, var(--xp-blue) 100%);
    --g-cta:       linear-gradient(135deg, var(--xp-orange) 0%, var(--xp-gold) 100%);
    --g-hero:      linear-gradient(135deg, var(--xp-purple-lt) 0%, #ffffff 100%);
    --g-surface:   linear-gradient(160deg, var(--xp-surface) 0%, var(--xp-bg) 55%, var(--xp-bg-deep) 100%);
    --g-divider:   linear-gradient(90deg, transparent 0%, rgba(123,77,255,0.45) 50%, transparent 100%);

    /* ——— Legacy guff token remapping ————————————————— */
    --guff-bbc: var(--xp-bg);
    --guff-mc1: var(--xp-purple);
    --guff-hc:  var(--xp-text-1);
    --guff-bc:  var(--xp-text-2);

    /* Kill vendor pink accent */
    --ghost-accent-color: var(--xp-purple) !important;
}