:root {
    --u-bg-base: #3a1622;
    --u-bg-mid-stop: #321420;
    --u-bg-deep-stop: #261018;
    --u-grad-a: #5c2030;
    --u-grad-b: #481c28;
    --u-grad-c: #3a1622;
    --u-grad-d: #2e121a;

    --u-surface: #442030;
    --u-surface-2: #4c2834;

    --u-brand: #cf2727;
    --u-red: #cf2727;
    --u-red-soft: #e85555;
    --u-red-deep: #a61f1f;

    /* i.giphy.com is the preferred hotlink host; replace with your own GIF URL if needed */
    --u-hero-gif: url('https://i.postimg.cc/L5zdJ1F4/0329.gif');
    --u-hero-overlay: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.75) 100%
    );

    --u-text: #f6f6f6;
    --u-muted: #a6a6a6;
    --u-line: rgba(255, 255, 255, 0.12);
    --u-white: #ffffff;
    --u-black: #050202;
    --u-focus: 0 0 0 3px rgba(255, 0, 0, 0.35);
    --u-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);

    --u-bg: var(--u-bg-base);
    --u-bg-mid: var(--u-bg-mid-stop);

    --u-showcase-grad: linear-gradient(145deg, var(--u-grad-a) 0%, var(--u-grad-b) 38%, var(--u-grad-c) 72%, var(--u-grad-d) 100%);
    --u-page-background: radial-gradient(ellipse 125% 52% at 50% -6%, rgba(255, 90, 100, 0.14), transparent 50%),
        radial-gradient(ellipse 65% 42% at 100% 45%, rgba(200, 50, 70, 0.09), transparent 44%),
        radial-gradient(ellipse 50% 38% at 0% 88%, rgba(160, 30, 55, 0.08), transparent 42%),
        var(--u-showcase-grad);

    --u-header-bg: rgba(0, 0, 0, 0.94);
    --u-header-bg-scrolled: rgba(0, 0, 0, 0.98);

    --u-loading-bg: linear-gradient(
        145deg,
        #140000 0%,
        #0e0004 52%,
        #0a0000 100%
    );

    --color-secondary: #2e1822;

    --color-primary: var(--u-red);
    --color-primary-hover: var(--u-red-soft);
    --color-primary-text: #ffffff;
    --color-primary-text-hover: #ffffff;
    --color-text: var(--u-text);
    --color-text-darker: #e8e8e8;
    --color-text-secondary: var(--u-muted);
    --color-text-dark: #0c0404;
    --color-bg: var(--u-bg);
    --color-brighter-bg: var(--u-surface);
    --color-secondary-hover: #3a2428;
    --color-secondary-text: var(--u-text);
    --color-secondary-text-hover: var(--u-text);
    --color-tertiary: transparent;
    --color-tertiary-hover: rgba(255, 0, 0, 0.12);
    --color-tertiary-text: var(--color-text);
    --color-tertiary-text-hover: var(--color-tertiary-text);
    --color-removed: #c12e2e;
    --color-sale-banner-bg: var(--color-primary);
    --color-sale-banner-text: var(--color-primary-text);

    --tebex-legal-footer-background-color: var(--u-surface);
    --tebex-legal-footer-border-color: rgba(255, 0, 0, 0.2);
    --tebex-legal-footer-text-color: var(--u-muted);

    --primary-red: var(--u-red);
    --dark-red: var(--u-red-deep);
    --glow-red: rgba(255, 0, 0, 0.22);
    --bg-dark: var(--u-bg);
    --bg-card: var(--u-surface);
    --text-white: var(--u-text);
    --text-gray: var(--u-muted);
    --glass-bg: rgba(46, 22, 32, 0.82);
    --border-color: rgba(255, 255, 255, 0.1);
    --border-active: rgba(255, 0, 0, 0.35);
}