@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/Poppins-Regular.ttf") format("truetype");
}
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/Poppins-Medium.ttf") format("truetype");
}
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/Poppins-SemiBold.ttf") format("truetype");
}
@font-face {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/Poppins-Bold.ttf") format("truetype");
}

/* Playfair Display — display-title typeface (all h1/h2/h3). */
@font-face {
    font-family: "Playfair Display";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/PlayfairDisplay-Regular.ttf") format("truetype");
}
@font-face {
    font-family: "Playfair Display";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/PlayfairDisplay-Medium.ttf") format("truetype");
}
@font-face {
    font-family: "Playfair Display";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/fonts/PlayfairDisplay-SemiBold.ttf") format("truetype");
}
@font-face {
    font-family: "Playfair Display";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/PlayfairDisplay-Bold.ttf") format("truetype");
}
@font-face {
    font-family: "Playfair Display";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/PlayfairDisplay-Italic.ttf") format("truetype");
}
@font-face {
    font-family: "Playfair Display";
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/PlayfairDisplay-MediumItalic.ttf") format("truetype");
}

:is([data-theme="exchange-site"], [data-theme="exchange-property"]) {
    --exc-navy-900: #14205e;
    --exc-navy-800: #214dd8; /* brand → text & buttons */
    --exc-navy-700: #26399a;
    --exc-navy-600: #2f45b0;
    --exc-navy-500: #3a55c6;

    --exc-blue-800: #1e4e8c;
    --exc-blue-700: #2c68b0;
    --exc-blue-600: #3f82c9;
    --exc-blue-500: #609ddf;
    --exc-blue-400: #84b4e8;
    --exc-blue-300: #a9ccf0;
    --exc-blue-100: #e2edfa;
    --exc-blue-50: #f1f6fc;

    --exc-gold-700: #a9781f;
    --exc-gold-600: #c7902b;
    --exc-gold-500: #e3a82f;
    --exc-gold-100: #fbf0d6;
    --exc-gold-50: #fdf8ec;

    --exc-ink-900: #0e1726;
    --exc-ink-700: #2b3648;
    --exc-gray-600: #5b6577;
    --exc-gray-500: #7a8499;
    --exc-gray-400: #a7afbf;
    --exc-gray-300: #cbd2de;
    --exc-gray-200: #e2e7ef;
    --exc-gray-100: #eff2f7;
    --exc-gray-50: #f7f9fc;
    --exc-white: #ffffff;

    --exc-up-600: #0c8c58;
    --exc-up-500: #11a86b;
    --exc-up-100: #dbf3e8;
    --exc-down-600: #c53a30;
    --exc-down-500: #e0473d;
    --exc-down-100: #fbe3e1;

    --color-bg: var(--exc-gray-50);
    --color-surface: var(--exc-white);
    --color-surface-2: var(--exc-gray-100);
    --color-surface-inverse: var(--exc-navy-800);

    --color-text: var(--exc-ink-900);
    --color-text-muted: var(--exc-gray-600);
    --color-text-subtle: var(--exc-gray-500);
    --color-text-inverse: var(--exc-white);

    --color-border: var(--exc-gray-200);
    --color-border-strong: var(--exc-gray-300);
    --color-border-inverse: rgba(255, 255, 255, 0.16);

    --color-brand: var(--exc-ink-900); /* titles, subtitles, icons, numbers → black */
    --color-brand-strong: var(--exc-navy-900);
    --color-accent: var(--exc-blue-700);
    --color-accent-hover: var(--exc-blue-800);
    --color-accent-press: #163b6b;
    --color-accent-tint: var(--exc-blue-100);
    --color-brand-blue: var(--exc-blue-500);

    --color-gold: var(--exc-gold-500);
    --color-gold-tint: var(--exc-gold-100);

    --color-up: var(--exc-up-500);
    --color-up-tint: var(--exc-up-100);
    --color-down: var(--exc-down-500);
    --color-down-tint: var(--exc-down-100);

    --color-focus: var(--exc-blue-600);
    --color-focus-ring: rgba(63, 130, 201, 0.38);

    /* Homepage reference palette */
    --site-cream: #faede5; /* warm hero / section ground */
    --site-cream-2: #f3e2d6; /* deeper cream — disclaimer strip */
    --site-orange: #fea86b; /* vibrant action accent */
    --site-orange-600: #ed7f3c; /* deeper orange — legible text on light */
    --site-orange-card: #f7ac77; /* hero pinwheel tile */
    --site-orange-tint: rgba(254, 168, 107, 0.16); /* featured trust card */
    --site-sky: #4ea9e8; /* bright collage blue */
    --site-sky-soft: #eaf4fc; /* markets card */
    /* dark charcoal panel ground — video frame, sign-up card, footer */
    --site-charcoal-grad: linear-gradient(135deg, #0a0a0c 0%, #2b2e33 60%, #4a4f57 100%);

    /* Typography — Poppins for UI/body/data, Playfair Display for titles */
    --font-display: "Poppins", system-ui, sans-serif;
    --font-body: "Poppins", system-ui, -apple-system, sans-serif;
    --font-data: "Poppins", ui-monospace, "SF Mono", monospace;
    --font-title: "Playfair Display", Georgia, serif;

    /* Spacing / layout */
    --container-max: 1280px;
    --container-wide: 1440px;

    /* Radius — geometric, sharp-leaning */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;
    --radius-xl: 14px;
    --radius-2xl: 20px;
    --radius-pill: 999px;

    /* Elevation — cool-tinted, restrained */
    --shadow-xs: 0 1px 2px rgba(16, 38, 76, 0.06);
    --shadow-sm: 0 1px 3px rgba(16, 38, 76, 0.08), 0 1px 2px rgba(16, 38, 76, 0.04);
    --shadow-md: 0 4px 12px rgba(16, 38, 76, 0.08), 0 2px 4px rgba(16, 38, 76, 0.05);
    --shadow-lg: 0 12px 28px rgba(16, 38, 76, 0.12), 0 4px 8px rgba(16, 38, 76, 0.06);
    --shadow-xl: 0 24px 56px rgba(11, 27, 56, 0.18);
    --ring-focus: 0 0 0 3px var(--color-focus-ring);

    /* Motion — crisp, never bouncy */
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --duration-instant: 80ms;
    --duration-fast: 140ms;
    --duration-base: 200ms;
    --duration-slow: 320ms;

    /* Element defaults for the site root (the body belongs to the app
       shell, so the base.css body rules apply here instead). */
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.45;
    color: var(--color-text);
    background: var(--site-cream);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
}

/* Element defaults sit inside :where() so they carry zero specificity
   and any single component class can override them. */

:where(:is([data-theme="exchange-site"], [data-theme="exchange-property"])) :where(h1, h2, h3, h4) {
    font-family: var(--font-title);
    font-weight: 500;
    line-height: 1.18;
    letter-spacing: 0.01em;
    color: var(--color-text);
    margin: 0;
}

:where(:is([data-theme="exchange-site"], [data-theme="exchange-property"])) :where(a) {
    color: var(--color-accent);
    text-decoration: none;
}
:where(:is([data-theme="exchange-site"], [data-theme="exchange-property"])) :where(a:hover) {
    color: var(--color-accent-hover);
}

:is([data-theme="exchange-site"], [data-theme="exchange-property"]) ::selection {
    background: var(--color-accent-tint);
    color: var(--color-brand);
}

:where(:is([data-theme="exchange-site"], [data-theme="exchange-property"])) :where(:focus-visible) {
    outline: none;
    box-shadow: var(--ring-focus);
    border-radius: var(--radius-sm);
}

/* Eyebrow / overline helper */
:is([data-theme="exchange-site"], [data-theme="exchange-property"]) .exc-eyebrow {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-subtle);
}

