/* Theme: OniSkulls - Dark, Japanese-inspired, Fantasy, Skulls */
:root {
    /* Fonts - Primary choices from Google Fonts */
    --font-heading: 'Noto Serif JP', serif;    /* For main titles, Japanese feel */
    --font-body: 'Zen Kurenaido', sans-serif; /* For body text, clean and modern with a hint of style */

    /* Core Colors */
    --bg-color: #121212;                      /* Very dark grey, almost black for main background */
    --text-color: #e0e0e0;                    /* Light grey for general text, good readability */
    --header-text-color: #ffffff;             /* Pure white for main headings for strong impact */
    --tagline-color: #a0a0a0;                 /* Softer grey for taglines, less emphasis */
    --muted-text-color: #757575;              /* For less important text like footer copy, affiliate disclosures */
    --border-color: #333333;                  /* Dark grey for borders, subtle separation */

    /* Accent & Interactive Colors */
    --accent-color: #b71c1c;                  /* Deep, blood red (samurai, oni theme). Was #c0392b */
    --accent-color-shadow: rgba(183, 28, 28, 0.3); /* Shadow for focused elements, using accent */
    --link-color: #e53935;                    /* A slightly brighter red for links for visibility */
    --link-hover-color: #f44336;              /* Lighter red for link hover state */
    --notice-text-color: #ffd700;             /* Gold/Yellow for important notices (like "Under Construction") */

    /* Input & Button Colors */
    --input-bg-color: #1f1f1f;                /* Dark background for input fields */
    --input-text-color: #e0e0e0;              /* Light text color for input fields */
    --input-border-color: #424242;            /* Border color for input fields */
    --button-bg-color: var(--accent-color);   /* Buttons use the main accent color */
    --button-text-color: #ffffff;             /* White text on buttons for contrast */
    --button-border-color: var(--accent-color);/* Button border matches its background */
    --button-hover-bg-color: #c62828;         /* Slightly lighter/brighter red for button hover. Was #a52a20 */

    /* Product Card Specific Colors */
    --product-bg-color: #1e1e1e;              /* Background for individual product cards */
    --product-border-color: #2d2d2d;          /* Border for product cards */
    --product-shadow-color: rgba(0, 0, 0, 0.5);/* Darker shadow for product cards on hover */
    --product-text-color: #c0c0c0;            /* Text color for product titles */
    --product-share-bg: #1a1a1a;              /* Background for the share icons section */

    /* Message & Summary Backgrounds (from search.js/main.js) */
    --results-summary-bg: rgba(255, 255, 255, 0.03); /* Very subtle light overlay for summary */
    --info-bg-color: rgba(255, 215, 0, 0.1);  /* Gold-ish background for info messages (e.g., "No results") */
    --info-text-color: var(--notice-text-color); /* Use notice color for text */
    --info-border-color: #b8860b;             /* Darker gold for info message border */
    --error-bg-color: rgba(183, 28, 28, 0.15);/* Reddish background for error messages */
    --error-text-color: #ffcdd2;              /* Light red/pink text for errors for readability */
    --error-border-color: var(--accent-color);/* Error message border uses accent color */


    /* Background Image (Optional - create bg-pattern.png in public/images/) */
    /* To use, uncomment the following and ensure the image exists: */
    /* --bg-image: url('/images/bg-pattern.png'); */
    /* --bg-size: 300px 300px; */ /* Example size for a tiled pattern */
    /* --bg-position: top left; */
    /* --bg-attachment: fixed; */

    /* If no image is used, these ensure the solid background color is effective: */
     --bg-image: none; /* Explicitly set to none if not using an image */
     --bg-size: cover; /* Default, less relevant if no image */
     --bg-position: center; /* Default, less relevant if no image */
     --bg-attachment: fixed; /* Keeps background fixed during scroll, can be 'scroll' */
}

/* Thematic Scrollbar (for WebKit/Blink based browsers like Chrome, Edge, Opera, Safari) */
::-webkit-scrollbar {
  width: 10px; /* Width of the scrollbar */
}
::-webkit-scrollbar-track {
  background: #1f1f1f; /* Background of the scrollbar track, slightly lighter than main bg */
}
::-webkit-scrollbar-thumb {
  background: #424242; /* Color of the scrollbar thumb */
  border-radius: 5px; /* Rounded corners for the thumb */
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-color); /* Thumb color on hover, using accent */
}

/* Firefox scrollbar theming (more limited) */
/* You might need to enable layout.css.scrollbar-colors.enabled in about:config for full effect */
html {
  scrollbar-color: var(--accent-color) #1f1f1f; /* thumb color, track color */
  scrollbar-width: thin; /* Or 'auto' or 'none' */
}