/* =============================================================================
   FPLyzer — design tokens
   =============================================================================
   The app has never had an app-wide token layer: header.css, the only stylesheet
   loaded on every page, defines no custom properties, and the brand hexes are
   repeated literally hundreds of times across the templates' inline <style>
   blocks. This file starts one.

   Every value below is the value already in use — this is a naming exercise, not
   a restyle. Names follow admin.css:9-23, which is the closest thing the
   codebase had to a token set (--c-green / --c-pink / --c-gold / --c-text).
   admin.css keeps its own :root and loads after this on admin pages, so its
   slightly different --c-muted still wins there.

   Currently consumed by landing.css only. Migrating the other stylesheets is
   worthwhile follow-up work, not something to fold into a landing-page change:
   every one of them would need re-verifying by eye, and there is no test suite.
   ============================================================================= */

:root {
    /* ── Brand ─────────────────────────────────────────────────────────── */
    --c-purple:        #38003C;   /* page ground, text-on-green */
    --c-purple-deep:   #2D0030;   /* gradient mid-stop */
    --c-pink:          #E90052;   /* primary accent, "FPL" in the wordmark */
    --c-pink-hover:    #D10048;
    --c-green:         #00FF87;   /* secondary accent, "yzer", success */
    --c-green-hover:   #00E67A;
    --c-green-deep:    #00CC6E;
    --c-gold:          #FFD700;   /* reserved for the AI action, app-wide */
    --c-gold-deep:     #FFA500;
    --c-violet:        #B47FFF;   /* AI review card, from squad-pitch.css */

    /* ── Text ──────────────────────────────────────────────────────────── */
    --c-text:          #FFFFFF;
    --c-muted:         #CCCCCC;
    --c-dim:           #888888;

    /* ── Surfaces & lines ──────────────────────────────────────────────── */
    --surface-1:       rgba(30, 30, 30, 0.80);   /* elevated card */
    --surface-2:       rgba(42, 42, 42, 0.40);   /* content card */
    --surface-3:       rgba(255, 255, 255, 0.04);/* inset panel */
    --border-subtle:   rgba(255, 255, 255, 0.10);
    --border-green:    rgba(0, 255, 135, 0.30);
    --border-pink:     rgba(233, 0, 82, 0.30);
    --border-gold:     rgba(255, 215, 0, 0.35);

    /* ── Radii ─────────────────────────────────────────────────────────── */
    --radius-sm:       10px;
    --radius-md:       15px;
    --radius-lg:       20px;
    --radius-xl:       28px;
    --radius-pill:     50px;

    /* ── Elevation ─────────────────────────────────────────────────────── */
    --shadow-card:     0 20px 40px rgba(0, 0, 0, 0.30);
    --shadow-lift:     0 12px 28px rgba(0, 0, 0, 0.35);
    --glow-green:      0 0 30px rgba(0, 255, 135, 0.18);
    --glow-pink:       0 0 30px rgba(233, 0, 82, 0.18);
    --glow-gold:       0 6px 26px rgba(255, 165, 0, 0.42);

    /* ── Spacing ───────────────────────────────────────────────────────── */
    --space-1:         4px;
    --space-2:         8px;
    --space-3:         16px;
    --space-4:         24px;
    --space-5:         40px;
    --space-6:         64px;
    --space-7:         96px;

    /* ── Motion ────────────────────────────────────────────────────────── */
    --ease-out:        cubic-bezier(0.16, 1, 0.30, 1);
    --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast:        0.18s;
    --dur-base:        0.32s;
    --dur-slow:        0.60s;
}