/* Tokens needed outside the themed subtrees too (the chrome'd <main>'s
   gutter background) — :root so they inherit everywhere. */
:root {
    --exc-gray-50: #f7f9fc;
}

: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-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);

    /* Market accents — property vs media distinction across the configurator
       and listing cards. */
    --exc-property: var(--exc-blue-700);
    --exc-property-tint: rgba(44, 104, 176, 0.12);
    /* Burgundy — the media-burgundy theme's --accent, so media reads the
       same here as on the /media marketplace. */
    --exc-media: #8e1f43;
    --exc-media-tint: rgba(142, 31, 67, 0.12);
    --exc-violet: #7c3aed;
    --exc-violet-tint: rgba(124, 58, 237, 0.1);
    --exc-indigo-gradient: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%);
    /* The home page's card blue (`--home-blue` → `--home-blue-deep` there). */
    --exc-blue-gradient: linear-gradient(155deg, #4d64f6 0%, #3a50e0 100%);

    /* Homepage reference palette */
    --site-cream: #ece0d9; /* warm hero / section ground */
    --site-cream-2: #dbd0ca; /* warm cream — risk-disclosure strip + hero bull mark */
    --site-cream-partners: #ece0d9; /* partners marquee strip */
    --site-orange: #ed6841; /* vibrant action accent */
    --site-orange-600: #ed6841; /* deeper orange — legible text on light */
    --site-orange-card: #ed6841; /* hero pinwheel tile */
    --site-orange-tint: rgba(237, 104, 65, 0.16); /* featured trust card */
    --site-purple-600: #4d64f6; /* rail highlights — the prototype's accent */
    --site-purple-tint: rgba(77, 100, 246, 0.16); /* rail active-row fill */
    --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%
    );

    /* 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(--sans);
    font-size: 15px;
    line-height: 1.45;
    color: var(--color-text);
    background: #ffffff;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
}

[data-theme="exchange-property"] {
    background: var(--color-bg);
}

/* 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(--sans);
    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(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-subtle);
}

/* Accent variant of the eyebrow — brand colour instead of the subtle grey. */
:is([data-theme="exchange-site"], [data-theme="exchange-property"])
    .exc-eyebrow-accent {
    color: var(--site-orange);
}

/* Tabular numbers wherever data lives */
:is([data-theme="exchange-site"], [data-theme="exchange-property"]) .exc-num {
    font-family: var(--sans);
    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;
    }
}

/* Top gutter reserves height for the fixed bar. Routes that open on a full-bleed
   hero opt out, so the bar floats over the artwork instead of sitting on a strip
   of page background. The prefix matches cover the lists and their detail
   pages (/properties/:pk, /media/:pk) alike. */
.exc-chrome
    ~ main:not(
        [data-route="/"],
        [data-route="/for-issuers"],
        [data-route^="/properties"],
        [data-route^="/media"],
        [data-route="/faq"]
    ) {
    padding-top: 90px;
}

/* The rail is `position: fixed`, so the page reserves its resting width rather
   than letting it sit on top of the content. Pinning docks it open at 250px and
   the gutter follows; below 800px the rail is an off-canvas drawer and takes no
   space at all. Transition matches the rail's own width transition.
   The background paints the app ground behind the top/side gutters — the fixed
   bar is shorter than the 90px gutter, and without this the dark body shows
   through as a black band above the page content. */
.exc-chrome ~ main {
    padding-inline-start: 72px;
    background: var(--exc-gray-50);
    transition: padding-inline-start 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.exc-chrome[data-rail-pinned="true"] ~ main {
    padding-inline-start: 250px;
}

@media (max-width: 800px) {
    .exc-chrome ~ main,
    .exc-chrome[data-rail-pinned="true"] ~ main {
        padding-inline-start: 0;
    }
}