/* OCC / WAY — canonical colour reconciliation
   Behaviour and semantic states stay intact; decorative multi-hue gradients do not. */
:root {
    --occ-canvas: #0b0d0f;
    --occ-surface-1: #121519;
    --occ-surface-2: #181c21;
    --occ-surface-elevated: #1e2227;
    --occ-border: #292e35;
    --occ-text: #f2f4f5;
    --occ-text-secondary: #9ca3ac;
    --occ-text-muted: #6f7680;
    --occ-orange: #f15a24;
    --occ-orange-hover: #d94b18;
    --occ-orange-soft: rgba(241, 90, 36, .14);

    /* Compatibility aliases used by older generations of the interface. */
    --primary: var(--occ-orange);
    --accent: var(--occ-orange);
    --brand-orange: var(--occ-orange);
    --v-orange: var(--occ-orange);
    --v-orange-bright: #ff7842;
    --ember: var(--occ-orange);
    --ember-bright: #ff7842;
    --ember-2: var(--occ-orange);
    --cyan: var(--occ-orange);
    --purple: var(--occ-orange);
    --violet: var(--occ-orange);
    --cn-grad: var(--occ-orange);
    --cn-grad-2: var(--occ-orange);
    --occ-gradient: var(--occ-orange);
    --occ-gradient-hover: var(--occ-orange-hover);
    --pf-purple: var(--occ-orange);
    --pf-cyan: var(--occ-orange);
    --pf-grad: var(--occ-orange);
}

/* Public home and legacy landing actions use the same readable treatment. */
:where(.oc-btn, .oc-navcta, .footer-v2-primary-link, .landing-cta-primary) {
    background: var(--occ-orange) !important;
    background-image: none !important;
    border-color: var(--occ-orange) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

:where(.oc-btn, .oc-navcta, .footer-v2-primary-link, .landing-cta-primary):hover {
    background: var(--occ-orange-hover) !important;
    color: #fff !important;
}

.oc-brand .mk,
.oc-pcard.featured::before,
.footer-v2-logo-icon {
    background: var(--occ-orange) !important;
    background-image: none !important;
}

/* Product surfaces: one calm graphite scale. Public light pages remain light. */
body:not(.landing-page) {
    --bg-primary: var(--occ-canvas);
    --bg-secondary: var(--occ-surface-1);
    --bg-card: var(--occ-surface-2);
    --surface: var(--occ-surface-1);
    --surface-2: var(--occ-surface-2);
    --border-color: var(--occ-border);
    --text-primary: var(--occ-text);
    --text-secondary: var(--occ-text-secondary);
    --text-muted: var(--occ-text-muted);
}

/* Primary actions are always legible: white on natural construction orange. */
:where(
    .occ-btn--primary,
    .v-btn--primary,
    .btn-primary,
    [class*="btn--primary"],
    [class*="button--primary"],
    [class*="cta--primary"]
) {
    background: var(--occ-orange) !important;
    background-image: none !important;
    border-color: var(--occ-orange) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    text-shadow: none !important;
}

:where(
    .occ-btn--primary,
    .v-btn--primary,
    .btn-primary,
    [class*="btn--primary"],
    [class*="button--primary"],
    [class*="cta--primary"]
):hover:not(:disabled) {
    background: var(--occ-orange-hover) !important;
    border-color: var(--occ-orange-hover) !important;
    color: #fff !important;
}

:where(
    [class*="btn--primary"],
    [class*="button--primary"],
    [class*="cta--primary"]
)::before,
:where(
    [class*="btn--primary"],
    [class*="button--primary"],
    [class*="cta--primary"]
)::after {
    background-image: none !important;
}

/* Common legacy names for decorative gradient lettering. */
:where(.gradient-text, .text-gradient, [class$="-gradient"], [class$="__gradient"]) {
    background: none !important;
    color: var(--occ-orange) !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
}

/* Colour-labelled decorative cards become neutral. Semantic success/warning/error
   selectors are intentionally not included. */
body:not(.landing-page) :where(
    [class*="--purple"], [class*="--violet"], [class*="--cyan"],
    [class*="--pink"], [class*="--blue"]
) {
    --accent: var(--occ-orange);
    --accent-bg: var(--occ-orange-soft);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
    }
}