:root {
  /* Dark Mode (Default) */
  --swiper-button: #ffffff;
  /* Background Colors */
  --bg-body: #181818;
  --bg-card: #252525;
  --bg-card-hover: #303030;
  --bg-header: #252525;
  --bg-input: rgba(48, 48, 48, 0.5);
  --bg-dropdown: rgba(32, 32, 32, 0.98);
  --bg-button: #303030;
  --bg-overlay: rgba(32, 32, 32, 0.76);
  --bg-overlay-dark: rgba(0, 0, 0, 0.85);
  --bg-overlay-light: rgba(0, 0, 0, 0.5);
  --bg-panel: #202020;
  --bg-panel-secondary: rgba(37, 37, 37, 0.6);
  --bg-panel-tertiary: rgba(32, 32, 32, 0.4);
  --bg-scrollbar-track: var(--bg-card-hover);
  --bg-scrollbar-thumb: var(--bg-card);
  --bg-scrollbar-thumb-hover: #555;
  --bg-image-placeholder: rgba(17, 17, 17, 0.5);
  --bg-menu-icon: rgba(25, 25, 25, 0.5);
  --bg-cookie: rgba(32, 32, 32, 0.95);
  --bg-search-overlay: rgba(32, 32, 32, 0.98);
  --bg-input-hover: rgba(48, 48, 48, 0.7);
  --bg-input-focus: rgba(48, 48, 48, 0.8);
  --bg-input-nav: rgba(48, 48, 48, 0.5);
  --bg-input-nav-focus: rgba(48, 48, 48, 0.7);
  --bg-close-hover-light: rgba(255, 255, 255, 0.1);
  --bg-transparent: rgba(255, 255, 255, 0);
  --bg-panel-hover: rgba(32, 32, 32, 0.6);
  --border-category: rgba(85, 85, 85, 0.4);
  --border-category-hover: rgba(85, 85, 85, 0.6);
  --shadow-box-dark: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-box-strong: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-box-medium: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-accent-light: 0 0 0 3px rgba(0, 153, 123, 0.1);
  --text-shadow-light: 0 1px 2px rgba(0, 0, 0, 0.3);
  --bg-cookie-hover: rgba(48, 48, 48, 0.4);
  --bg-input-solid: #323232;
  --bg-dark: #191919;
  --bg-category-red: #cc0000;

  /* Text Colors */
  --text-main: #ffffff;
  --text-secondary: #c4c4c4;
  --text-muted: #999999;
  --text-light: #e0e0e0;
  --text-dark: #cfcfcf;
  --text-darker: #dbdbdb;
  --text-placeholder: #999;
  --text-aaa: #aaa;
  --text-bbb: #bbb;
  --text-666: #888;
  --text-white: #ffffff;
  --text-white-80: rgba(255, 255, 255, 0.8);
  --text-white-70: rgba(255, 255, 255, 0.7);

  /* Border Colors */
  --border-color: #333333;
  --border-light: rgba(85, 85, 85, 0.3);
  --border-medium: #404040;
  --border-dark: #555;
  --border-accent: rgba(0, 153, 123, 0.4);
  --border-accent-hover: rgba(0, 153, 123, 0.5);
  --border-accent-strong: rgba(0, 153, 123, 0.7);
  --border-scrollbar: rgba(85, 85, 85, 0.5);
  --border-cookie: rgba(85, 85, 85, 0.5);

  /* Accent/Primary Colors */
  --accent-color: #0ba385;
  --accent-hover: #00997b;
  --accent-light: #42b19a;
  --accent-rgb: 11, 163, 133;
  --accent-hover-rgb: 0, 153, 123;
  --accent-light-rgb: 66, 177, 154;
  --accent-button: #008066;
  --accent-gradient-start: rgba(0, 153, 123, 0.1);
  --accent-gradient-end: rgba(0, 153, 123, 0.05);
  --accent-bg-hover: rgba(0, 153, 123, 0.15);
  --accent-bg-light: rgba(0, 153, 123, 0.12);
  --accent-bg-medium: rgba(0, 153, 123, 0.2);
  --accent-bg-strong: rgba(0, 153, 123, 0.3);
  --accent-border-light: rgba(0, 153, 123, 0.3);
  --accent-border-medium: rgba(0, 153, 123, 0.4);
  --accent-border-strong: rgba(0, 153, 123, 0.5);
  --accent-border-stronger: rgba(0, 153, 123, 0.6);
  --accent-border-strongest: rgba(0, 153, 123, 0.7);
  --accent-shadow: rgba(0, 153, 123, 0.2);
  --accent-shadow-hover: rgba(0, 153, 123, 0.3);
  --accent-text: #00997b;
  --accent-text-cyan: #00ffc8;

  /* Button Colors */
  --button-primary: #42b19a;
  --button-primary-hover: #00997b;
  --button-secondary: #303030;
  --button-secondary-hover: #42b19a;
  --button-signin: #ffa733;
  --button-signin-hover: #f58b01;
  --button-submit: rgba(0, 153, 123, 0.8);
  --button-submit-hover: rgba(0, 153, 123, 1);
  --button-cancel: rgba(85, 85, 85, 0.3);
  --button-cancel-hover: rgba(85, 85, 85, 0.5);
  --button-disabled: #2bb38c41;
  --button-gray: gray;
  --button-white: #fff;
  --button-white-hover: #303030;

  /* Status Colors */
  --color-success: #4ade80;
  --color-success-bg: rgba(0, 153, 123, 0.15);
  --color-success-border: rgba(0, 153, 123, 0.3);
  --color-success-alt: #4CAF50;
  --color-error: #f87171;
  --color-error-bg: rgba(239, 68, 68, 0.15);
  --color-error-border: rgba(239, 68, 68, 0.3);
  --color-error-strong: #e42f2f;
  --color-warning: #fbbf24;
  --color-warning-bg: rgba(251, 191, 36, 0.15);
  --color-warning-border: rgba(251, 191, 36, 0.3);
  --color-info: #0d6efd;
  --color-danger-hover: rgba(239, 68, 68, 0.3);

  /* Like/Heart Colors */
  --color-like: #ffa0a0;
  --color-like-hover: #ff6b6b;
  --color-like-bg: rgba(255, 160, 160, 0.15);
  --color-like-bg-hover: rgba(255, 160, 160, 0.2);
  --color-like-border: rgba(255, 160, 160, 0.3);
  --color-like-border-hover: rgba(255, 160, 160, 0.4);

  /* Shadow Colors */
  --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
  --shadow-hover: 0 8px 24px rgba(11, 163, 133, 0.2);

  /* Side Card & Bottom Grid Cards */
  /* Sharing similar styles for clean look */
  .featured-side-card,
  .featured-bottom-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none !important;
    /* Force remove underline on container */
    border: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    /* Very subtle shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    animation: fadeInUp 0.6s ease-out backwards;
  }

  /* Specific targetting for anchor tags to override any global theme defaults */
  a.featured-side-card,
  a.featured-bottom-card {
    text-decoration: none !important;
    color: inherit !important;
  }

  .featured-side-card *,
  .featured-bottom-card * {
    text-decoration: none !important;
    /* Ensure children don't inherit underlines */
  }

  --shadow-overlay: -4px 0 20px rgba(0, 0, 0, 0.4);
  --shadow-overlay-bottom: 0 -4px 20px rgba(0, 0, 0, 0.4);
  --shadow-card-strong: 0 8px 32px rgba(0, 0, 0, 0.3);
  --shadow-card-medium: 0 4px 16px rgba(0, 0, 0, 0.2);
  --shadow-cookie: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-accent: 0 4px 12px rgba(0, 153, 123, 0.3);
  --shadow-accent-small: 0 2px 8px rgba(0, 153, 123, 0.3);

  /* Gradient Colors */
  --gradient-overlay: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(32, 50, 57, 0));
  --gradient-accent: linear-gradient(135deg, rgba(0, 153, 123, 0.1) 0%, rgba(0, 153, 123, 0.05) 100%);
  --gradient-swiper: linear-gradient(90deg, rgba(48, 48, 48, 0), rgba(48, 48, 48, 0.5));

  /* Special Colors */
  --color-selection-bg: #0ba385;
  --color-selection-text: #fff;
  --color-category-bg: #303030;
  --color-category-hover: #ffffff;
  --color-category-text: white;
  --color-category-text-hover: #303030;
  --color-slider-nav: #fff;
  --color-slider-nav-text: black;
  --color-slider-nav-opacity: 0.50;
  --color-footer-legal: #202020;
  --color-footer-legal-border: #303030;
  --color-heart: #c4c4c4;
  --color-shape-fill: #00997b;
  --color-banner-bg: #00997b;
  --color-banner-text: #ffffff;
  --color-close-hover: rgba(48, 48, 48, 0.6);
  --color-search-icon: #888;
  --color-search-icon-hover: #00997b;
  --color-404: #00997b;
  --color-404-text: white;
  --color-404-text-alt: #e0e0e0;
  --color-black: #000000;
  --text-shadow-black: 0px 0px 40px black,
  0px 0px 40px black;
  --color-category-text-light: #f9fafb;
  --border-category-hover: #606060;

  /* Overlay RGB */
  --overlay-color-rgb: 37,
  37,
  37;
}

