globals.css

@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
@import "@fontsource/space-mono/latin-400.css";
@import "@fontsource/space-mono/latin-700.css";

/*
 * Self-hosted fonts, subset to Latin (#930).
 *
 * The packages' default stylesheets declare every script subset (latin-ext,
 * cyrillic, vietnamese, ...), and the bundler emits a woff2 for each. The UI
 * ships English-only, so only the Latin face of each family is declared here,
 * with the same `unicode-range` fontsource uses, so a glyph outside the range
 * falls back to the system stack instead of pulling a second file. Space Mono
 * above is already imported from its Latin-only stylesheets. The Geist face is preloaded
 * from the root route's <head>.
 */
@font-face {
    font-family: 'Geist Variable';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url(../../node_modules/@fontsource-variable/geist/files/geist-latin-wght-normal.woff2) format('woff2-variations');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: 'Geist Mono Variable';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url(../../node_modules/@fontsource-variable/geist-mono/files/geist-mono-latin-wght-normal.woff2) format('woff2-variations');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
    font-family: 'Archivo Variable';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url(../../node_modules/@fontsource-variable/archivo/files/archivo-latin-wght-normal.woff2) format('woff2-variations');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@custom-variant dark (&:is(.dark *));
@source "../../../apps/**/*.{ts,tsx}";
@source "../../../components/**/*.{ts,tsx}";
@source "../**/*.{ts,tsx}";

@theme inline {
    --font-heading: var(--font-sans);
    --color-sidebar-ring: var(--sidebar-ring);
    --color-sidebar-border: var(--sidebar-border);
    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
    --color-sidebar-accent: var(--sidebar-accent);
    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
    --color-sidebar-primary: var(--sidebar-primary);
    --color-sidebar-foreground: var(--sidebar-foreground);
    --color-sidebar: var(--sidebar);
    --color-chart-5: var(--chart-5);
    --color-chart-4: var(--chart-4);
    --color-chart-3: var(--chart-3);
    --color-chart-2: var(--chart-2);
    --color-chart-1: var(--chart-1);
    --color-ring: var(--ring);
    --color-input: var(--input);
    --color-border: var(--border);
    --color-destructive: var(--destructive);
    --color-destructive-foreground: var(--destructive-foreground);
    --color-success: var(--success);
    --color-success-foreground: var(--success-foreground);
    --color-warning: var(--warning);
    --color-warning-foreground: var(--warning-foreground);
    --color-info: var(--info);
    --color-info-foreground: var(--info-foreground);
    --color-neutral: var(--neutral);
    --color-danger: var(--danger);
    --color-long: var(--long);
    --color-short: var(--short);
    --color-accent-foreground: var(--accent-foreground);
    --color-accent: var(--accent);
    --color-muted-foreground: var(--muted-foreground);
    --color-muted: var(--muted);
    --color-secondary-foreground: var(--secondary-foreground);
    --color-secondary: var(--secondary);
    --color-primary-foreground: var(--primary-foreground);
    --color-primary: var(--primary);
    --color-popover-foreground: var(--popover-foreground);
    --color-popover: var(--popover);
    --color-card-foreground: var(--card-foreground);
    --color-card: var(--card);
    --color-foreground: var(--foreground);
    --color-background: var(--background);
    --color-surface-canvas: var(--surface-canvas);
    --color-surface-sunken: var(--surface-sunken);
    --color-surface-raised: var(--surface-raised);
    --color-surface-overlay: var(--surface-overlay);
    --color-surface-interactive: var(--surface-interactive);
    --color-text-primary: var(--text-primary);
    --color-text-secondary: var(--text-secondary);
    --color-text-tertiary: var(--text-tertiary);
    --color-text-disabled: var(--text-disabled);
    --color-text-inverse: var(--text-inverse);
    --color-text-link: var(--text-link);
    --color-long-subtle: var(--long-subtle);
    --color-long-border: var(--long-border);
    --color-short-subtle: var(--short-subtle);
    --color-short-border: var(--short-border);
    --color-liquidation: var(--liquidation);
    --color-liquidation-foreground: var(--liquidation-foreground);
    --color-liquidation-subtle: var(--liquidation-subtle);
    --color-liquidation-border: var(--liquidation-border);
    --color-success-subtle: var(--success-subtle);
    --color-success-border: var(--success-border);
    --color-warning-subtle: var(--warning-subtle);
    --color-warning-border: var(--warning-border);
    --color-info-subtle: var(--info-subtle);
    --color-info-border: var(--info-border);
    --color-danger-subtle: var(--danger-subtle);
    --color-danger-border: var(--danger-border);
    --color-neutral-subtle: var(--neutral-subtle);
    --color-neutral-border: var(--neutral-border);
    
    /*
     * Shape and radius scale (DS-008).
     *
     * Defines a restrained, consistent border-radius system for UI elements.
     * The scale provides five named sizes plus 'full' for pills and circular elements.
     * 
     * Component-to-radius mapping:
     * - sm (0.25rem / 4px):   Small controls (buttons, inputs, badges, tabs)
     * - md (0.375rem / 6px):  Medium controls (dropdowns, selects, chips)
     * - lg (0.5rem / 8px):    Cards, panels, modals, popovers
     * - xl (0.75rem / 12px):  Large cards, feature panels, section containers
     * - full (9999px):        Pills, avatar badges, status indicators (fully rounded)
     *
     * Usage: rounded-sm, rounded-md, rounded-lg, rounded-xl, rounded-full.
     * Bare `rounded` is not part of the scale (it resolves to the same 4px as
     * `rounded-sm`); always name the step.
     */
    --radius-sm: 0.25rem;   /* 4px  - buttons, inputs, badges, tabs */
    --radius-md: 0.375rem;  /* 6px  - dropdowns, selects, chips */
    --radius-lg: 0.5rem;    /* 8px  - cards, panels, modals */
    --radius-xl: 0.75rem;   /* 12px - large cards, feature sections */
    --radius-full: 9999px;  /* Fully rounded - pills, avatars, indicators */

    /*
     * Elevation scale (#921).
     *
     * Five named steps, declared explicitly (values match Tailwind's
     * defaults, so adopting the scale changes no pixels) so elevation is a
     * documented token rather than an implicit framework default.
     * Always pair a step with the layer it belongs to:
     * - xs: resting controls (switch/checkbox/radio track, active tab)
     * - sm: raised-in-place controls (switch thumb, selected segment)
     * - md: tooltips, small popovers, dropdown panels
     * - lg: toasts, sheets, floating panels over content
     * - xl: modals and full dialogs
     * Usage: shadow-xs, shadow-sm, shadow-md, shadow-lg, shadow-xl. Bare
     * `shadow` and arbitrary `shadow-[...]` values are not part of the scale.
     */
    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    
    --font-sans: 'Geist Variable', sans-serif;
    --font-mono: 'Geist Mono Variable', ui-monospace, monospace;

    /*
     * Micro-typography scale (DS-050).
     *
     * The default Tailwind scale (xs=12px, sm=14px, base=16px, lg=18px) has
     * no steps for the dense, data-table-heavy UI in this app (order books,
     * position tables, referral stats), which had accumulated 250+ ad hoc
     * `text-[Npx]` arbitrary values across the codebase instead. These are
     * the exact values that usage actually converged on, promoted to named
     * tokens so they're an intentional, documented scale instead of
     * per-callsite magic numbers. Named by pixel value (at the default
     * 16px root) rather than a semantic step name (2xs/3xs/...) since a
     * dozen-plus half-pixel steps don't fit a small semantic vocabulary
     * without the names becoming arbitrary themselves.
     */
    --text-8: 0.5rem;         /* 8px  — small badge / dense metadata */
    --text-9-5: 0.59375rem;   /* 9.5px */
    --text-10: 0.625rem;      /* 10px */
    --text-10-5: 0.65625rem;  /* 10.5px */
    --text-11: 0.6875rem;     /* 11px */
    --text-11-5: 0.71875rem;  /* 11.5px */
    --text-12-5: 0.78125rem;  /* 12.5px */
    --text-13: 0.8125rem;     /* 13px */
    --text-13-5: 0.84375rem;  /* 13.5px */
    --text-14-5: 0.90625rem;  /* 14.5px */
    --text-15: 0.9375rem;     /* 15px */
    --text-17: 1.0625rem;     /* 17px */
    --text-22: 1.375rem;      /* 22px */
    --text-26: 1.625rem;      /* 26px */
    --text-40: 2.5rem;        /* 40px */

    /*
     * Landing-scoped additions (GF3-002) — sizes the GMX spec calls for
     * that the app-wide scale above didn't need yet (nav links, stat
     * numbers, section sub-heads, footer text). Namespaced by literal
     * pixel value like their siblings above, not semantic names, for the
     * same reason: these are a documented scale, not per-callsite magic
     * numbers, but they don't map to an existing semantic role.
     */
    --text-12: 0.75rem;       /* 12px — eyebrow/footer text */
    --text-14: 0.875rem;      /* 14px — nav links, body copy */
    --text-16: 1rem;          /* 16px — base body */
    --text-18: 1.125rem;      /* 18px — light-band body */
    --text-24: 1.5rem;        /* 24px — pool card name, card titles */
    --text-28: 1.75rem;       /* 28px — section sub-heads (sm) */
    --text-30: 1.875rem;      /* 30px — stat numbers */

    /*
     * Spacing scale — micro through section spacing.
     *
     * Intent-named tokens that reduce one-off arbitrary spacing values
     * across the UI. Numeric tokens follow the pixel value at the
     * default 16px root. Semantic tokens encode density intent.
     */
    --spacing-0-5: 0.125rem;   /* 2px  — micro gap */
    --spacing-4-5: 1.125rem;   /* 18px — tight */
    --spacing-7: 1.75rem;      /* 28px */
    --spacing-9: 2.25rem;      /* 36px */
    --spacing-14: 3.5rem;      /* 56px — section */
    --spacing-18: 4.5rem;      /* 72px — section */
    --spacing-20: 5rem;        /* 80px — section */

    /* Control height density tokens — compact / default / comfortable */
    --height-compact: 1.25rem;       /* 20px  — h-5 equivalent */
    --height-default: 1.75rem;       /* 28px  — h-7 equivalent */
    --height-comfortable: 2.5rem;    /* 40px  — h-10 equivalent */

    /* Trading density/state roles (OB-006). */
    --trading-panel-padding: 0.75rem;
    --trading-row-height: 1.75rem;
    --trading-divider: var(--border);
    --trading-depth-buy: var(--long-subtle);
    --trading-depth-sell: var(--short-subtle);

    /*
     * Page gutters — responsive horizontal padding at layout edges.
     *
     * Usage:
     *   px-[var(--gutter-page-sm)]
     *   md:px-[var(--gutter-page-md)]
     *   lg:px-[var(--gutter-page-lg)]
     */
    --gutter-page-sm: 1rem;          /* 16px — mobile */
    --gutter-page-md: 1.5rem;        /* 24px — tablet */
    --gutter-page-lg: 2rem;          /* 32px — desktop */

    /*
     * Motion duration tokens (OB-011 motion design system).
     *
     * Duration scale from restrained (feedback) to expressive (landing).
     * Prefer shorter durations for trading UI; use longer for landing motion.
     */
    --duration-fast: 100ms;          /* Feedback: selection, status changes */
    --duration-base: 150ms;          /* Standard: transitions, overlays */
    --duration-moderate: 200ms;      /* Emphasis: section reveals, expansions */
    --duration-slow: 300ms;          /* Landing: hero motion, marquees */
    --duration-slowest: 400ms;       /* Landing: extended sequences */
    --duration-pulse: 1500ms;        /* Loading pulse (motion spec: 1.5s loop) */

    /*
     * Motion easing tokens — consistent timing functions across the UI.
     *
     * - in-out: default for most interactions (symmetrical acceleration/deceleration)
     * - out: entry animations (quick to final position)
     * - in: exit animations (slowing into rest)
     * - bounce: playful emphasis for non-critical feedback
     */
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /*
     * Spring presets via CSS linear() easing curves (OB-011 motion design system).
     *
     * - spring-snappy: high-frequency UI interactions, micro-feedback, toggles, tab switches,
     *   and button presses where quick physical response is needed without distracting oscillation.
     * - spring-smooth: modals, dialogs, dropdowns, drawer sheets, and navigation reveals that
     *   require natural, fluid deceleration with gentle settling.
     * - spring-bouncy: attention-drawing micro-interactions, badge updates, toasts, celebratory
     *   feedback, and drag-to-dismiss gestures with a slight playful overshoot.
     */
    --ease-spring-snappy: linear(
        0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%,
        0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 60.7%,
        1.001 76.9%, 1
    );
    --ease-spring-smooth: linear(
        0, 0.005, 0.021 2.2%, 0.082 5.1%, 0.294 12.3%, 0.548 19.9%, 0.738 27.6%,
        0.869 35.5%, 0.948 43.7%, 0.985 52.2%, 1.001 61.2%, 1.006 71.1%, 1
    );
    --ease-spring-bouncy: linear(
        0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%,
        0.995 41.2%, 1.05 46.7%, 1.071 51.5%, 1.074 56.6%, 1.057 62.4%, 1.016 71.1%,
        0.993 79.7%, 0.996 88.5%, 1
    );
}

/* Shared keyboard focus treatment (OB-021). Keep the outline present for
 * keyboard users and animate only the paint-layer affordance so focus never
 * changes layout or moves the active control. */
:where(button, a, [role="button"]) {
  position: relative;
}

:where(button, a, input, textarea, select, [role="button"], [tabindex]):focus-visible {
  outline: 0.125rem solid var(--ring);
  outline-offset: 0.125rem;
}

:where(button, a, [role="button"]):after {
  position: absolute;
  inset: -0.25rem;
  border: 0.125rem solid color-mix(in oklch, var(--ring) 50%, transparent);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  content: "";
  transform: scale(0.96);
  transition:
    opacity var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

:where(button, a, [role="button"]):focus-visible:after {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  :where(button, a, [role="button"]):after {
    transition: none;
  }
}

/*
 * GMX reference palette and landing theme (GF3).
 *
 * Source material for the GrantFox 3 theme revamp — a faithful translation of
 * GMX's landing theme (gmx-io/gmx-interface @ e27759a, `landing/`) into Tailwind
 * v4 tokens. Namespaced `gmx-*` so it can never collide with semantic tokens;
 * the `.dark` theme and the landing page consume these, they are not consumed
 * directly by app components. Full reference, rationale, and the GMX→SO4 mapping
 * table: docs/gf_3/001_theme_update.md.
 *
 * Fonts: GMX uses the paid TTHoves family, which cannot be redistributed. The
 * approved OFL stand-in is Archivo (400/500); Space Mono is the same font GMX
 * uses for code. See 001_theme_update.md §1.1 for the licensed-TTHoves upgrade
 * path (drop files in apps/web/public/fonts/tthoves/, prepend "TTHoves" to
 * --font-landing-sans).
 *
 * Declared `@theme static` so the full palette is always emitted on `:root` —
 * the default `@theme` prunes unused variables, and this set is reference
 * material consumed by `var(--color-gmx-*)` in raw CSS as well as utilities.
 */
@theme static {
    --color-gmx-slate-950: oklch(0.1545 0.0191 283.94);  /* #0B0B14 */
    --color-gmx-slate-900: oklch(0.1493 0.0216 278.91);  /* #090A14 — page bg */
    --color-gmx-slate-800: oklch(0.2157 0.0294 280.68);  /* #171827 — cards */
    --color-gmx-slate-700: oklch(0.2510 0.0360 278.84);  /* #1E2033 */
    --color-gmx-slate-650: oklch(0.2817 0.0443 277.70);  /* #24273F */
    --color-gmx-slate-600: oklch(0.68 0.052 278.34);  /* WCAG AA compliant text & borders (contrast >= 4.5:1) */
    --color-gmx-slate-500: oklch(0.7242 0.0478 281.04);  /* #A0A3C4 — muted text */
    --color-gmx-slate-400: oklch(0.8145 0.0364 282.07);  /* #BEC0DA — secondary text */
    --color-gmx-light-150: oklch(0.9705 0.0054 274.97);  /* #F4F5F9 — light band */
    --color-gmx-blue-100: oklch(0.8136 0.0838 261.37);   /* #A4C3F9 */
    --color-gmx-blue-300: oklch(0.6651 0.1789 275.83);   /* #7885ff — hover accent */
    --color-gmx-blue-400: oklch(0.5099 0.2688 268.08);   /* #2D42FC — brand/CTA */
    --color-gmx-stroke-primary: oklch(0.3591 0.0539 277.68);  /* #363A59 */
    --color-gmx-surface-primary: oklch(0.1959 0.0264 276.95); /* #121421 */

    /* Inline hexes used by specific landing sections (001_theme_update.md §3) */
    --color-gmx-sponsors-border: oklch(0.8933 0.0194 276.32); /* #D8DBE9 — SponsorsSection top border */
    --color-gmx-card-shadow: oklch(0 0 0);                    /* #000 — ProgramCards drop shadow */

    --font-landing-sans: "Archivo Variable", "Geist Variable", sans-serif;
    --font-landing-code: "Space Mono", "Geist Mono Variable", monospace;

    /* GMX line-heights — headings tighter than 1.0 is the signature look */
    --leading-heading-lg: 0.98;
    --leading-heading-md: 1.08;
    --leading-body-sm: 1.36;
    --leading-body-md: 1.44;

    /* Tweet/testimonial marquee (SocialSection) */
    --animate-scroll: scroll 60s linear infinite;
    @keyframes scroll {
        0% { transform: translateX(0%); }
        100% { transform: translateX(-50%); }
    }

    /*
     * Landing-scoped radius scale. SO4's app-wide --radius is 0 (sharp
     * corners) by design (see DESIGN.md) — GMX's landing look explicitly
     * needs a rounded scale, so these are namespaced (rounded-8/12/20)
     * rather than touching the app's --radius-sm/md/lg/xl tokens.
     */
    --radius-8: 0.5rem;   /* 8px  — buttons, inputs, launch buttons */
    --radius-12: 0.75rem; /* 12px — sponsor logo cards */
    --radius-20: 1.25rem; /* 20px — feature/pool/program cards */

    /* Skeleton loading sheen (transform-only) */
    --animate-skeleton-sweep: skeleton-sweep 1.5s ease-in-out infinite;
    @keyframes skeleton-sweep {
        from { transform: translateX(-100%); }
        to { transform: translateX(100%); }
    }

    /* Hero title word-rotation (AnimatedTitle) */
    --animate-title-in: title-in 0.25s ease-in-out forwards;
    --animate-title-out: title-out 0.25s ease-in-out forwards;
    @keyframes title-in {
        0% { transform: translateY(98%); opacity: 0; }
        100% { transform: translateY(0%); opacity: 1; }
    }
    @keyframes title-out {
        0% { transform: translateY(0%); opacity: 1; }
        100% { transform: translateY(-98%); opacity: 0; }
    }
}

/*
 * GMX landing typography and button components (GF3).
 *
 * Verbatim translations of GMX's `fontComponentsPlugin` classes to 16px-root
 * rems (GMX runs a 10px root; SO4 does not — see 001_theme_update.md §2).
 * Landing-scoped: use on the landing route, not in app components, which keep
 * the DS-060 text-* roles above.
 */
@utility text-heading-1 {
    font-size: 3.125rem;           /* 50px */
    font-weight: 500;
    line-height: var(--leading-heading-lg);
    letter-spacing: -2.6px;
    @media (min-width: 640px) {
        font-size: 6.25rem;        /* 100px */
        letter-spacing: -5.2px;
    }
}
@utility text-heading-2 {
    font-size: 2.5rem;             /* 40px */
    font-weight: 500;
    line-height: var(--leading-heading-lg);
    letter-spacing: -2.08px;
    @media (min-width: 640px) {
        font-size: 5rem;           /* 80px */
        letter-spacing: -4.16px;
    }
}
@utility text-heading-3 {
    font-size: 2rem;               /* 32px */
    font-weight: 500;
    line-height: var(--leading-heading-md);
    letter-spacing: -0.96px;
}
@utility text-heading-4 {
    font-size: 1.5rem;             /* 24px */
    font-weight: 500;
    line-height: var(--leading-heading-md);
    letter-spacing: -0.96px;
}
@utility text-subheadline {
    font-size: 0.875rem;           /* 14px */
    font-weight: 500;
    line-height: var(--leading-body-sm);
    letter-spacing: 0.028px;
    color: var(--color-gmx-slate-400);
}
@utility text-description {
    font-size: 1rem;               /* 16px */
    font-weight: 400;
    line-height: var(--leading-body-sm);
    letter-spacing: 0.028px;
    color: var(--color-gmx-slate-400);
}
@utility btn-landing {
    background-color: var(--color-gmx-blue-400);
    color: #fff;
    font-weight: 500;
    transition-property: color, background-color, border-color;
    transition-duration: 180ms;
    @media (hover: hover) {
        &:hover {
            background: linear-gradient(0deg, rgba(9, 10, 21, 0.1) 0%, rgba(9, 10, 21, 0.1) 100%),
                var(--color-gmx-blue-400);
        }
        &:active {
            background: linear-gradient(0deg, rgba(9, 10, 21, 0.2) 0%, rgba(9, 10, 21, 0.2) 100%),
                var(--color-gmx-blue-400);
        }
    }
}
/* GMX's 0.5px hairline separators (border-1/2 in their v3 config) */
@utility border-hairline {
    border-width: 0.5px;
}
/* Marquee helpers (GMX customUtilsPlugin) */
@utility animate-pause {
    animation-play-state: paused;
}
@utility scrollbar-hide {
    scrollbar-width: none;
    -ms-overflow-style: none;
    &::-webkit-scrollbar {
        display: none;
    }
}
/* Motion transition utilities (OB-011). Named transitions for consistent state feedback. */
@utility transition-opacity {
    transition-property: opacity;
    transition-duration: var(--duration-base);
    transition-timing-function: var(--ease-in-out);
}
@utility transition-transform {
    transition-property: transform;
    transition-duration: var(--duration-base);
    transition-timing-function: var(--ease-in-out);
}
@utility transition-all-subtle {
    transition-property: color, background-color, border-color, opacity;
    transition-duration: var(--duration-base);
    transition-timing-function: var(--ease-in-out);
}
/*
 * Motion duration utilities. Tailwind v4 has no theme namespace for
 * transition durations, so `--duration-*` tokens alone never produced
 * `duration-base` etc.; components using them got the browser default (0s).
 */
@utility duration-fast {
    transition-duration: var(--duration-fast);
    --tw-duration: var(--duration-fast);
}
@utility duration-base {
    transition-duration: var(--duration-base);
    --tw-duration: var(--duration-base);
}
@utility duration-moderate {
    transition-duration: var(--duration-moderate);
    --tw-duration: var(--duration-moderate);
}
@utility duration-slow {
    transition-duration: var(--duration-slow);
    --tw-duration: var(--duration-slow);
}
@utility duration-slowest {
    transition-duration: var(--duration-slowest);
    --tw-duration: var(--duration-slowest);
}
/* Tabular monospace figures for prices and brand wordmarks. */
@utility font-mono-num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}
/* Minimum 44px hit area on touch devices without changing desktop layout. */
@utility touch-target {
    @media (pointer: coarse) {
        min-width: 44px;
        min-height: 44px;
    }
}
/* Single-side hairlines. `border-hairline` sets all four widths, so combining
   it with border-t/border-b drew a full box instead of a rule. */
@utility border-t-hairline {
    border-top-width: 0.5px;
}
@utility border-b-hairline {
    border-bottom-width: 0.5px;
}
/* Safe-area padding for full-bleed mobile sheets (notch / home indicator). */
@utility safe-top {
    padding-top: max(var(--spacing) * 4, env(safe-area-inset-top));
}
@utility safe-bottom {
    padding-bottom: max(var(--spacing) * 4, env(safe-area-inset-bottom));
}
@utility safe-left {
    padding-left: max(var(--spacing) * 4, env(safe-area-inset-left));
}
@utility safe-right {
    padding-right: max(var(--spacing) * 4, env(safe-area-inset-right));
}
@utility ease-spring-snappy {
    transition-timing-function: var(--ease-spring-snappy);
}
@utility ease-spring-smooth {
    transition-timing-function: var(--ease-spring-smooth);
}
@utility ease-spring-bouncy {
    transition-timing-function: var(--ease-spring-bouncy);
}

/*
 * Route transitions via View Transitions API (OB-011 motion design system).
 *
 * Smooth crossfade between routes with prefers-reduced-motion fallback.
 */
@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: var(--duration-base) var(--ease-out) both fade-out;
}

