/* ==========================================================================
   PRLinkUp — Design tokens
   Single source of truth for colours, gradients, type, spacing and motion.
   Palette matches the PRLinkUp app exactly.
   ========================================================================== */

:root {
    /* ---------- Brand: violet / purple ---------- */
    --violet-900: #2A1A8C;
    --violet-800: #3A22B8;
    --violet-700: #4A2FD9;   /* Deep violet — hero gradient start */
    --violet-650: #6A4CF0;   /* Primary pressed */
    --violet-600: #6A4CF5;   /* Mid violet — hero gradient middle */
    --violet-500: #7A5DFF;   /* PRIMARY */
    --violet-400: #8B6CFF;   /* Light violet — hero gradient end */
    --violet-300: #B4A3FF;
    --violet-200: #D9D0FF;
    --violet-100: #F0ECFF;   /* Primary soft */

    --purple-500: #B06AF8;   /* Gradient end */
    --purple-400: #C48BFA;
    --lavender:   #E9D5FF;   /* Highlights on violet backgrounds */

    /* ---------- Accent glows ---------- */
    --pink-400:  #E879F9;    /* Glow pink (backgrounds only) */
    --blue-400:  #60A5FA;    /* Glow blue (backgrounds only) */
    --blue-500:  #3B82F6;
    --blue-600:  #4F6BFF;
    --indigo-500:#6366F1;
    --sky-200:   #BAE0FF;

    /* ---------- Neutrals ---------- */
    --white:        #FFFFFF;
    --gray-50:      #F6F8FA; /* Page background */
    --gray-100:     #F3F4F7; /* Muted surface */
    --gray-200:     #E5E5EA; /* Border */
    --ink-900:      #1A1D1E; /* Text primary */
    --ink-950:      #111326;
    --ink-600:      #6A6A8B; /* Text secondary */
    --ink-400:      #9A9AB2; /* Text tertiary */

    /* ---------- Status ---------- */
    --success: #00D26A;
    --success-soft: #E3FBEF;
    --warning: #FDB022;
    --warning-soft: #FFF5E0;
    --error:   #FF4C4C;
    --error-soft: #FFECEC;

    /* ---------- Semantic aliases ---------- */
    --color-primary:         var(--violet-500);
    --color-primary-pressed: var(--violet-650);
    --color-primary-soft:    var(--violet-100);
    --color-bg:              var(--white);
    --color-bg-alt:          var(--gray-50);
    --color-surface:         var(--white);
    --color-surface-muted:   var(--gray-100);
    --color-border:          var(--gray-200);
    --color-text:            var(--ink-900);
    --color-text-secondary:  var(--ink-600);
    --color-text-tertiary:   var(--ink-400);
    --color-on-primary:      var(--white);

    /* ==========================================================================
       Gradients
       ========================================================================== */

    /* Primary — buttons, highlighted words, icons */
    --grad-primary:      linear-gradient(135deg, #7A5DFF 0%, #B06AF8 100%);
    --grad-primary-hover:linear-gradient(135deg, #6A4CF0 0%, #A05AEE 100%);

    /* Hero — deep violet → mid → light */
    --grad-hero:         linear-gradient(135deg, #4A2FD9 0%, #6A4CF5 50%, #8B6CFF 100%);

    /* Royal — deep indigo night for dark sections */
    --grad-royal:        linear-gradient(160deg, #1B1450 0%, #2A1A8C 45%, #4A2FD9 100%);

    /* Ocean — blue → violet */
    --grad-ocean:        linear-gradient(135deg, #60A5FA 0%, #7A5DFF 100%);

    /* Twilight — blue → violet → purple */
    --grad-twilight:     linear-gradient(120deg, #4F6BFF 0%, #7A5DFF 50%, #B06AF8 100%);

    /* Orchid — violet → pink */
    --grad-orchid:       linear-gradient(135deg, #7A5DFF 0%, #E879F9 100%);

    /* Aurora — full spectrum for text and accents */
    --grad-aurora:       linear-gradient(100deg, #60A5FA 0%, #7A5DFF 35%, #B06AF8 70%, #E879F9 100%);

    /* Text gradients */
    --grad-text:         linear-gradient(100deg, #6A4CF5 0%, #7A5DFF 40%, #B06AF8 100%);
    --grad-text-light:   linear-gradient(100deg, #FFFFFF 0%, #E9D5FF 60%, #F5D0FE 100%);

    /* Soft washes for light sections */
    --grad-soft:         linear-gradient(180deg, #F0ECFF 0%, #FFFFFF 100%);
    --grad-mist:         linear-gradient(135deg, #EEF4FF 0%, #F0ECFF 50%, #FBF0FF 100%);

    /* ---------- Typography ---------- */
    --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --fs-xs:   0.75rem;    /* 12 */
    --fs-sm:   0.875rem;   /* 14 */
    --fs-base: 1rem;       /* 16 */
    --fs-md:   1.125rem;   /* 18 */
    --fs-lg:   1.25rem;    /* 20 */
    --fs-xl:   1.5rem;     /* 24 */
    --fs-2xl:  clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
    --fs-3xl:  clamp(2rem, 1.5rem + 2vw, 2.875rem);
    --fs-hero: clamp(2.25rem, 1.4rem + 3.6vw, 4rem); /* ~36px phone → 64px desktop */

    --fw-regular: 400;
    --fw-medium:  500;
    --fw-semi:    600;
    --fw-bold:    700;
    --fw-black:   800;

    --lh-tight: 1.1;
    --lh-snug:  1.3;
    --lh-body:  1.6;
    --ls-tight: -0.02em;

    /* ---------- Spacing (4px scale) ---------- */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;
    --sp-16: 4rem;
    --sp-20: 5rem;
    --sp-24: 6rem;
    --sp-32: 8rem;

    --section-y: clamp(4.5rem, 3rem + 6vw, 8rem); /* 72px → 128px */
    --container: 1200px;
    --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);
    --header-h: 76px;

    /* ---------- Radius ---------- */
    --r-sm: 8px;
    --r-input: 12px;
    --r-btn: 16px;
    --r-card: 20px;
    --r-panel: 32px;
    --r-pill: 999px;

    /* ---------- Shadows ---------- */
    --shadow-xs:   0 1px 2px rgba(17, 19, 38, 0.05);
    --shadow-sm:   0 4px 12px rgba(17, 19, 38, 0.05);
    --shadow-md:   0 8px 24px rgba(17, 19, 38, 0.06);
    --shadow-lg:   0 20px 48px rgba(17, 19, 38, 0.10);
    --shadow-xl:   0 32px 80px rgba(42, 26, 140, 0.22);
    --glow-violet: 0 10px 28px rgba(122, 93, 255, 0.35);
    --glow-violet-lg: 0 16px 40px rgba(122, 93, 255, 0.45);
    --glow-hover:  0 14px 36px rgba(122, 93, 255, 0.16);

    /* ---------- Motion ---------- */
    --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
    --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast:  180ms;
    --dur-base:  300ms;
    --dur-reveal: 800ms;
    --stagger:   90ms;

    /* ---------- Layers ---------- */
    --z-header: 100;
    --z-nav:    110;
}