[data-theme="light"] {
  /* Light Mode */
  --swiper-button: #181818;
  /* Background Colors */
  --bg-body: #f0f0f0;
  --bg-card: #ffffff;
  --bg-card-hover: #f5f5f5;
  --bg-header: #ffffff;
  --bg-input: #e6e6e6;
  --bg-dropdown: var(--bg-body);
  --bg-button: #f3f3f3;
  --bg-overlay: rgba(240, 240, 240, 0.95);
  --bg-overlay-dark: rgba(0, 0, 0, 0.5);
  --bg-overlay-light: rgba(0, 0, 0, 0.2);
  --bg-panel: #ffffff;
  --bg-panel-secondary: rgba(255, 255, 255, 0.95);
  --bg-panel-tertiary: rgba(240, 240, 240, 0.9);
  --bg-scrollbar-track: #e5e5e5;
  --bg-scrollbar-thumb: #c5c5c5;
  --bg-scrollbar-thumb-hover: #a5a5a5;
  --bg-image-placeholder: rgba(235, 235, 235, 0.9);
  --bg-menu-icon: rgba(224, 224, 224, 0.8);
  --bg-cookie: rgba(255, 255, 255, 0.98);
  --bg-search-overlay: rgba(255, 255, 255, 0.98);
  --bg-input-solid: #f5f5f5;
  --bg-dark: #2a2a2a;
  --bg-category-red: #ff4444;
  --bg-input-hover: #ebebeb;
  --bg-input-focus: #ffffff;
  --bg-input-nav: rgba(245, 245, 245, 0.9);
  --bg-input-nav-focus: rgba(245, 245, 245, 1);
  --bg-close-hover-light: rgba(0, 0, 0, 0.06);
  --bg-transparent: rgba(255, 255, 255, 0);
  --bg-panel-hover: rgba(245, 245, 245, 0.9);
  --bg-cookie-hover: rgba(224, 224, 224, 0.7);

  /* Text Colors */
  --text-main: #1a1a1a;
  --text-secondary: #4a4a4a;
  --text-muted: #6c757d;
  --text-light: #2a2a2a;
  --text-dark: #3a3a3a;
  --text-darker: #5a5a5a;
  --text-placeholder: #9ca3af;
  --text-aaa: #aaaaaa;
  --text-bbb: #bbbbbb;
  --text-666: #666666;
  --text-white: #ffffff;
  --text-white-80: rgba(255, 255, 255, 0.8);
  --text-white-70: rgba(255, 255, 255, 0.7);

  /* Border Colors */
  --border-color: #e5e5e5;
  --border-light: rgba(0, 0, 0, 0.2);
  --border-medium: #d5d5d5;
  --border-dark: #c0c0c0;
  --border-accent: rgba(11, 163, 133, 0.25);
  --border-accent-hover: rgba(11, 163, 133, 0.35);
  --border-accent-strong: rgba(11, 163, 133, 0.45);
  --border-accent-stronger: rgba(11, 163, 133, 0.55);
  --border-accent-strongest: rgba(11, 163, 133, 0.65);
  --border-scrollbar: rgba(0, 0, 0, 0.08);
  --border-cookie: rgba(0, 0, 0, 0.08);
  --border-category: rgba(0, 0, 0, 0.12);
  --border-category-hover: rgba(0, 0, 0, 0.2);

  /* Accent/Primary Colors */
  --accent-color: #0ba385;
  --accent-hover: #007960;
  /* Darkened for contrast */
  --accent-light: #42b19a;
  --accent-rgb: 11, 163, 133;
  --accent-hover-rgb: 0, 121, 96;
  --accent-light-rgb: 66, 177, 154;
  --accent-button: #008066;
  --accent-gradient-start: rgba(11, 163, 133, 0.1);
  --accent-gradient-end: rgba(11, 163, 133, 0.05);
  --accent-bg-hover: rgba(11, 163, 133, 0.1);
  --accent-bg-light: rgba(11, 163, 133, 0.08);
  --accent-bg-medium: rgba(11, 163, 133, 0.15);
  --accent-bg-strong: rgba(11, 163, 133, 0.2);
  --accent-border-light: rgba(11, 163, 133, 0.3);
  --accent-border-medium: rgba(11, 163, 133, 0.4);
  --accent-border-strong: rgba(11, 163, 133, 0.5);
  --accent-border-stronger: rgba(11, 163, 133, 0.6);
  --accent-border-strongest: rgba(11, 163, 133, 0.7);
  --accent-shadow: rgba(11, 163, 133, 0.15);
  --accent-shadow-hover: rgba(11, 163, 133, 0.25);
  --accent-text: #007960;
  /* Darkened to bypass 4.5:1 ratio */
  --accent-text-cyan: #00d4aa;

  /* Button Colors */
  --button-primary: #42b19a;
  --button-primary-hover: #0ba385;
  --button-secondary: #e8e8e8;
  --button-secondary-hover: #42b19a;
  --button-signin: #ffa733;
  --button-signin-hover: #f58b01;
  --button-submit: rgba(11, 163, 133, 0.9);
  --button-submit-hover: rgba(11, 163, 133, 1);
  --button-cancel: rgba(108, 117, 125, 0.2);
  --button-cancel-hover: rgba(108, 117, 125, 0.3);
  --button-disabled: rgba(11, 163, 133, 0.25);
  --button-gray: #9ca3af;
  --button-white: #ffffff;
  --button-white-hover: #f5f5f5;

  /* Status Colors */
  --color-success: #4ade80;
  --color-success-bg: rgba(11, 163, 133, 0.1);
  --color-success-border: rgba(11, 163, 133, 0.3);
  --color-success-alt: #4CAF50;
  --color-error: #f87171;
  --color-error-bg: rgba(248, 113, 113, 0.1);
  --color-error-border: rgba(248, 113, 113, 0.3);
  --color-error-strong: #e42f2f;
  --color-warning: #fbbf24;
  --color-warning-bg: rgba(251, 191, 36, 0.1);
  --color-warning-border: rgba(251, 191, 36, 0.3);
  --color-info: #0d6efd;
  --color-danger-hover: rgba(248, 113, 113, 0.2);

  /* Like/Heart Colors */
  --color-like: #ffa0a0;
  --color-like-hover: #ff6b6b;
  --color-like-bg: rgba(255, 160, 160, 0.1);
  --color-like-bg-hover: rgba(255, 160, 160, 0.15);
  --color-like-border: rgba(255, 160, 160, 0.3);
  --color-like-border-hover: rgba(255, 160, 160, 0.4);

  /* Shadow Colors */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 8px 24px rgba(11, 163, 133, 0.15);
  --shadow-overlay: -4px 0 20px rgba(0, 0, 0, 0.1);
  --shadow-overlay-bottom: 0 -4px 20px rgba(0, 0, 0, 0.1);
  --shadow-card-strong: 0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-card-medium: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-cookie: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-accent: 0 4px 12px rgba(11, 163, 133, 0.2);
  --shadow-accent-small: 0 2px 8px rgba(11, 163, 133, 0.2);
  --shadow-box-dark: 0 8px 24px rgba(0, 0, 0, 0.15);
  --shadow-box-strong: 0 8px 32px rgba(0, 0, 0, 0.2);
  --shadow-box-medium: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-accent-light: 0 0 0 3px rgba(11, 163, 133, 0.08);
  --text-shadow-light: 0 1px 2px rgba(0, 0, 0, 0.1);

  /* Gradient Colors */
  --gradient-overlay: linear-gradient(to top, rgba(0, 0, 0, 0.596), rgba(255, 255, 255, 0));
  --gradient-accent: linear-gradient(135deg, rgba(11, 163, 133, 0.1) 0%, rgba(11, 163, 133, 0.05) 100%);
  --gradient-swiper: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0));
  --slider-text-secondary: #c2c2c2;
  /* Special Colors */
  --color-selection-bg: #0ba385;
  --color-selection-text: #fff;
  --color-category-bg: #e0e0e0;
  --color-category-hover: #0ba385;
  --color-category-text: #2a2a2a;
  --color-category-text-hover: #ffffff;
  --color-slider-nav: #ffffff;
  --color-slider-nav-text: #1a1a1a;
  --color-slider-nav-opacity: 0.90;
  --color-footer-legal: #f8f9fa;
  --color-footer-legal-border: #e0e0e0;
  --color-heart: #9ca3af;
  --color-shape-fill: #0ba385;
  --color-banner-bg: #0ba385;
  --color-banner-text: #ffffff;
  --color-close-hover: rgba(0, 0, 0, 0.05);
  --color-search-icon: #9ca3af;
  --color-search-icon-hover: #0ba385;
  --color-404: #007960;
  --color-404-text: #1a1a1a;
  --color-404-text-alt: #4a4a4a;
  --color-category-text-light: #2a2a2a;
  --border-category-hover: #0ba385;


  /* Overlay RGB */
  --overlay-color-rgb: 255, 255, 255;
}