::view-transition-new(root) {
    animation: var(--duration-base) var(--ease-out) both fade-in;
}

@keyframes fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}

@media (forced-colors: active) {
  .so4-copy-feedback {
    background: Canvas;
    border-color: CanvasText;
    box-shadow: none;
    color: CanvasText;
  }
}
:root {
    --background: oklch(1 0 0);
    --foreground: oklch(0.145 0 0);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.145 0 0);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.145 0 0);
    --primary: oklch(0.52 0.19 286);
    --primary-foreground: oklch(0.985 0.01 286);
    --secondary: oklch(0.967 0.001 286.375);
    --secondary-foreground: oklch(0.21 0.006 285.885);
    --muted: oklch(0.97 0 0);
    --muted-foreground: oklch(0.556 0 0);
    --accent: oklch(0.97 0 0);
    --accent-foreground: oklch(0.205 0 0);
    --destructive: oklch(0.577 0.245 27.325);
    --destructive-foreground: oklch(0.985 0 0);
    --border: oklch(0.922 0 0);
    --input: oklch(0.922 0 0);
    --ring: oklch(0.62 0.18 286);
    --chart-1: var(--long);
    --chart-2: var(--short);
    --chart-3: var(--liquidation);
    --chart-4: var(--info);
    --chart-5: var(--neutral);

    /* Semantic status roles — shared by badges, alerts, numeric text and the
       trading chart so a "long" candle is the same green as a positive PnL. */
    --success: oklch(0.52 0.13 163.225);
    --success-foreground: oklch(0.985 0 0);
    --warning: oklch(0.55 0.14 70);
    --warning-foreground: oklch(0.985 0 0);
    --info: oklch(0.546 0.245 262.881);
    --info-foreground: oklch(0.985 0 0);
    --neutral: oklch(0.556 0 0);
    --danger: var(--destructive);
    --long: var(--success);
    --short: var(--destructive);

    --long-foreground: var(--success-foreground);
    --long-subtle: oklch(0.96 0.03 163.225);
    --long-border: oklch(0.85 0.08 163.225);
    --short-foreground: var(--destructive-foreground);
    --short-subtle: oklch(0.96 0.03 27.325);
    --short-border: oklch(0.86 0.08 27.325);
    --liquidation: oklch(0.55 0.15 55);
    --liquidation-foreground: oklch(0.985 0 0);
    --liquidation-subtle: oklch(0.96 0.04 75.834);
    --liquidation-border: oklch(0.86 0.09 75.834);
    --success-subtle: oklch(0.96 0.03 163.225);
    --success-border: oklch(0.85 0.08 163.225);
    --warning-subtle: oklch(0.96 0.04 75.834);
    --warning-border: oklch(0.86 0.09 75.834);
    --info-subtle: oklch(0.96 0.03 262.881);
    --info-border: oklch(0.86 0.07 262.881);
    --danger-subtle: oklch(0.96 0.03 27.325);
    --danger-border: oklch(0.86 0.08 27.325);
    --neutral-subtle: oklch(0.97 0 0);
    --neutral-border: oklch(0.87 0 0);

    /* Surface and text roles. Light values mirror the .dark set below so
       `bg-surface-*` / `text-text-*` utilities resolve in both themes. */
    --surface-canvas: var(--background);
    --surface-sunken: oklch(0.97 0 0);
    --surface-raised: oklch(1 0 0);
    --surface-overlay: oklch(1 0 0);
    --surface-interactive: oklch(0.955 0 0);

    --text-primary: var(--foreground);
    --text-secondary: oklch(0.45 0 0);
    --text-tertiary: oklch(0.556 0 0);
    --text-disabled: oklch(0.708 0 0);
    --text-inverse: oklch(1 0 0);
    --text-link: oklch(0.5 0.2 262);

    --chart-surface: var(--background);
    --chart-text: var(--muted-foreground);
    --chart-grid: oklch(0.922 0 0);
    --chart-crosshair: oklch(0.708 0 0);
    --chart-crosshair-label: oklch(0.97 0 0);
    --chart-border: oklch(0.922 0 0);
    --chart-up: var(--long);
    --chart-down: var(--short);
    --chart-liquidation: var(--warning);

    --sidebar: oklch(0.205 0 0);
    --sidebar-foreground: oklch(0.985 0 0);
    --sidebar-primary: oklch(0.685 0.169 237.323);
    --sidebar-primary-foreground: oklch(0.293 0.066 243.157);
    --sidebar-accent: oklch(0.269 0 0);
    --sidebar-accent-foreground: oklch(0.985 0 0);
    --sidebar-border: oklch(1 0 0 / 10%);
    --sidebar-ring: oklch(0.556 0 0);
}

