/* ==========================================================================
   THEME FILE: every colour and font used on the site lives here.

   Two themes are defined below: "forest" and "ocean".

   WHICH THEME A VISITOR SEES
   Visitors switch themes with the button in the header, and their choice
   is remembered. Before they choose, the inline script in each page's
   <head> follows the device setting: dark mode gets forest, otherwise
   ocean. The "html:not([data-theme])" selector below is only a fallback
   for browsers with JavaScript turned off.

   Small accent-coloured text (labels, links) uses the darker
   "--accent-text" / "--accent-2-text" values so it passes WCAG AA
   (4.5:1) on the light backgrounds. The brighter accents are used for
   buttons and large shapes, always with dark text on top.
   ========================================================================== */

/* --------------------------------------------------------------------------
   THEME B: OCEAN (light and airy)
   -------------------------------------------------------------------------- */
html:not([data-theme]), /* no-JavaScript fallback */
[data-theme="ocean"] {
  --theme-name: "ocean";

  /* Fonts */
  --font-heading: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --heading-weight: 700;
  --heading-tracking: -0.02em;

  /* Page and section backgrounds */
  --bg-page: #F2F9FB;
  --bg-section-a: #F2F9FB;   /* pale aqua */
  --bg-section-b: #FBF6EE;   /* warm sandy off-white */
  --bg-section-c: #E3F2F6;   /* deeper aqua */
  --bg-hero: #E3F2F6;
  --bg-header: rgba(242, 249, 251, 0.94);

  /* Text on light backgrounds */
  --text: #08313D;
  --text-heading: #0B4A5C;
  --text-muted: #33606D;
  --text-hero: #08313D;
  --text-hero-muted: #33606D;
  --hero-btn-hover: #D5ECF2;   /* outline button hover in the (light) hero */
  --accent-on-hero: #A8432A;  /* small accent text in the (light) hero */

  /* Cards */
  --card-bg: #FFFFFF;
  --card-border: #CFE6EC;
  --card-shadow: 0 1px 2px rgba(8, 49, 61, 0.05), 0 8px 24px rgba(8, 49, 61, 0.06);

  /* Accents */
  --accent: #E07A5F;          /* coral: buttons, highlights, large shapes */
  --accent-hover: #EA9580;    /* lighter coral on hover keeps dark text above AA */
  --on-accent: #08313D;       /* dark text on coral buttons */
  --accent-text: #A8432A;     /* darkened coral for small text on light bg (AA) */
  --accent-soft: #FBE3DB;     /* tinted highlight background */
  --accent-2: #1A7F96;        /* teal secondary accent (icons, rules) */
  --accent-2-text: #136A7E;   /* darkened teal for small text on light bg (AA) */
  --accent-2-soft: #D5ECF2;

  /* Dark sections: footer and "where to find me" */
  --bg-dark: #0B4A5C;
  --bg-dark-card: #0F5569;
  --dark-card-border: #2A6F82;
  --text-on-dark: #F2F9FB;
  --text-on-dark-muted: #CFE6EC;
  --accent-on-dark: #F7B4A1;  /* light coral: passes AA on --bg-dark */

  /* Shape */
  --radius-card: 18px;
  --radius-btn: 999px;
  --radius-photo: 24px;
  --focus-ring: #1A7F96;
  --focus-ring-on-dark: #F7B4A1;

  /* Theme switch shows the icon of the theme it switches to */
  --switch-icon-leaf: block;
  --switch-icon-wave: none;
}

/* --------------------------------------------------------------------------
   THEME A: FOREST (matches the "Eating Well Through Cancer" slides)
   -------------------------------------------------------------------------- */
[data-theme="forest"] {
  --theme-name: "forest";

  /* Fonts */
  --font-heading: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Nunito Sans", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --heading-weight: 500;
  --heading-tracking: -0.01em;

  /* Page and section backgrounds */
  --bg-page: #E7ECE1;
  --bg-section-a: #E7ECE1;   /* sage */
  --bg-section-b: #F6F3EA;   /* cream */
  --bg-section-c: #DDE5D6;   /* deeper sage */
  --bg-hero: #1E3328;        /* deep forest green, like the title slide */
  --bg-header: rgba(231, 236, 225, 0.94);

  /* Text on light backgrounds */
  --text: #1E3328;
  --text-heading: #1E3328;
  --text-muted: #4A5D50;
  --text-hero: #F6F3EA;
  --text-hero-muted: #C9D3C5;
  --hero-btn-hover: #2A4536;   /* outline button hover in the (dark) hero */
  --accent-on-hero: #E8A77C;  /* small accent text in the (dark) hero */

  /* Cards */
  --card-bg: #F6F3EA;
  --card-border: #D6DCCD;
  --card-shadow: 0 1px 2px rgba(30, 51, 40, 0.05), 0 8px 24px rgba(30, 51, 40, 0.06);

  /* Accents */
  --accent: #E8A77C;          /* terracotta: buttons, highlights, large shapes */
  --accent-hover: #DE956A;
  --on-accent: #1E3328;
  --accent-text: #9A4A24;     /* darkened terracotta for small text on light bg (AA) */
  --accent-soft: #F3DCCB;
  --accent-2: #5E8A6C;        /* sage-green secondary accent */
  --accent-2-text: #3D6B4F;
  --accent-2-soft: #D3DEC9;

  /* Dark sections: footer and "where to find me" */
  --bg-dark: #1E3328;
  --bg-dark-card: #2A4536;
  --dark-card-border: #3A5747;
  --text-on-dark: #F6F3EA;
  --text-on-dark-muted: #C9D3C5;
  --accent-on-dark: #E8A77C;

  /* Shape */
  --radius-card: 14px;
  --radius-btn: 999px;
  --radius-photo: 18px;
  --focus-ring: #9A4A24;
  --focus-ring-on-dark: #E8A77C;

  /* Theme switch shows the icon of the theme it switches to */
  --switch-icon-leaf: none;
  --switch-icon-wave: block;
}