/* ============================================================
   THEME: MINT BERRY - FIXED SELECTORS
   Primary: Mint (#20e6b4) with Black Text
   Secondary: Berry (#ff4178) with White Text
   ============================================================ */

/* -----------------------------------------------------------------
   1. SHARED VARIABLES (Raw Colors)
   These do not change regardless of light or dark mode.
   ----------------------------------------------------------------- */
:root {
  /* Mint (Primary) */
  --color-mint: #20e6b4;
  --color-mint-hover: #1aa885;
  --color-mint-focus: rgba(32, 230, 180, 0.5);
  --color-mint-text: #000000;   /* Black text on Mint for contrast */

  /* Berry (Secondary) - #ff4178 */
  --color-berry: #ff4178;
  --color-berry-hover: #ffecf1; /* Note: This is a very light color */
  --color-berry-focus: #ffa6c0; /* Light pink focus ring */
  --color-berry-text: #ffffff;
}

/* -----------------------------------------------------------------
   2. LIGHT MODE (Default & Manual Override)
   - Applies if data-theme="light" or by default (no data-theme set in light browser mode).
   ----------------------------------------------------------------- */
:root:not([data-theme=dark]),
[data-theme="light"] {
  /* --- Primary (Mint) --- */
  --pico-primary: var(--color-mint);
  --pico-primary-background: var(--color-mint);
  --pico-primary-hover: var(--color-mint-hover); /* Using a darker mint for hover */
  --pico-primary-hover: var(--color-berry-focus);
  --pico-primary-hover-background: var(--color-berry-focus);
  --pico-primary-focus: var(--color-mint-focus);
  --pico-primary-inverse: var(--color-mint-text);

  /* --- Secondary (Berry) --- */
  --pico-secondary: var(--color-berry);
  --pico-secondary-background: var(--color-berry);
  --pico-secondary-hover: var(--color-berry-hover);
  --pico-secondary-hover-background: var(--color-berry-hover);
  --pico-secondary-focus: var(--color-berry-focus);
  --pico-secondary-inverse: var(--color-berry-text);

  /* --- UI Accents --- */
  --pico-form-element-valid-border-color: var(--color-mint-hover);
  --pico-switch-checked-background-color: var(--color-mint-hover);

  /* 🎯 CUSTOM LIGHT MODE BACKGROUNDS (Your fix) */
  --pico-background-color: #eee;
  --pico-card-background-color: #fff;
  --pico-color: #000; /* Custom dark text color */
  --pico-h3-color: #333;
  --pico-contrast: var(--pico-secondary);
}


/* -----------------------------------------------------------------
   3. SYSTEM DARK MODE (Automatic)
   - Applies only if user prefers dark mode AND no data-theme attribute exists.
   ----------------------------------------------------------------- */
@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    /* --- Primary (Mint) --- */
    --pico-primary: var(--color-mint);
    --pico-primary-background: var(--color-mint);
    --pico-primary-hover: var(--color-berry); /* Corrected: Using opaque Berry for hover */
    --pico-primary-hover-background: var(--color-berry);
    --pico-primary-focus: var(--color-berry-focus);
    --pico-primary-inverse: #000;
    --pico-color: #eee;

    /* --- Secondary (Berry) --- */
    --pico-secondary: var(--color-berry);
    --pico-secondary-background: var(--color-berry);
    --pico-secondary-hover: var(--color-berry); /* Corrected: Using opaque Berry for hover */
    --pico-secondary-hover-background: var(--color-berry);
    --pico-secondary-focus: var(--color-berry-focus);
    --pico-secondary-inverse: var(--color-berry-text);
    --pico-contrast: var(--color-berry); /* Using Berry as contrast in dark mode */

    /* 👇 CRITICAL FIX: Ensure page elements revert to Pico's DARK defaults */
    --pico-background-color: #111;
    --pico-card-background-color: #191919;

    /* --- UI Accents --- */
    --pico-form-element-valid-border-color: var(--color-mint);
    --pico-switch-checked-background-color: var(--color-mint);

    --pico-h3-color: #ddd;
    --pico-contrast-hover: #444;
  }
}

/* -----------------------------------------------------------------
   4. FORCED DARK MODE (Manual Override)
   - Applies if you manually set data-theme="dark"
   ----------------------------------------------------------------- */
[data-theme="dark"] {
  /* --- Primary (Mint) --- */
  --pico-primary: var(--color-mint);
  --pico-primary-background: var(--color-mint);
  --pico-primary-hover: var(--color-berry);
  --pico-primary-hover-background: var(--color-berry);
  --pico-primary-focus: var(--color-berry-focus);
  --pico-primary-inverse: var(--color-mint-text);

  /* --- Secondary (Berry) --- */
  --pico-secondary: var(--color-berry);
  --pico-secondary-background: var(--color-berry);
  --pico-secondary-hover: var(--color-berry);
  --pico-secondary-hover-background: var(--color-berry);
  --pico-secondary-focus: var(--color-berry-focus);
  --pico-secondary-inverse: var(--color-berry-text);
  --pico-contrast: var(--color-berry);

  /* 👇 CRITICAL FIX: Ensure page elements revert to Pico's DARK defaults */
  --pico-background-color: initial;
  --pico-card-background-color: initial;
  --pico-color: initial;

  /* --- UI Accents --- */
  --pico-form-element-valid-border-color: var(--color-mint);
  --pico-switch-checked-background-color: var(--color-mint);
}