/*
 * Dark theme (GF3-001) — GMX-derived.
 *
 * Re-introduces `.dark` (previously absent, so dark mode fell back to the
 * light values above). Surfaces, text roles, border, primary/ring, and accent
 * are sourced straight from the GMX reference palette per the mapping table
 * in docs/gf_3/001_theme_update.md §8.2 — trading-state colors
 * (long/short/liquidation/success/warning/danger/neutral) are intentionally
 * NOT GMX concepts. The :root values are darkened for contrast on white, so
 * the bright success/warning/liquidation values are restored here, and the
 * `subtle`/`border` fill pairs are re-lightened so a badge still reads as a
 * distinct tint against the slate-800/900 surfaces.
 */
.dark {
    --background: var(--color-gmx-slate-900);
    --foreground: oklch(1 0 0);
    --card: var(--color-gmx-slate-800);
    --card-foreground: oklch(1 0 0);
    --popover: var(--color-gmx-slate-800);
    --popover-foreground: oklch(1 0 0);
    --primary: oklch(0.72 0.18 190);
    --primary-foreground: oklch(1 0 0);
    --secondary: var(--color-gmx-slate-700);
    --secondary-foreground: oklch(1 0 0);
    --muted: var(--color-gmx-slate-700);
    --muted-foreground: var(--color-gmx-slate-400);
    --accent: var(--color-gmx-blue-300);
    --accent-foreground: oklch(1 0 0);
    --destructive-foreground: oklch(1 0 0);
    --border: var(--color-gmx-stroke-primary);
    --input: var(--color-gmx-stroke-primary);
    --ring: oklch(0.72 0.18 190);

    /* The light-theme status colours are darkened to reach 4.5:1 on white.
       Restore the brighter values on dark surfaces, and re-declare every
       alias so it resolves against them (var() is resolved where declared). */
    --success: oklch(0.596 0.145 163.225);
    --warning: oklch(0.681 0.162 75.834);
    --warning-foreground: oklch(0.21 0 0);
    --liquidation: oklch(0.82 0.16 65);
    --liquidation-foreground: oklch(0.21 0 0);
    --long: var(--success);
    --chart-1: var(--long);
    --chart-3: var(--liquidation);
    --chart-up: var(--long);
    --chart-liquidation: var(--warning);

    --surface-canvas: var(--color-gmx-slate-900);
    --surface-sunken: var(--color-gmx-slate-950);
    --surface-raised: var(--color-gmx-slate-800);
    --surface-overlay: var(--color-gmx-slate-800);
    --surface-interactive: var(--color-gmx-slate-650);

    --text-primary: oklch(1 0 0);
    --text-secondary: var(--color-gmx-slate-400);
    --text-tertiary: var(--color-gmx-slate-500);
    --text-disabled: oklch(0.5 0.03 281);
    --text-inverse: oklch(1 0 0);
    --text-link: oklch(0.78 0.15 190);

    --info: var(--color-gmx-blue-400);
    --sidebar-primary: var(--color-gmx-blue-400);

    --sidebar: var(--color-gmx-slate-800);
    --sidebar-foreground: oklch(1 0 0);
    --sidebar-primary-foreground: oklch(1 0 0);
    --sidebar-accent: var(--color-gmx-slate-650);
    --sidebar-accent-foreground: oklch(1 0 0);
    --sidebar-border: var(--color-gmx-stroke-primary);
    --sidebar-ring: var(--color-gmx-blue-400);

    --chart-surface: var(--color-gmx-slate-800);
    --chart-text: var(--color-gmx-slate-400);
    --chart-grid: var(--color-gmx-stroke-primary);
    --chart-crosshair: var(--color-gmx-slate-500);
    --chart-crosshair-label: var(--color-gmx-slate-700);
    --chart-border: var(--color-gmx-stroke-primary);

    /* Trading-state subtle/border — rebalanced, see file comment above */
    --long-subtle: oklch(0.26 0.07 163.225);
    --long-border: oklch(0.42 0.12 163.225);
    --short-subtle: oklch(0.26 0.07 27.325);
    --short-border: oklch(0.42 0.12 27.325);
    --liquidation-subtle: oklch(0.26 0.07 75.834);
    --liquidation-border: oklch(0.42 0.12 75.834);
    --success-subtle: oklch(0.26 0.07 163.225);
    --success-border: oklch(0.42 0.12 163.225);
    --warning-subtle: oklch(0.26 0.07 75.834);
    --warning-border: oklch(0.42 0.12 75.834);
    --info-subtle: oklch(0.26 0.09 268.08);
    --info-border: oklch(0.42 0.16 268.08);
    --danger-subtle: oklch(0.26 0.07 27.325);
    --danger-border: oklch(0.42 0.12 27.325);
    --neutral-subtle: oklch(0.28 0 0);
    --neutral-border: oklch(0.40 0 0);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
    }
  body {
    @apply bg-background text-foreground;
    }
  button:not(:disabled), [role="button"]:not(:disabled) {
    cursor: pointer;
    }
}

