/* ── Themes ──────────────────────────────────────────────────────────────────
 *
 * Each theme is a single CSS block that overrides the variables defined in
 * :root (in style.css). The browser instantly applies the new values to every
 * element on the page — no JavaScript loops, no class changes on individual
 * cards.
 *
 * ── How to contribute a new theme ────────────────────────────────────────────
 *
 *  1. Copy the template block at the bottom of this file.
 *  2. Change the selector to [data-theme="your-theme-name"].
 *  3. Fill in your colour values (all variables are required).
 *  4. Add a swatch button to index.html inside .theme-swatches:
 *       <button type="button" class="theme-swatch" data-theme="your-theme-name"
 *               title="Your Theme Name" aria-label="Your Theme Name theme">
 *       </button>
 *  5. Style your swatch dot at the bottom of style.css (search "Swatch dot colours").
 *  6. Open a pull request — that's it!
 *
 * ── Available variables ───────────────────────────────────────────────────────
 *
 *  --color-primary      Main accent — links, icons, button/gradient start
 *  --color-accent       Secondary accent — hover states, button/gradient end
 *  --color-bg           Page background
 *  --color-card-bg      Card background (fills any gaps between sections)
 *  --color-surface      Card name section background
 *  --color-surface-alt  Card about & resources section background
 *  --color-text         Body and card text
 *  --color-heading      Page h1
 *  --color-icon         FontAwesome icon colour inside cards
 *  --color-link-hover   Resource link colour on hover
 *  --card-border        Full border shorthand (e.g. '1px solid #ffbc22' or 'none')
 *  --card-radius        Card corner radius (e.g. '5px' or '20px')
 *  --color-input-bg     Search bar background
 *  --color-input-text   Search bar text colour
 *  --box-shadow         Card and button drop shadow
 *
 *  Note: if your theme needs different backgrounds for the contact or resources
 *  sections, add direct overrides after your variable block, e.g.:
 *    [data-theme="your-theme"] .contact { background-color: ...; }
 *
 * ─────────────────────────────────────────────────────────────────────────── */

/* ── Candid Orange (default) ─────────────────────────────────────────────── */
/* The current theme. Defaults live in :root in style.css.                    */

/* ── Mauritius ───────────────────────────────────────────────────────────── */
/* Night mode, created by Bhavini Harchad (@bhaviniharchad) in March 2018 —   */
/* the first non-card contribution to this project. Named after the island     */
/* of Mauritius, where she is from.                                            */

[data-theme='mauritius'] {
  --color-bg: #100633;
  --color-card-bg: #100633;
  --color-surface: #1f0b6b;
  --color-surface-alt: #100633;
  --color-text: #d2d6dc;
  --color-heading: #ffbc22;
  --color-icon: #ffbc22;
  --color-link-hover: #ffbc22;
  --card-border: 1px solid #ffbc22;
  --color-input-bg: #100633;
  --color-input-text: #d2d6dc;
}

/* ── Classic ─────────────────────────────────────────────────────────────── */
/* Recreates the design of the site before the Candid Orange theme:           */
/* a sky-blue card with alternating yellow sections, rounded corners, and a   */
/* strong drop shadow.                                                         */

[data-theme='classic'] {
  --color-primary: #1da1f2;
  --color-accent: #ffe566;
  --color-bg: #fff;
  --color-card-bg: #4fc3f7;
  --color-surface: #4fc3f7;
  --color-surface-alt: #4fc3f7;
  --color-text: #333;
  --color-heading: #1da1f2;
  --color-icon: #1da1f2;
  --color-link-hover: #1582cc;
  --card-border: 2px solid #555;
  --card-radius: 18px;
  --color-input-bg: #fff;
  --color-input-text: #333;
  --box-shadow: -7px 13px 15px -3px rgba(82, 81, 85, 0.53);
}

/* Classic: contact and resources use the yellow accent */
[data-theme='classic'] .contact,
[data-theme='classic'] .resources {
  background-color: #ffe566;
  color: #333;
}

/* ── Retro ───────────────────────────────────────────────────────────────── */
/* Windows XP-inspired palette. Contributed by Riddhima Biswas (@RiddhimaBiswas) */
/* in PR #4390 — extracted and adapted to the CSS variable theme system.          */

[data-theme='retro'] {
  --color-primary: #3a6ea5;
  --color-accent: #ffee58;
  --color-bg: #bcd4f6;
  --color-card-bg: #e6e6e6;
  --color-surface: #3a6ea5;
  --color-surface-alt: #f2f2f2;
  --color-text: #000;
  --color-heading: #1a4e8a;
  --color-icon: #3a6ea5;
  --color-link-hover: #1a4e8a;
  --card-border: 2px solid #3a6ea5;
  --card-radius: 10px;
  --color-input-bg: #fff;
  --color-input-text: #000;
  --box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4);
}

/* Retro: name section has blue bg so text must be white */
[data-theme='retro'] .name,
[data-theme='retro'] .contact {
  color: #fff;
}

/* ── Template ────────────────────────────────────────────────────────────── */
/*
[data-theme="your-theme-name"] {
  --color-primary:     ;
  --color-accent:      ;
  --color-bg:          ;
  --color-card-bg:     ;
  --color-surface:     ;
  --color-surface-alt: ;
  --color-text:        ;
  --color-heading:     ;
  --color-icon:        ;
  --color-link-hover:  ;
  --card-border:       ;
  --card-radius:       ;
  --color-input-bg:    ;
  --color-input-text:  ;
  --box-shadow:        ;
}
*/