/* =========================================================
   Global design tokens
   ========================================================= */

:root
{
    /* Brand colors */
    --rf-brand-orange: #ff8c00;
    --rf-accent: var(--rf-brand-orange);
    --rf-accent-rgb: 255, 140, 0;
    --rf-accent-hover: #e69500;
    --rf-accent-active: #cc8400;
    --rf-accent-subtle: #ffe4bf;
    --rf-accent-contrast: #ffffff;

    --rf-complementary: #007777;
    --rf-complementary-rgb: 0, 119, 119;
    --rf-complementary-hover: #009999;
    --rf-complementary-hover-rgb: 0, 153, 153;
    --rf-complementary-active: #006666;
    --rf-complementary-subtle: rgba(var(--rf-complementary-rgb), 0.08);

    --rf-gold: #d4af37;
    --rf-gold-rgb: 212, 175, 55;
    --rf-gold-hover: #c19d2f;
    --rf-gold-active: #a8872a;

    /* Action controls */
    --rf-action: rgba(33, 37, 41, 0.04);
    --rf-action-border: rgba(33, 37, 41, 0.08);
    --rf-action-text: rgba(33, 37, 41, 0.72);
    --rf-action-hover: rgba(33, 37, 41, 0.07);
    --rf-action-border-hover: rgba(33, 37, 41, 0.14);
    --rf-action-text-hover: rgba(33, 37, 41, 0.92);
    --rf-action-active: rgba(33, 37, 41, 0.12);
    --rf-action-border-active: rgba(33, 37, 41, 0.22);
    --rf-action-text-active: rgba(33, 37, 41, 1);
    --rf-action-focus-rgb: 33, 37, 41;

    /* Lightbox controls */
    --rf-lightbox-control-bg: rgba(255, 255, 255, 0.94);
    --rf-lightbox-control-border: rgba(255, 255, 255, 0.78);
    --rf-lightbox-control-color: #111318;
    --rf-lightbox-control-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.32);

    /* Application surfaces */
    --rf-app-outer-bg: dimgrey;
    --rf-surface-1-bg: #ffffff;
    --rf-flash-success-bg: #eaf7ea;
    --rf-flash-success-border: #b9dfb9;
    --rf-flash-error-bg: #fdecec;
    --rf-flash-error-border: #efb7b7;
    --rf-page-shell-shadow: -8px 0 12px rgba(0, 0, 0, 0.3), 8px 0 12px rgba(0, 0, 0, 0.3);
    --rf-navbar-text: #111318;
    --rf-nav-hover-bg: rgba(255, 255, 255, 0.08);
    --rf-tmdb-primary: #0d253f;

    /* Layout */
    --navbar-content-height: 40px;
    --navbar-padding-y: 0.25rem;
    --main-padding-x: clamp(16px, 2.5vw, 24px);
    --main-padding-x-wide: clamp(32px, 3vw, 96px);
    --main-padding-y: 24px;
    --sticky-offset: calc(
            var(--navbar-content-height)
            + (var(--navbar-padding-y) * 2)
            + var(--main-padding-y)
    );

    /* Lists, posters and overlays */
    --rf-overlay-strong: rgba(255, 255, 255, 0.9);
    --rf-overlay-mid: rgba(255, 255, 255, 0.5);
    --rf-overlay-none: rgba(255, 255, 255, 0.0);
    --rf-placeholder-bg: rgba(0, 0, 0, 0.05);
    --rf-placeholder-border: rgba(0, 0, 0, 0.1);
    --rf-list-border: lightgray;
    --rf-list-interaction-bg: #efefef;
    --rf-list-interaction-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2), 0 4px 10px 0 rgba(0, 0, 0, 0.19);
    --rf-poster-placeholder-bg: rgba(0, 0, 0, 0.05);
    --rf-poster-placeholder-border: rgba(0, 0, 0, 0.1);
    --rf-poster-stack-placeholder-bg: linear-gradient(135deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.02));
    --rf-poster-stack-border: #f8f9fa;
    --rf-poster-stack-shadow: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.28));
    --rf-list-pill-bg: rgba(255, 255, 255, 0.96);
    --rf-list-pill-color: #111318;
    --rf-list-pill-muted-color: #343a40;

    /* Indicators and feature colors */
    --rf-kpi-indicator-size: 2px;
    --rf-sidebar-indicator-size: 1px;
    --rf-compare-line-stroke: rgba(0, 0, 0, 0.35);
    --rf-compare-line-rgb: 60, 60, 60;

    /* Bootstrap overrides */
    --bs-body-bg: #f8f9fa;
    --bs-body-bg-rgb: 248, 249, 250;
    --bs-body-color: #212529;
    --bs-body-color-rgb: 33, 37, 41;
    --bs-primary: var(--rf-accent);
    --bs-primary-rgb: var(--rf-accent-rgb);
    --bs-link-color: var(--rf-complementary);
    --bs-link-color-rgb: var(--rf-complementary-rgb);
    --bs-link-hover-color: var(--rf-complementary-hover);
    --bs-link-hover-color-rgb: var(--rf-complementary-hover-rgb);
}