@layer base {
  :root, .density-default {
    --density-height-control: var(--height-default);
    --density-gap: var(--spacing-4-5);
    --density-padding-cell: 0.75rem;
  }
  .density-compact {
    --density-height-control: var(--height-compact);
    --density-gap: var(--spacing-0-5);
    --density-padding-cell: 0.25rem;
  }
  .density-comfortable {
    --density-height-control: var(--height-comfortable);
    --density-gap: var(--spacing-7);
    --density-padding-cell: 1rem;
  }
  
  @media (pointer: coarse) {
    /* Ensure minimum accessible touch target size (44px) on coarse pointer devices */
    .density-compact, .density-default, .density-comfortable, :root {
       --density-height-control: 2.75rem; 
    }
  }
}

/*
 * Typography role utilities (DS-060).
 *
 * Semantic roles that bundle size, line height, weight, and tracking into
 * a single class — replaces ad-hoc combinations of text-*/font-*/leading-*
 * that previously accumulated across the codebase.
 *
 * Numeric roles additionally enable tabular figures and slashed zero via
 * font-variant-numeric, ensuring decimal-aligned columns and unambiguous
 * zeros in data tables and trading interfaces.
 */
@utility text-display {
  font-size: var(--text-40);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
}
@utility text-display-sm {
  font-size: var(--text-26);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.01em;
}
@utility text-page-title {
  font-size: var(--text-22);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
}
@utility text-section-title {
  font-size: var(--text-17);
  line-height: 1.3;
  font-weight: 500;
}
@utility text-subtitle {
  font-size: var(--text-15);
  line-height: 1.4;
  font-weight: 500;
}
@utility text-body {
  font-size: var(--text-13-5);
  line-height: 1.5;
  font-weight: 400;
}
@utility text-body-sm {
  font-size: var(--text-13);
  line-height: 1.4;
  font-weight: 400;
}
@utility text-label {
  font-size: var(--text-12-5);
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0.02em;
}
@utility text-label-sm {
  font-size: var(--text-11);
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0.04em;
}
@utility text-caption {
  font-size: var(--text-11);
  line-height: 1.4;
  font-weight: 400;
}
@utility text-numeric-lg {
  font-family: var(--font-mono);
  font-size: var(--text-22);
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums slashed-zero;
}
@utility text-numeric {
  font-family: var(--font-mono);
  font-size: var(--text-15);
  line-height: 1.3;
  font-weight: 400;
  font-variant-numeric: tabular-nums slashed-zero;
}
@utility text-numeric-sm {
  font-family: var(--font-mono);
  font-size: var(--text-12-5);
  line-height: 1.3;
  font-weight: 500;
  font-variant-numeric: tabular-nums slashed-zero;
}

