/* ==========================================================================
   STON.fi Cross-chain — Design Tokens
   Lifted from docs/design-system.md (canonical source).
   Reusable across every page; never override these values inline.
   ========================================================================== */

/* Registered so it can be animated through @keyframes — the page-loader
   uses this. Unitless 0..100 number; consumers do their own `* 1%` for
   widths and percentages. Also used by .progress__fill on static bars
   to drive width AND background-size from the same value, which is
   what anchors --grad-progress to the full track width regardless of
   how filled the bar is. */
@property --progress-fill {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
}

:root {
    /* ----- Cosmic neutrals --------------------------------------------- */
    --color-bg:        rgb(17, 17, 19);   /* page */
    --color-bg-1:      rgb(15, 15, 17);   /* footer */
    --color-bg-2:      rgb(21, 21, 23);   /* card */
    --color-bg-3:      rgb(27, 27, 31);   /* raised */

    --color-fg:        rgb(255, 255, 255);
    --color-fg-2:      rgba(255, 255, 255, 0.70);
    --color-fg-3:      rgba(255, 255, 255, 0.50);
    --color-fg-4:      rgba(255, 255, 255, 0.30);

    --color-stroke:    rgba(255, 255, 255, 0.10);
    --color-stroke-2:  rgba(255, 255, 255, 0.20);

    /* ----- Brand blues ------------------------------------------------- */
    --color-cyan:         rgb(64, 209, 253);
    --color-cyan-soft:    rgba(64, 209, 253, 0.92);
    --color-cyan-glow:    rgb(158, 223, 255);
    --color-blue:         rgb(1, 128, 255);
    --color-blue-bright:  rgb(36, 141, 255);
    --color-blue-mid:     rgb(67, 141, 246);
    --color-blue-soft:    rgb(166, 193, 224);
    --color-blue-haze:    rgba(80, 167, 255, 0.50);

    /* ----- Warm neutral ------------------------------------------------
       The palette was all-cool by default; this token gives gradients a
       real cool→warm hue swing rather than a same-family fade. Same
       colour as the desaturated mid-stop of --grad-progress (designer's
       own "neutral-warm" anchor), so the eyebrow gradient endpoint and
       the progress-bar mid-stop read as one design vocabulary. */
    --color-warm-haze:    rgb(186, 186, 170);

    /* ----- Deep-space tints (radial gradient stops) --------------------
       Shifted away from the purple-leaning #202849 toward the more blue
       #1c2937 in 2.9.0 so cards read as "deep blue" rather than "deep
       indigo" — see docs/design-system.md §2. surface-tint-2 followed
       the same hue shift to keep the family consistent. */
    --color-surface-tint:    rgb(28, 41, 55);
    --color-surface-tint-2:  rgb(28, 46, 71);

    /* ----- Semantic ---------------------------------------------------- */
    --color-success:       rgb(4, 218, 141);
    --color-success-deep:  rgb(18, 104, 73);
    /* Alert red — paired with --color-success for binary good/bad signals
       (e.g. the profile-hub status dot). Saturation/value tuned to sit at
       the same perceptual weight as --color-success on the dark palette
       so a red→green flip reads as a state change, not a brightness change.
       NOT used for destructive-action affordances (those still use the
       --color-cyan attention treatment); strictly a status-indicator hue. */
    --color-danger:        rgb(232, 76, 76);
    --color-danger-deep:   rgb(120, 38, 38);

    /* ----- Signature gradients ----------------------------------------- */
    --grad-cta:
        linear-gradient(rgba(64, 209, 253, 0.92) 0%, rgb(36, 141, 255) 60%);
    --grad-card-glow:
        radial-gradient(rgb(28, 41, 55) 0%, rgb(21, 21, 23) 50%);
    --grad-card-glow-inv:
        radial-gradient(rgb(21, 21, 23) 50%, rgb(28, 41, 55) 100%);
    --grad-hero-veil:
        linear-gradient(rgba(2, 2, 2, 0.40), rgba(2, 2, 2, 0.40));

    /* Progress-bar fill — 5-stop journey from blue (just-boarded) to
       orange (almost-full). Always anchored to the *full* track width
       by the consumer (see .progress__fill / .page-loader__fill), so
       the colour at the leading edge reflects how full the bar is, not
       just the gradient direction. */
    --grad-progress:
        linear-gradient(90deg,
            rgb(36, 141, 255)  0%,
            rgb(64, 209, 253) 25%,
            rgb(186, 186, 170) 50%,
            rgb(205, 205, 52) 75%,
            rgb(208, 98,  51) 100%);

    /* Eyebrow text gradient — softer cousin of --grad-progress, using
       the first three stops of the same blue→orange journey
       (#248dff → #40d1fd → #babaaa). The saturated blue start is what
       gives the slashes real darkness/saturation to "fall away from"
       — a 2-stop cyan→warm-haze gradient at 11px reads as monochrome
       because cyan and warm-haze sit at near-identical luminance.
       First-level section eyebrows only; card-internal sub-eyebrows
       stay solid cyan-slash + grey-text. */
    --grad-eyebrow:
        linear-gradient(90deg,
            rgb(36, 141, 255)   0%,
            rgb(64, 209, 253)  50%,
            rgb(186, 186, 170) 100%);

    /* ----- Type families ----------------------------------------------- */
    --font-display: "Manrope", "Inter", system-ui, sans-serif;
    --font-body:    "Inter", system-ui, sans-serif;
    --font-mono:    "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace;

    /* ----- Spacing (8-pt + mono increments 10/15) ---------------------- */
    --sp-1:   4px;
    --sp-2:   8px;
    --sp-3:  10px;
    --sp-4:  15px;
    --sp-5:  20px;
    --sp-6:  30px;
    --sp-7:  40px;
    --sp-8:  60px;
    --sp-9:  80px;
    --sp-10: 120px;

    /* ----- Radii ------------------------------------------------------- */
    --radius-sharp: 2px;     /* default — buttons, cards, inputs, nav */
    --radius-lg:    12px;    /* rare — grouped containers */
    --radius-pill:  999px;   /* chips, social capsules only */

    /* ----- Borders ----------------------------------------------------- */
    --hairline:    1px solid rgba(255, 255, 255, 0.10);
    --hairline-2:  1px solid rgba(255, 255, 255, 0.20);

    /* ----- Shadows / glows --------------------------------------------- */
    --shadow-glow-cyan: 0 0  5px 0 rgb(185, 220, 255);
    --shadow-glow-blue: 0 0 24px 0 rgba(80, 167, 255, 0.50);
    --shadow-elev-1:    0 4px 24px 0 rgba(0, 0, 0, 0.35);

    /* ----- Blur -------------------------------------------------------- */
    --blur-glass: 50px;   /* nav, chips */
    --blur-deep:  100px;  /* big cards over busy bg */

    /* ----- Layout ------------------------------------------------------ */
    --page-max:  1130px;  /* inner content rail */
    --header-h:  64px;
    --header-offset: 16px; /* sticky nav top offset */

    /* ----- Scroll landing -------------------------------------------------
       Vertical distance between the viewport top and a deep-linked target
       after the page has scrolled to it (used by scrollToTarget() in
       main.js for both same-page #anchor clicks and on-load #hash
       landings — see bindSmoothScroll() and bindHashLanding()).

       This is a HAND-TUNED constant on purpose: deriving it dynamically
       from the live sticky-header + sticky-tabs heights produced races
       (the tabs measure as not-yet-stuck at scrollY=0, so deep-link
       landings would consistently land too high). Two values — one for
       wide viewports, one for the mobile breakpoint at <=959px (matches
       the layout.css header breakpoint) so both can be tuned independently.
       Tweak these and reload; no JS changes needed. Desktop is 180px
       (header + two-row tab dock); <=959px is 140px (header sits flush
       and the dock is still two rows). */
    --scroll-landing-offset: 180px;

    /* ----- Deep-link pulse-highlight ------------------------------------
       Applied by maybePulseTaskTile() in main.js when the user lands on
       a task tile via a deep-link (today: the profile-hub manifest rows
       on any page → /#task-<slug> on /). The visual is a cyan heartbeat
       on the tile itself — see .task--pulse in campaign.css for the
       animation body.

       These are HAND-TUNED constants (like --scroll-landing-offset above)
       so the timing can be tweaked without touching JS:

         • --task-pulse-delay      — wait after the class is added before
                                     the animation begins. Non-zero so the
                                     smooth scroll has time to settle;
                                     otherwise the first blink plays while
                                     the tile is still travelling into the
                                     viewport and is easy to miss.
         • --task-pulse-cycle      — duration of a single pulse (fade in
                                     → hold → fade out).
         • --task-pulse-iterations — how many pulses fire in a row before
                                     the tile returns to rest. Reads as a
                                     heartbeat rather than a single blink.

       Total attention span = delay + cycle × iterations. The setTimeout
       in maybePulseTaskTile() removes the class after this window (see
       --task-pulse-total-ms below); keep that value >= the sum above. */
    --task-pulse-delay:      450ms;
    --task-pulse-cycle:      950ms;
    --task-pulse-iterations: 3;
    --task-pulse-total-ms:   3300;  /* consumed by main.js as a raw ms number */

    /* ----- Motion ------------------------------------------------------ */
    --ease:        cubic-bezier(0.22, 1, 0.36, 1);
    --dur-state:   120ms;
    --dur-hover:   240ms;
    --dur-panel:   480ms;
    --dur-cosmic:  900ms;
}

/* Mobile override for the scroll-landing offset. Same breakpoint as the
   layout-level mobile switch in layout.css (max-width: 959px). */
@media (max-width: 959px) {
    :root {
        --scroll-landing-offset: 140px;
    }
}