@media (min-width: 992px)
{
    :root
    {
        --navbar-padding-y: 0.5rem;
    }
}

[data-bs-theme="dark"]
{
    --rf-accent: #d98220;
    --rf-accent-rgb: 217, 130, 32;
    --rf-accent-hover: #e58d24;
    --rf-accent-active: #c17318;
    --rf-accent-subtle: rgba(var(--rf-accent-rgb), 0.18);
    --rf-accent-contrast: #111318;

    --rf-app-outer-bg: dimgrey;
    --rf-surface-1-bg: #000000;
    --rf-flash-success-bg: rgba(25, 135, 84, 0.18);
    --rf-flash-success-border: rgba(25, 135, 84, 0.45);
    --rf-flash-error-bg: rgba(220, 53, 69, 0.18);
    --rf-flash-error-border: rgba(220, 53, 69, 0.45);
    --rf-page-shell-shadow: -8px 0 18px rgba(0, 0, 0, 0.55), 8px 0 18px rgba(0, 0, 0, 0.55);
    --rf-navbar-text: #111318;
    --rf-nav-hover-bg: var(--rf-accent-active);
    --rf-tmdb-primary: #8bd3ff;

    --rf-complementary: #00b3b3;
    --rf-complementary-rgb: 0, 179, 179;
    --rf-complementary-hover: #33cccc;
    --rf-complementary-hover-rgb: 51, 204, 204;
    --rf-complementary-active: #008f8f;
    --rf-complementary-subtle: rgba(var(--rf-complementary-rgb), 0.12);

    --rf-action: rgba(255, 255, 255, 0.06);
    --rf-action-border: rgba(255, 255, 255, 0.10);
    --rf-action-text: rgba(255, 255, 255, 0.78);
    --rf-action-hover: rgba(255, 255, 255, 0.10);
    --rf-action-border-hover: rgba(255, 255, 255, 0.14);
    --rf-action-text-hover: rgba(255, 255, 255, 0.94);
    --rf-action-active: rgba(255, 255, 255, 0.16);
    --rf-action-border-active: rgba(255, 255, 255, 0.22);
    --rf-action-text-active: rgba(255, 255, 255, 1);
    --rf-action-focus-rgb: 255, 255, 255;

    --rf-lightbox-control-bg: rgba(24, 24, 24, 0.94);
    --rf-lightbox-control-border: rgba(255, 255, 255, 0.34);
    --rf-lightbox-control-color: #f8f9fa;
    --rf-lightbox-control-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.62);

    --rf-overlay-strong: rgba(20, 20, 20, 0.9);
    --rf-overlay-mid: rgba(20, 20, 20, 0.5);
    --rf-overlay-none: rgba(20, 20, 20, 0.0);
    --rf-placeholder-bg: rgba(255, 255, 255, 0.06);
    --rf-placeholder-border: rgba(255, 255, 255, 0.12);
    --rf-list-border: var(--bs-border-color);
    --rf-list-interaction-bg: var(--bs-secondary-bg);
    --rf-list-interaction-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.35), 0 6px 14px 0 rgba(0, 0, 0, 0.28);
    --rf-poster-placeholder-bg: rgba(255, 255, 255, 0.06);
    --rf-poster-placeholder-border: rgba(255, 255, 255, 0.12);
    --rf-poster-stack-placeholder-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    --rf-poster-stack-border: #495057;
    --rf-poster-stack-shadow: drop-shadow(0 0 8px rgba(255, 255, 255, 0.09)) drop-shadow(0 4px 10px rgba(255, 255, 255, 0.07));
    --rf-list-pill-bg: rgba(20, 22, 26, 0.94);
    --rf-list-pill-color: #f8f9fa;
    --rf-list-pill-muted-color: #ced4da;

    --rf-compare-line-stroke: rgba(255, 255, 255, 0.28);
    --rf-compare-line-rgb: 210, 214, 220;

    --bs-body-bg: #181818 /*#111827*/;
    --bs-body-bg-rgb: 24, 24, 24;
    --bs-body-color: #f1f3f5;
    --bs-body-color-rgb: 241, 243, 245;
    --bs-border-color: #343a40;
    --bs-link-color: var(--rf-complementary);
    --bs-link-color-rgb: var(--rf-complementary-rgb);
    --bs-link-hover-color: var(--rf-complementary-hover);
    --bs-link-hover-color-rgb: var(--rf-complementary-hover-rgb);
}