/*
 * Themed scrollbars for ScrollArea (DS-079)
 *
 * Colors only — width, momentum, and overlay-vs-classic behaviour stay with the
 * platform, so a user who has asked for permanently visible scrollbars keeps
 * them. `scrollbar-color` covers Firefox and Chromium 121+; the ::-webkit rules
 * cover older Chromium and Safari.
 */
@utility scroll-area-scrollbars {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;

  &::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
  }

  &::-webkit-scrollbar-track {
    background-color: var(--surface-sunken);
  }

  &::-webkit-scrollbar-thumb {
    background-color: var(--border);
    border-radius: var(--radius-full);
  }

  &::-webkit-scrollbar-thumb:hover {
    background-color: var(--text-tertiary);
  }

  &::-webkit-scrollbar-corner {
    background-color: transparent;
  }
}

/*
 * Windows forced-colors mode support (DS-067)
 *
 * When Windows High Contrast Mode is active, CSS gradients, translucent
 * borders, and custom colors are replaced with system colors. These overrides
 * ensure core primitives remain operable and distinguishable.
 *
 * System color keywords:
 * - ButtonText, ButtonFace, GrayText, Highlight, HighlightText
 * - LinkText, CanvasText, Canvas, Field, FieldText
 * - Mark, MarkText
 *
 * Reference: https://drafts.csswg.org/css-color-adjust-1/#forced
 */
