/* === LIGHT MODE MINT THEME === */

:root {
    /* --- COLOR PALETTE VARIABLES --- */
    --mint-accent: #00b894;       /* Vibrant Mint (Buttons/Links) */
    --mint-soft: #dff9fb;         /* Very Pale Mint (Hover states) */
    --mint-bg: #AAF0C1;           /* Main Background (Mint) */
    --mint-top: #5fe88d;          /* Main Topbar (Caribbean Green Pearl) */
    --dark-text: #2d3436;         /* Soft Charcoal (Text) */
    
    /* --- YOUTUBE OVERRIDES --- */
    
    /* Backgrounds */
    --yt-spec-base-background: var(--mint-bg) !important;
    --yt-spec-general-background-a: var(--mint-bg) !important;
    --yt-spec-menu-background: #ffffff !important;
    
    /* Text */
    --yt-spec-text-primary: var(--dark-text) !important;
    --yt-spec-text-secondary: #636e72 !important;
    
    /* Branding (Replacing the Red) */
    --yt-spec-static-brand-red: var(--mint-accent) !important;
    --yt-spec-brand-background-solid: var(--mint-accent) !important;
    --yt-spec-call-to-action: var(--mint-accent) !important;
}

/* === SPECIFIC ELEMENT TWEAKS === */

/* 1. The Header/Search Bar */
ytd-masthead {
    background-color: var(--mint-top) !important;
    border-bottom: 1px solid #e0f2f1 !important;
}

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

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

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

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

/* 6. Logo Adjustment (Greyscale Mint) */
#logo-icon {
    filter: hue-rotate(140deg) brightness(1.2) !important;
}