/* === LIGHT MODE MINT THEME: REFACTORED CSS === */

:root {
    /* ==================================== */
    /* COLOR PALETTE              */
    /* ==================================== */
    --color-mint-accent: #00b894; /* Vibrant Mint (Primary CTAs, Links, Branding) */
    --color-mint-soft: #dff9fb;   /* Very Pale Mint (Hover states, subtle borders) */
    --color-mint-bg-main: #AAF0C1; /* Main Page Background */
    --color-mint-bg-header: #5fe88d; /* Top Bar, Sidebar, and Navigation Background */
    --color-text-dark: #2d3436;   /* Soft Charcoal (Primary Text) */
    --color-text-secondary: #636e72; /* Secondary Text/Subtitles */
    --color-grey-subscribed: #dfe6e9; /* Subscribed Button Background */
    --color-white: #ffffff; /* General White (e.g., Menu background) */

    /* ==================================== */
    /* YOUTUBE OVERRIDES            */
    /* ==================================== */

    /* --- Backgrounds --- */
    --yt-spec-base-background: var(--color-mint-bg-main) !important;
    --yt-spec-general-background-a: var(--color-mint-bg-main) !important;
    --yt-spec-menu-background: var(--color-white) !important;
    --yt-spec-inverted-background: var(--color-white) !important;

    /* --- Text Colors --- */
    --yt-spec-text-primary: var(--color-text-dark) !important;
    --yt-spec-text-secondary: var(--color-text-secondary) !important;
    --yt-spec-text-disabled: var(--color-text-secondary) !important;

    /* --- Branding & Call to Action (Replacing Red) --- */
    --yt-spec-static-brand-red: var(--color-mint-accent) !important;
    --yt-spec-brand-background-solid: var(--color-mint-accent) !important;
    --yt-spec-call-to-action: var(--color-mint-accent) !important;
    --yt-spec-brand-text: var(--color-mint-accent) !important;
}


/* ==================================== */
/* LAYOUT & STRUCTURE          */
/* ==================================== */

/* 1. Overall Page and Shorts Backgrounds */
#page-manager, /* NEWLY ADDED: Ensures the entire page wrapper has the mint background */
#reel-video-renderer
{
    background-color: var(--color-mint-bg-main) !important;
    border-bottom: 1px solid var(--color-mint-soft) !important;
}

/* 2. Header, Navigation, Sidebar (Top-level Structural Backgrounds) */
ytd-masthead,           /* The Header/Search Bar */
#chips-content,         /* The Navigation Bar/Chips */
#guide-inner-content    /* The Side Bar */
{
    background-color: var(--color-mint-bg-header) !important;
    border-bottom: 1px solid var(--color-mint-soft) !important;
}


/* ==================================== */
/* INTERACTIVE ELEMENTS        */
/* ==================================== */

/* 1. Video Player Scrubber / Progress Bar */
.ytp-play-progress,
.ytp-scrubber-button,
.ytp-swatch-background-color
{
    background: var(--color-mint-accent) !important;
    background-color: var(--color-mint-accent) !important; /* Added for ytp-swatch */
}

/* 2. Subscribe Button (Default State) */
ytd-subscribe-button-renderer paper-button {
    background-color: var(--color-mint-accent) !important;
    color: var(--color-white) !important;
    border-radius: 18px !important; /* Rounded pill shape */
    font-weight: 600 !important;
    letter-spacing: 0.5px;
}
/* 2. Subscribe Button (Subscribed State - Greyed out) */
ytd-subscribe-button-renderer[subscribed] paper-button {
    background-color: var(--color-grey-subscribed) !important;
    color: var(--color-text-secondary) !important;
}

/* 3. Links and Hashtags */
a.yt-simple-endpoint.yt-formatted-string {
    color: var(--color-mint-accent) !important;
}

/* 4. Like/Dislike Active State (Toggled Button) */
ytd-toggle-button-renderer.style-default-active[is-icon-button] {
    color: var(--color-mint-accent) !important;
}

/* 5. Logo Adjustment (Greyscale Mint effect) */
#logo-icon {
    /* Applies hue rotation and brightness boost to the logo, targeting the red */
    filter: hue-rotate(140deg) brightness(1.2) !important;
}