@media (forced-colors: active) {
  /* Base text and backgrounds */
  * {
    background-color: Canvas !important;
    color: CanvasText !important;
    border-color: CanvasText !important;
  }

  /* Buttons */
  button,
  [role="button"],
  [data-slot="button"] {
    background-color: ButtonFace !important;
    color: ButtonText !important;
    border: 1px solid ButtonText !important;
  }

  button:hover,
  [role="button"]:hover,
  button:focus-visible,
  [role="button"]:focus-visible {
    forced-color-adjust: none;
    background-color: Highlight !important;
    color: HighlightText !important;
    outline: 2px solid Highlight !important;
    outline-offset: 2px;
  }

  button:disabled,
  [role="button"]:disabled,
  button[aria-disabled="true"],
  [role="button"][aria-disabled="true"] {
    color: GrayText !important;
    border-color: GrayText !important;
  }

  /* Links */
  a {
    color: LinkText !important;
    text-decoration: underline;
  }

  a:hover,
  a:focus-visible {
    forced-color-adjust: none;
    background-color: Highlight !important;
    color: HighlightText !important;
    outline: 2px solid Highlight !important;
  }

  /* Form controls */
  input,
  textarea,
  select,
  [data-slot="input"],
  [data-slot="textarea"],
  [data-slot="select"] {
    background-color: Field !important;
    color: FieldText !important;
    border: 1px solid FieldText !important;
  }

  input:focus,
  textarea:focus,
  select:focus {
    forced-color-adjust: none;
    outline: 2px solid Highlight !important;
    outline-offset: 0;
  }

  input:disabled,
  textarea:disabled,
  select:disabled {
    color: GrayText !important;
    border-color: GrayText !important;
  }

  input[aria-invalid="true"],
  textarea[aria-invalid="true"],
  [data-slot="input"][aria-invalid="true"] {
    border: 2px solid CanvasText !important;
    outline: 1px solid CanvasText !important;
    outline-offset: -3px;
  }

  /* Checkboxes and radios */
  input[type="checkbox"],
  input[type="radio"],
  [role="checkbox"],
  [role="radio"] {
    forced-color-adjust: none;
    appearance: auto;
    background-color: Field !important;
    border: 1px solid FieldText !important;
  }

  input[type="checkbox"]:checked,
  input[type="radio"]:checked,
  [role="checkbox"][aria-checked="true"],
  [role="radio"][aria-checked="true"] {
    forced-color-adjust: none;
    background-color: Highlight !important;
    border-color: Highlight !important;
  }

  /* Selected and highlighted states */
  [aria-selected="true"],
  [data-selected="true"],
  [aria-current]:not([aria-current="false"]) {
    forced-color-adjust: none;
    background-color: Highlight !important;
    color: HighlightText !important;
    border-color: Highlight !important;
  }

  /* Tabs */
  [role="tab"][aria-selected="true"] {
    forced-color-adjust: none;
    background-color: Canvas !important;
    color: CanvasText !important;
    border-bottom: 3px solid CanvasText !important;
  }

  /* Dialogs and overlays */
  [role="dialog"],
  [role="alertdialog"],
  [data-slot="dialog"],
  [data-slot="sheet"] {
    background-color: Canvas !important;
    border: 2px solid CanvasText !important;
  }

  /* Alerts */
  [role="alert"],
  [role="status"],
  [data-slot="alert"] {
    border: 2px solid CanvasText !important;
  }

  /* Menus */
  [role="menu"],
  [role="menubar"],
  [role="listbox"] {
    background-color: Canvas !important;
    border: 1px solid CanvasText !important;
  }

  [role="menuitem"],
  [role="option"] {
    color: CanvasText !important;
  }

  [role="menuitem"]:hover,
  [role="menuitem"]:focus,
  [role="option"]:hover,
  [role="option"]:focus,
  [role="menuitem"][data-highlighted],
  [role="option"][data-highlighted] {
    forced-color-adjust: none;
    background-color: Highlight !important;
    color: HighlightText !important;
  }

  /* Focus indicators - always visible */
  *:focus-visible {
    forced-color-adjust: none;
    outline: 2px solid Highlight !important;
    outline-offset: 2px;
  }

  :where(button, a, [role="button"]):focus-visible:after {
    border-color: Highlight;
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Icons and SVGs */
  svg {
    forced-color-adjust: auto;
    fill: currentColor;
    stroke: currentColor;
  }

  /* Ensure separators are visible */
  hr,
  [role="separator"] {
    border-color: CanvasText !important;
    background-color: CanvasText !important;
  }

  /* Remove background images and gradients */
  * {
    background-image: none !important;
  }

  /* Ensure tooltips are visible */
  [role="tooltip"] {
    forced-color-adjust: none;
    background-color: Canvas !important;
    color: CanvasText !important;
    border: 1px solid CanvasText !important;
  }

  /*
   * Scroll areas (DS-079). The blanket `* { background-color: Canvas }` above
   * would otherwise flatten the scrollbar into its track, and the gradient edge
   * affordances are dropped in forced colors — so the scrollbar itself has to
   * carry the "there is more content" signal.
   */
  [data-slot="scroll-area-viewport"] {
    forced-color-adjust: none;
    scrollbar-color: CanvasText Canvas !important;
  }

  [data-slot="scroll-area-viewport"]::-webkit-scrollbar-track {
    background-color: Canvas !important;
    border: 1px solid CanvasText !important;
  }

  [data-slot="scroll-area-viewport"]::-webkit-scrollbar-thumb {
    background-color: CanvasText !important;
  }

  /* Canvas charts cannot inherit system colors. Keep the semantic table
   * fallback available and expose depth bars with a visible border plus the
   * textual side label supplied by the component. */
  .so4-depth-chart-canvas {
    display: none !important;
  }

  .so4-depth-data-table {
    display: block !important;
  }

  [data-forced-colors-fallback] {
    border-top: 1px solid CanvasText !important;
  }
}


/* Motion review #880–883: shared timing tokens, compositor-friendly surfaces. */
@keyframes so4-confirm-check {
    from { opacity: 0; transform: scale(0.65); }
    to { opacity: 1; transform: scale(1); }
}
.so4-confirm-check {
    animation: so4-confirm-check var(--duration-moderate) var(--ease-out) both;
}
.so4-confirm-moment {
    animation: so4-confirm-check var(--duration-slow) var(--ease-out) both;
}
[data-slot="tooltip-content"] {
    transition: opacity var(--duration-base) var(--ease-out),
                transform var(--duration-base) var(--ease-out);
}
[data-slot="tooltip-content"][data-starting-style],
[data-slot="tooltip-content"][data-ending-style] {
    opacity: 0;
    transform: translateY(3px);
}

/* Reversible overlays: transitions retarget from their current compositor state. */
.so4-dialog-overlay,
.so4-sheet-overlay {
    opacity: 1;
    transition: opacity var(--duration-base) var(--ease-out);
}
.so4-dialog-content {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    transition: opacity var(--duration-moderate) var(--ease-out), transform var(--duration-moderate) var(--ease-out);
}
.so4-dialog-overlay[data-starting-style],
.so4-dialog-overlay[data-ending-style],
.so4-sheet-overlay[data-starting-style],
.so4-sheet-overlay[data-ending-style] { opacity: 0; }
.so4-dialog-content[data-starting-style],
.so4-dialog-content[data-ending-style] {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.96);
}
.so4-sheet-content {
    opacity: 1;
    transition: opacity var(--duration-moderate) var(--ease-out), transform var(--duration-moderate) var(--ease-out);
}
.so4-sheet-content[data-side="top"] { transform: translateY(0); }
.so4-sheet-content[data-side="right"] { transform: translateX(0); }
.so4-sheet-content[data-side="bottom"] { transform: translateY(0); }
.so4-sheet-content[data-side="left"] { transform: translateX(0); }
.so4-sheet-content[data-starting-style][data-side="top"],
.so4-sheet-content[data-ending-style][data-side="top"] { opacity: 0; transform: translateY(-100%); }
.so4-sheet-content[data-starting-style][data-side="right"],
.so4-sheet-content[data-ending-style][data-side="right"] { opacity: 0; transform: translateX(100%); }
.so4-sheet-content[data-starting-style][data-side="bottom"],
.so4-sheet-content[data-ending-style][data-side="bottom"] { opacity: 0; transform: translateY(100%); }
.so4-sheet-content[data-starting-style][data-side="left"],
.so4-sheet-content[data-ending-style][data-side="left"] { opacity: 0; transform: translateX(-100%); }
.so4-popover-content {
    opacity: 1;
    transform: scale(1);
    transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.so4-popover-content[data-starting-style],
.so4-popover-content[data-ending-style] { opacity: 0; transform: scale(.95); }
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }
@keyframes so4-tick-flash-up {
    from {
        opacity: 0.35;
    }
    to {
        opacity: 0;
    }
}