/* Tabular numbers wherever data lives */
:is([data-theme="exchange-site"], [data-theme="exchange-property"]) .exc-num {
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

/* Italic serif accent word inside display titles ("Gateway", "One", …) */
:is([data-theme="exchange-site"], [data-theme="exchange-property"]) .exc-title-accent {
    font-style: italic;
    font-weight: 400;
    font-size: 1.12em;
    letter-spacing: 0.005em;
    padding: 0 0.04em;
}

/* ---- Scroll reveal contract (toggled by exchange-reveal.js — must
        stay global: stylance would hash the class names). ---- */
:is([data-theme="exchange-site"], [data-theme="exchange-property"]) .exc-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity 760ms cubic-bezier(0.16, 1, 0.3, 1),
        transform 760ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
:is([data-theme="exchange-site"], [data-theme="exchange-property"]) .exc-reveal.is-in {
    opacity: 1;
    transform: none;
}
:is([data-theme="exchange-site"], [data-theme="exchange-property"]) .exc-delay-1 {
    transition-delay: 110ms;
}
:is([data-theme="exchange-site"], [data-theme="exchange-property"]) .exc-delay-2 {
    transition-delay: 220ms;
}
:is([data-theme="exchange-site"], [data-theme="exchange-property"]) .exc-delay-3 {
    transition-delay: 330ms;
}
:is([data-theme="exchange-site"], [data-theme="exchange-property"]) .exc-delay-4 {
    transition-delay: 440ms;
}

/* Child items that reveal (with their own .exc-delay-N) when their
   .exc-reveal ancestor scrolls in — one IntersectionObserver entry
   drives a whole cascade. */
:is([data-theme="exchange-site"], [data-theme="exchange-property"]) .exc-reveal .exc-reveal-item {
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity 540ms cubic-bezier(0.16, 1, 0.3, 1),
        transform 540ms cubic-bezier(0.16, 1, 0.3, 1);
}
:is([data-theme="exchange-site"], [data-theme="exchange-property"]) .exc-reveal.is-in .exc-reveal-item {
    opacity: 1;
    transform: none;
}

/* Timeline node circles that pop and switch to the accent fill when
   their .exc-reveal ancestor scrolls in. */
:is([data-theme="exchange-site"], [data-theme="exchange-property"]) .exc-reveal .exc-node {
    transform: scale(0.7);
}
:is([data-theme="exchange-site"], [data-theme="exchange-property"]) .exc-reveal.is-in .exc-node {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
    transform: scale(1);
}

/* Descendant keyframe animations gated on the ancestor reveal: the
   element's own class declares the animation, .exc-anim keeps it
   paused until .is-in lands. */
:is([data-theme="exchange-site"], [data-theme="exchange-property"]) .exc-reveal .exc-anim {
    animation-play-state: paused;
}
:is([data-theme="exchange-site"], [data-theme="exchange-property"]) .exc-reveal.is-in .exc-anim {
    animation-play-state: running;
}

/* ---- Keyframes (global by nature; exc- prefix avoids xl-*/px-* clashes) ---- */
@keyframes exc-ticker {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}
@keyframes exc-kb {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.09);
    }
}
@keyframes exc-spin {
    to {
        transform: rotate(360deg);
    }
}
@keyframes exc-float {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-7px);
    }
}
@keyframes exc-twinkle {
    0%,
    100% {
        opacity: 0.45;
        transform: scale(0.88);
    }
    50% {
        opacity: 1;
        transform: scale(1.12);
    }
}
@keyframes exc-chart-draw {
    to {
        stroke-dashoffset: 0;
    }
}
@keyframes exc-dot {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.7);
        opacity: 0.35;
    }
}
@keyframes exc-halo {
    0% {
        opacity: 0;
        transform: scale(0.66);
    }
    30% {
        opacity: 0.55;
    }
    100% {
        opacity: 0;
        transform: scale(1.42);
    }
}
@keyframes exc-grow {
    from {
        transform: scaleY(0);
    }
    to {
        transform: scaleY(1);
    }
}
@keyframes exc-grow-x {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}
@keyframes exc-donut {
    from {
        stroke-dashoffset: 389.6;
    }
    to {
        stroke-dashoffset: 257;
    }
}
@keyframes exc-pulse {
    0% {
        transform: scale(0.6);
        opacity: 0.55;
    }
    100% {
        transform: scale(2.4);
        opacity: 0;
    }
}
@keyframes exc-block-in {
    from {
        opacity: 0;
        transform: translateY(22px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@keyframes exc-fade-up {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@keyframes exc-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ---- Reduced motion: show everything, animate nothing ---- */
@media (prefers-reduced-motion: reduce) {
    :is([data-theme="exchange-site"], [data-theme="exchange-property"]) .exc-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    :is([data-theme="exchange-site"], [data-theme="exchange-property"]) * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}