/* ============================================================
   BRAND — one palette for the whole site.
   Admin General Settings override --brand-1..4 via #rx-brand-theme.
   No animation.
   ============================================================ */

:root {
    --brand-1: #9A3412;
    --brand-1-rgb: 154, 52, 18;
    --brand-2: #EA580C;
    --brand-2-rgb: 234, 88, 12;
    --brand-3: #FB923C;
    --brand-3-rgb: 251, 146, 60;
    --brand-4: #FED7AA;
    --brand-4-rgb: 254, 215, 170;

    --brand-font: "Outfit", sans-serif;
    --brand-display: "Outfit", sans-serif;
    --brand-text: #FFFFFF;
    --brand-text-rgb: 255, 255, 255;
    --brand-on-accent: #FFFFFF;
    --brand-ink: #FFFFFF;
    --brand-ink-rgb: 255, 255, 255;
    --brand-on-light: #1F2937;
    --brand-on-light-rgb: 31, 41, 55;
    --brand-on-light-2: #374151;
    --brand-on-light-2-rgb: 55, 65, 81;

    --lx-void: #07080c;
    --lx-void-2: #0d1016;
    --lx-sheet: #12161f;
    --lx-line: rgba(255, 255, 255, 0.1);
    --lx-mute: rgba(255, 255, 255, 0.78);
    --rx-cut: 0 10px 0 10px;

    --brand-gradient: linear-gradient(145deg, var(--brand-1) 0%, var(--brand-2) 42%, var(--brand-3) 78%, var(--brand-4) 100%);
    --brand-gradient-card: var(--brand-gradient);
    --brand-gradient-btn: linear-gradient(180deg, color-mix(in srgb, var(--brand-3) 72%, #fff) 0%, var(--brand-2) 48%, var(--brand-1) 100%);
    --brand-gradient-hero: var(--brand-gradient);
    --brand-gradient-pink: linear-gradient(135deg, var(--brand-3), var(--brand-4));
    --brand-gradient-soft: linear-gradient(180deg, var(--lx-sheet), var(--lx-void));

    --brand-ink-2: color-mix(in srgb, var(--brand-1) 40%, #000);
    --brand-ink-2-rgb: 8, 18, 48;
    --brand-ink-3: #05070a;
    --brand-ink-3-rgb: 5, 7, 10;
    --brand-deep: var(--brand-1);
    --brand-deep-rgb: var(--brand-1-rgb);
    --brand-muted: #9aa3b5;
    --brand-muted-rgb: 154, 163, 181;
    --brand-muted-2: #7d8799;
    --brand-muted-3: #5c6576;

    --brand-t400: color-mix(in srgb, var(--brand-2) 55%, #fff);
    --brand-t300: color-mix(in srgb, var(--brand-2) 38%, #fff);
    --brand-t200: color-mix(in srgb, var(--brand-2) 22%, #fff);
    --brand-t100: color-mix(in srgb, var(--brand-2) 12%, #0d1016);
    --brand-t50: color-mix(in srgb, var(--brand-2) 7%, #0d1016);
    --brand-t400-rgb: 251, 191, 136;
    --brand-t300-rgb: 253, 186, 116;
    --brand-t200-rgb: 234, 88, 12;
    --brand-t100-rgb: 124, 45, 18;
    --brand-t50-rgb: 67, 20, 7;

    --brand-page: var(--lx-void);
    --brand-page-soft: var(--lx-void-2);
    --brand-surface: var(--lx-sheet);
    --brand-surface-rgb: 18, 22, 31;
    --brand-surface-2: #171c27;

    --brand-pink-soft: color-mix(in srgb, var(--brand-4) 35%, #1a1408);
    --brand-pink-mid: var(--brand-3);
    --brand-pink-mid-rgb: var(--brand-3-rgb);
    --brand-pink-deep: var(--brand-3);
    --brand-pink-deep-rgb: var(--brand-3-rgb);
    --brand-pink-ink: var(--brand-4);
    --brand-pink-ink-rgb: var(--brand-4-rgb);

    --brand-line: var(--lx-line);
    --brand-line-strong: color-mix(in srgb, var(--brand-3) 45%, transparent);
    --brand-shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.35);
    --brand-shadow-md: 0 14px 28px rgba(0, 0, 0, 0.4);
    --brand-shadow-lg: 0 18px 36px rgba(0, 0, 0, 0.48);
    --brand-shadow-glow: inset 0 1px 0 rgba(255, 255, 255, 0.42), inset 0 -16px 28px rgba(0, 0, 0, 0.22), 0 14px 32px color-mix(in srgb, var(--brand-1) 34%, transparent);

    --lx-oil: linear-gradient(148deg,
        rgba(255, 255, 255, 0.5) 0%,
        color-mix(in srgb, var(--brand-4) 72%, #fff) 10%,
        var(--brand-3) 28%,
        var(--brand-2) 56%,
        var(--brand-1) 84%,
        #14040a 100%);
    --lx-glass: linear-gradient(165deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.04) 46%, rgba(0, 0, 0, 0.22) 100%);
    --lx-metal: linear-gradient(180deg,
        rgba(255, 255, 255, 0.38) 0%,
        rgba(255, 255, 255, 0.06) 38%,
        rgba(0, 0, 0, 0.28) 100%);
}

@supports (color: color-mix(in srgb, red 50%, white)) {
    :root {
        --brand-page: color-mix(in srgb, var(--brand-1) 14%, #07080c);
        --brand-page-soft: color-mix(in srgb, var(--brand-1) 20%, #0b0e14);
        --brand-surface: color-mix(in srgb, var(--brand-2) 12%, #12161f);
        --lx-sheet: color-mix(in srgb, var(--brand-1) 14%, #12161f);
        --brand-t50: color-mix(in srgb, var(--brand-2) 8%, #0d1016);
        --brand-t100: color-mix(in srgb, var(--brand-2) 14%, #10141c);
        --brand-line-strong: color-mix(in srgb, var(--brand-3) 50%, transparent);
    }
}

*,
*::before,
*::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}

html, body {
    background: var(--brand-page);
    color: var(--brand-text);
    font-family: var(--brand-font);
}

/* Chrome autofill uses a tiny animation. Killing it on inputs clears typed text. */
input, textarea, select {
    animation: unset !important;
    scroll-behavior: auto !important;
}