@keyframes so4-tick-flash-down {
    from {
        opacity: 0.35;
    }
    to {
        opacity: 0;
    }
}

.so4-flash-up-overlay {
    background-color: var(--color-long);
    animation: so4-tick-flash-up var(--duration-slow) var(--ease-out) forwards;
    pointer-events: none;
    will-change: opacity;
}

.so4-flash-down-overlay {
    background-color: var(--color-short);
    animation: so4-tick-flash-down var(--duration-slow) var(--ease-out) forwards;
    pointer-events: none;
    will-change: opacity;
}

@media (prefers-reduced-motion: reduce) {
    .so4-confirm-check, .so4-confirm-moment { animation: none; }
    [data-slot="tooltip-content"] { transition: none; }
    .so4-flash-up-overlay, .so4-flash-down-overlay { animation: none !important; opacity: 0 !important; }
}
:root[data-reduced-motion="true"] .so4-confirm-check,
:root[data-reduced-motion="true"] .so4-confirm-moment { animation: none; }
:root[data-reduced-motion="true"] [data-slot="tooltip-content"] { transition: none; }
@media (prefers-reduced-motion: reduce) {
    .so4-dialog-overlay, .so4-sheet-overlay, .so4-dialog-content, .so4-sheet-content, .so4-popover-content {
        transition: opacity var(--duration-fast) var(--ease-out);
    }
    .so4-dialog-content, .so4-sheet-content, .so4-popover-content { transform: none; }
}
:root[data-reduced-motion="true"] .so4-dialog-overlay,
:root[data-reduced-motion="true"] .so4-sheet-overlay,
:root[data-reduced-motion="true"] .so4-dialog-content,
:root[data-reduced-motion="true"] .so4-sheet-content,
:root[data-reduced-motion="true"] .so4-popover-content {
    transition: none;
    transform: none;
}
/* The explicit preference is global so independently-authored UI cannot miss it. */
:root[data-reduced-motion="true"] *,
:root[data-reduced-motion="true"] *::before,
:root[data-reduced-motion="true"] *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
    [data-slot="skeleton"]::before { animation: none; display: none; }
}
:root[data-reduced-motion="true"] [data-slot="skeleton"]::before { animation: none; display: none; }

