/* =========================================================
   themes.css — ALL colors and fonts for hey diva live here.
   ---------------------------------------------------------
   Each theme is one block: [data-theme="name"] { ... }
   To change a color, change the hex code (#RRGGBB) here and
   it updates everywhere on the site.

   Rule: text colors must stay readable (WCAG AA contrast)
   against --color-bg AND --color-surface.
   ========================================================= */


/* ---------- FONTS (files live in the fonts/ folder) ---------- */

@font-face {
  font-family: "Fredoka";
  src: url("../fonts/fredoka-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Fredoka";
  src: url("../fonts/fredoka-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "VT323";
  src: url("../fonts/vt323-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}


/* ---------- PAINT TOY COLORS (guestbook) ----------
   The same in every theme. Add or change colors here, then add
   a matching line to the COLORS list in js/paint.js.          */

:root {
  --paint-canvas: #FFFFFF;
  --paint-black: #000000;
  --paint-white: #FFFFFF;
  --paint-grey: #8A8A8A;
  --paint-brown: #8B5A2B;
  --paint-red: #E63946;
  --paint-orange: #FF8C1A;
  --paint-yellow: #FFD60A;
  --paint-lime: #8CE01E;
  --paint-aqua: #3EC7E6;
  --paint-blue: #2D5BFF;
  --paint-purple: #8E44FF;
  --paint-hot-pink: #FF2E93;
  --paint-bubblegum: #FF9AD5;
}


/* ---------- RANSOM NOTE TITLE FONTS (home page) ----------
   The cut-out letters cycle through these. All but the first two are
   fonts already built into computers, so nothing extra downloads.   */

:root {
  --ransom-font-1: "Fredoka", "Arial Rounded MT Bold", sans-serif;
  --ransom-font-2: "VT323", "Courier New", monospace;
  --ransom-font-3: Georgia, "Times New Roman", serif;
  --ransom-font-4: "Courier New", Courier, monospace;
  --ransom-font-5: "Arial Black", Impact, "Helvetica Neue", sans-serif;
  --ransom-font-6: "Trebuchet MS", Verdana, sans-serif;
}


/* ---------- PAGE TITLE FONTS (effects.css section 16) ----------
   Built into computers, so nothing extra downloads.            */

:root {
  --font-chrome: "Arial Black", Impact, "Helvetica Neue", sans-serif;
  --font-script: "Snell Roundhand", "Brush Script MT", "Segoe Script", cursive;
}


/* ---------- THEME 1: BUBBLEGUM POP (the default) ----------
   ":root" makes this the fallback if no theme is chosen.   */

:root,
[data-theme="bubblegum"] {
  /* fonts */
  --font-heading: "Fredoka", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --font-body: "Trebuchet MS", Verdana, system-ui, sans-serif;
  --font-pixel: "VT323", "Courier New", monospace;

  /* page + boxes */
  --color-bg: #FFE4F2;          /* page background */
  --color-surface: #FFFFFF;     /* boxes and cards */
  --color-text: #3D0A2B;        /* main text */
  --color-heading: #B0186E;     /* small headings, dates */
  --color-link: #B0186E;
  --color-link-hover: #7A1FD1;

  /* decoration only — never use these for text */
  --color-accent: #FF4FA3;      /* box borders, sparkles */
  --color-accent-2: #7A1FD1;    /* second border color, butterflies */

  /* gel buttons (nav + theme switcher) */
  --gel-top: #FFFFFF;
  --gel-bottom: #FF8CC6;
  --gel-text: #3D0A2B;
  --gel-border: #B0186E;

  /* WordArt title */
  --wordart-start: #E0157A;
  --wordart-end: #7A1FD1;
  --wordart-shadow: #3D0A2B;

  /* ticker strip */
  --ticker-bg: #3D0A2B;
  --ticker-text: #FFE4F2;

  /* keyboard focus outline */
  --color-focus: #3D0A2B;

  /* white edge around the About sticker photo */
  --sticker-outline: #FFFFFF;

  /* tells the browser this is a light theme (scrollbars etc.) */
  color-scheme: light;
}


/* ---------- THEME 2: FROSTED LIP GLOSS ---------- */

[data-theme="frosted"] {
  --font-heading: "Fredoka", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --font-body: "Trebuchet MS", Verdana, system-ui, sans-serif;
  --font-pixel: "VT323", "Courier New", monospace;

  --color-bg: #EDEBF7;
  --color-surface: #FFFFFF;
  --color-text: #1E1B3A;
  --color-heading: #5B2BB5;
  --color-link: #5B2BB5;
  --color-link-hover: #A3166B;

  --color-accent: #B9A7FF;
  --color-accent-2: #D6338F;

  --gel-top: #FFFFFF;
  --gel-bottom: #C9BBFF;
  --gel-text: #1E1B3A;
  --gel-border: #5B2BB5;

  --wordart-start: #8E44FF;
  --wordart-end: #D6338F;
  --wordart-shadow: #1E1B3A;

  --ticker-bg: #1E1B3A;
  --ticker-text: #EDEBF7;

  --color-focus: #1E1B3A;

  /* white edge around the About sticker photo */
  --sticker-outline: #FFFFFF;
  color-scheme: light;
}


/* ---------- THEME 3: MIDNIGHT BUTTERFLY (dark) ---------- */

[data-theme="midnight"] {
  --font-heading: "Fredoka", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --font-body: "Trebuchet MS", Verdana, system-ui, sans-serif;
  --font-pixel: "VT323", "Courier New", monospace;

  --color-bg: #1A0B2E;
  --color-surface: #2A1548;
  --color-text: #F7E9FF;
  --color-heading: #FF9AD5;
  --color-link: #FF9AD5;
  --color-link-hover: #7DF9FF;

  --color-accent: #FF9AD5;
  --color-accent-2: #7DF9FF;

  --gel-top: #4A2A78;
  --gel-bottom: #2A1548;
  --gel-text: #F7E9FF;
  --gel-border: #FF9AD5;

  --wordart-start: #FF9AD5;
  --wordart-end: #7DF9FF;
  --wordart-shadow: #000000;

  --ticker-bg: #F7E9FF;
  --ticker-text: #1A0B2E;

  --color-focus: #7DF9FF;

  /* white edge around the About sticker photo */
  --sticker-outline: #F7E9FF;
  color-scheme: dark;
}


/* ---------- THEME 4: SOUR APPLE FLIP PHONE ---------- */

[data-theme="sour-apple"] {
  --font-heading: "Fredoka", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --font-body: "Trebuchet MS", Verdana, system-ui, sans-serif;
  --font-pixel: "VT323", "Courier New", monospace;

  --color-bg: #F3FFD6;
  --color-surface: #FFFFFF;
  --color-text: #1F3300;
  --color-heading: #2E6B00;
  --color-link: #2E6B00;
  --color-link-hover: #A3166B;

  --color-accent: #7BC70A;
  --color-accent-2: #FF66C4;

  --gel-top: #FFFFFF;
  --gel-bottom: #C8FF6A;
  --gel-text: #1F3300;
  --gel-border: #2E6B00;

  --wordart-start: #3C8C00;
  --wordart-end: #C2187A;
  --wordart-shadow: #1F3300;

  --ticker-bg: #1F3300;
  --ticker-text: #F3FFD6;

  --color-focus: #1F3300;

  /* white edge around the About sticker photo */
  --sticker-outline: #FFFFFF;
  color-scheme: light;
}


/* ---------- THEME 5: BABY BLUE BLING ---------- */

[data-theme="baby-blue"] {
  --font-heading: "Fredoka", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --font-body: "Trebuchet MS", Verdana, system-ui, sans-serif;
  --font-pixel: "VT323", "Courier New", monospace;

  --color-bg: #DFF4FF;
  --color-surface: #FFFFFF;
  --color-text: #0B2545;
  --color-heading: #0B5CAD;
  --color-link: #0B5CAD;
  --color-link-hover: #A3166B;

  --color-accent: #66D9FF;
  --color-accent-2: #FF8FD8;

  --gel-top: #FFFFFF;
  --gel-bottom: #9BE6FF;
  --gel-text: #0B2545;
  --gel-border: #0B5CAD;

  --wordart-start: #1565C0;
  --wordart-end: #C2187A;
  --wordart-shadow: #0B2545;

  --ticker-bg: #0B2545;
  --ticker-text: #DFF4FF;

  --color-focus: #0B2545;

  /* white edge around the About sticker photo */
  --sticker-outline: #FFFFFF;
  color-scheme: light;
}