/*
 * Phase 9 UX motion (#884–#887).
 *
 * Every rule below is token-driven, compositor-friendly (transform/opacity),
 * and has an instant fallback for the system preference or the in-app toggle.
 */

/* #884 — scroll-aware header. */
.so4-scroll-header {
    transition: transform var(--duration-moderate) var(--ease-out);
    will-change: transform;
}
.so4-scroll-header[data-hidden="true"] {
    transform: translateY(-100%);
}
/* Hairline + shadow fade in as one composited layer. */
.so4-scroll-header::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 1px;
    background: var(--border);
    box-shadow: 0 8px 24px -20px rgb(0 0 0 / 0.55);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-base) var(--ease-out);
}
.so4-scroll-header[data-scrolled="true"]::after {
    opacity: 1;
}
/* Only the landing header is fixed over the hero, so its height can shrink
   without moving any document content (no CLS). */
.so4-scroll-header--compact .so4-scroll-header__inner {
    transition: height var(--duration-moderate) var(--ease-out);
}
.so4-scroll-header--compact[data-scrolled="true"] .so4-scroll-header__inner {
    height: 3.5rem;
}

/* #885 — scroll-driven section reveals, with the IntersectionObserver path
   applied by ViewportReveal only when view timelines are unavailable. */
@keyframes so4-view-reveal-in {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.so4-view-reveal {
    opacity: 0;
    transform: translateY(14px);
}
.so4-view-reveal[data-reveal-mode="css"] {
    animation: so4-view-reveal-in linear both;
    animation-timeline: view();
    animation-range: entry 10% entry 90%;
}
.so4-view-reveal[data-reveal-mode="fallback"] {
    transition:
        opacity var(--duration-moderate) var(--ease-out),
        transform var(--duration-moderate) var(--ease-out);
}
.so4-view-reveal[data-reveal-mode="fallback"][data-revealed="true"],
.so4-view-reveal[data-reveal-mode="reduced"] {
    opacity: 1;
    transform: translateY(0);
    animation: none;
    transition: none;
}

/* #886 — tabular figures keep every in-flight count on the same grid. */
.so4-count-up {
    font-variant-numeric: tabular-nums slashed-zero;
}

/* #887 — wallet connect choreography. */
@keyframes so4-wallet-row-in {
    from {
        opacity: 0;
        transform: translateY(6px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
.so4-wallet-row {
    animation: so4-wallet-row-in var(--duration-moderate) var(--ease-out) both;
    animation-delay: calc(var(--wallet-stagger, 0) * var(--duration-fast) * 0.35);
}
@keyframes so4-wallet-pulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.55;
        transform: scale(1.16);
    }
}
.so4-wallet-pulse {
    animation: so4-wallet-pulse var(--duration-pulse) var(--ease-in-out) infinite;
}
@keyframes so4-wallet-pill-in {
    from {
        opacity: 0;
        transform: translateY(2px) scale(0.94);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
.so4-wallet-pill {
    animation: so4-wallet-pill-in var(--duration-moderate) var(--ease-out) both;
    transform-origin: inline-start center;
}

@media (prefers-reduced-motion: reduce) {
    .so4-scroll-header,
    .so4-scroll-header::after,
    .so4-scroll-header--compact .so4-scroll-header__inner {
        transition: none;
    }
    .so4-view-reveal {
        opacity: 1;
        transform: none;
        animation: none;
        transition: none;
    }
    .so4-wallet-row,
    .so4-wallet-pulse,
    .so4-wallet-pill {
        animation: none;
        transform: none;
    }
}
:root[data-reduced-motion="true"] .so4-scroll-header,
:root[data-reduced-motion="true"] .so4-scroll-header::after,
:root[data-reduced-motion="true"]
    .so4-scroll-header--compact
    .so4-scroll-header__inner {
    transition: none;
}
:root[data-reduced-motion="true"] .so4-view-reveal {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
}
:root[data-reduced-motion="true"] .so4-wallet-row,
:root[data-reduced-motion="true"] .so4-wallet-pulse,
:root[data-reduced-motion="true"] .so4-wallet-pill {
    animation: none;
    transform: none;
}

/* Market book density follows the root user preference without requiring
   consumers or isolated tests to mount a React context provider. */
.density-compact .so4-density-orderbook [role="row"] { min-height: 18px; }
.density-comfortable .so4-density-orderbook [role="row"] { min-height: 28px; }
.density-compact .so4-density-orderbook [role="cell"] { padding-block: 0; }
.density-comfortable .so4-density-orderbook [role="cell"] { padding-block: 0.25rem; }