/*
 * Central color palette for the landing page.
 * Change colors here; layout CSS files should not contain hard-coded color values.
 */
:root {
  /* Main theme */
  --background: #f7f5f0;
  --text: #242628;
  --muted: #62615d;
  --accent: #b83c32;
  --accent-hover: #982f27;
  --surface: #ffffff;
  --border: #ddd9d1;
  --soft-surface: #eeebe4;

  /* Common states */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-transparent: transparent;
  --color-selection-background: #e8c8c1;
  --color-outline-border: #bdb9b1;
  --color-outline-hover-background: #ebe7df;
  --color-dark-hover: #3f4244;
  --color-light-hover: #e4dfd4;
  --color-outline-light-border: #696a69;
  --color-outline-light-hover: #393c3d;
  --color-trust-divider: #b9b4ab;

  /* Hero note */
  --color-note-background: #ece8df;
  --color-note-border: #dcd5c9;
  --color-note-divider: #cfc7ba;

  /* About / reviews */
  --color-experience-divider: #ccc6ba;
  --color-featured-review-background: #eee5db;
  --color-featured-review-border: #e1d7cb;
  --color-result-badge-border: #d2bfb0;
  --color-review-body: #4f4e4a;
  --color-avatar-background: #dccbbb;
  --color-review-divider: #d4cabe;

  /* Footer */
  --color-footer-muted: #b6b6af;
  --color-footer-accent: #c4b4a4;
  --color-footer-copy: #c8c7c2;
  --color-footer-divider: #4c4e4f;
  --color-footer-link-underline: #757875;

  /* Lesson examples */
  --color-classroom-image-background: #eeece7;
  --color-classroom-board-background: #f1f2f2;
  --color-presentation-border: #e0d7c9;
  --color-presentation-background: #eee7dc;

  /* Currency switch */
  --color-currency-background: #efebe3;
  --color-currency-active-border: #ded7cc;

  /* Portrait / floating UI */
  --color-floating-border: #c66b62;
  --color-viewer-close-hover: #ded8ce;
  --color-portrait-backdrop: #e9e2d8;
  --color-portrait-border: #ddd4c7;

  /* Overlays and shadows */
  --color-overlay: rgb(20 20 20 / 0.78);
  --color-shadow-soft: rgb(36 38 40 / 0.14);
  --color-shadow-strong: rgb(36 38 40 / 0.18);

  /* Inverted surfaces and theme controls */
  --inverse-background: #242628;
  --inverse-text: #f7f5f0;
  --accent-contrast: #ffffff;
  --color-theme-track: #e8e4dc;
  --color-theme-thumb: #ffffff;
  --color-theme-icon: #6e6c67;

  /* Dark theme palette: edit these values to restyle dark mode. */
  --dark-background: #282725;
  --dark-text: #f2efea;
  --dark-muted: #c2beb7;
  --dark-accent: #d96c63;
  --dark-accent-hover: #e77b72;
  --dark-surface: #31302e;
  --dark-border: #4d4b47;
  --dark-soft-surface: #383735;
  --dark-color-selection-background: #654641;
  --dark-color-outline-border: #5b5954;
  --dark-color-outline-hover-background: #343330;
  --dark-color-dark-hover: #3e3d3a;
  --dark-color-light-hover: #e7e1d7;
  --dark-color-outline-light-border: #68655f;
  --dark-color-outline-light-hover: #32312f;
  --dark-color-trust-divider: #5b5954;
  --dark-color-note-background: #302f2d;
  --dark-color-note-border: #4b4945;
  --dark-color-note-divider: #55524e;
  --dark-color-experience-divider: #53514d;
  --dark-color-featured-review-background: #37312f;
  --dark-color-featured-review-border: #594541;
  --dark-color-result-badge-border: #76544d;
  --dark-color-review-body: #d7d2cc;
  --dark-color-avatar-background: #624941;
  --dark-color-review-divider: #5d4944;
  --dark-color-footer-muted: #bbb7b0;
  --dark-color-footer-accent: #cdb1a6;
  --dark-color-footer-copy: #d1cdc7;
  --dark-color-footer-divider: #464541;
  --dark-color-footer-link-underline: #726e68;
  --dark-color-classroom-image-background: #302f2d;
  --dark-color-classroom-board-background: #343330;
  --dark-color-presentation-border: #58443f;
  --dark-color-presentation-background: #37312f;
  --dark-color-currency-background: #363532;
  --dark-color-currency-active-border: #5c5954;
  --dark-color-floating-border: #c66c62;
  --dark-color-viewer-close-hover: #3e3d3a;
  --dark-color-portrait-backdrop: #343330;
  --dark-color-portrait-border: #4c4945;
  --dark-color-overlay: rgb(18 18 17 / 0.84);
  --dark-color-shadow-soft: rgb(0 0 0 / 0.20);
  --dark-color-shadow-strong: rgb(0 0 0 / 0.30);
  --dark-inverse-background: #20201f;
  --dark-inverse-text: #f2efea;
  --dark-accent-contrast: #211f1e;
  --dark-color-theme-track: #383735;
  --dark-color-theme-thumb: #f2efea;
  --dark-color-theme-icon: #eeeae4;

  /* Print */
  --color-print-background: #ffffff;
  --color-print-text: #000000;
}


/*
 * Dark palette.
 * Manual choice is applied with data-theme="dark" on <html>.
 * If JavaScript is unavailable, the OS preference still works as a fallback.
 */
:root[data-theme="dark"] {
  --background: var(--dark-background);
  --text: var(--dark-text);
  --muted: var(--dark-muted);
  --accent: var(--dark-accent);
  --accent-hover: var(--dark-accent-hover);
  --surface: var(--dark-surface);
  --border: var(--dark-border);
  --soft-surface: var(--dark-soft-surface);
  --color-selection-background: var(--dark-color-selection-background);
  --color-outline-border: var(--dark-color-outline-border);
  --color-outline-hover-background: var(--dark-color-outline-hover-background);
  --color-dark-hover: var(--dark-color-dark-hover);
  --color-light-hover: var(--dark-color-light-hover);
  --color-outline-light-border: var(--dark-color-outline-light-border);
  --color-outline-light-hover: var(--dark-color-outline-light-hover);
  --color-trust-divider: var(--dark-color-trust-divider);
  --color-note-background: var(--dark-color-note-background);
  --color-note-border: var(--dark-color-note-border);
  --color-note-divider: var(--dark-color-note-divider);
  --color-experience-divider: var(--dark-color-experience-divider);
  --color-featured-review-background: var(--dark-color-featured-review-background);
  --color-featured-review-border: var(--dark-color-featured-review-border);
  --color-result-badge-border: var(--dark-color-result-badge-border);
  --color-review-body: var(--dark-color-review-body);
  --color-avatar-background: var(--dark-color-avatar-background);
  --color-review-divider: var(--dark-color-review-divider);
  --color-footer-muted: var(--dark-color-footer-muted);
  --color-footer-accent: var(--dark-color-footer-accent);
  --color-footer-copy: var(--dark-color-footer-copy);
  --color-footer-divider: var(--dark-color-footer-divider);
  --color-footer-link-underline: var(--dark-color-footer-link-underline);
  --color-classroom-image-background: var(--dark-color-classroom-image-background);
  --color-classroom-board-background: var(--dark-color-classroom-board-background);
  --color-presentation-border: var(--dark-color-presentation-border);
  --color-presentation-background: var(--dark-color-presentation-background);
  --color-currency-background: var(--dark-color-currency-background);
  --color-currency-active-border: var(--dark-color-currency-active-border);
  --color-floating-border: var(--dark-color-floating-border);
  --color-viewer-close-hover: var(--dark-color-viewer-close-hover);
  --color-portrait-backdrop: var(--dark-color-portrait-backdrop);
  --color-portrait-border: var(--dark-color-portrait-border);
  --color-overlay: var(--dark-color-overlay);
  --color-shadow-soft: var(--dark-color-shadow-soft);
  --color-shadow-strong: var(--dark-color-shadow-strong);
  --inverse-background: var(--dark-inverse-background);
  --inverse-text: var(--dark-inverse-text);
  --accent-contrast: var(--dark-accent-contrast);
  --color-theme-track: var(--dark-color-theme-track);
  --color-theme-thumb: var(--dark-color-theme-thumb);
  --color-theme-icon: var(--dark-color-theme-icon);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --background: var(--dark-background);
    --text: var(--dark-text);
    --muted: var(--dark-muted);
    --accent: var(--dark-accent);
    --accent-hover: var(--dark-accent-hover);
    --surface: var(--dark-surface);
    --border: var(--dark-border);
    --soft-surface: var(--dark-soft-surface);
    --color-selection-background: var(--dark-color-selection-background);
    --color-outline-border: var(--dark-color-outline-border);
    --color-outline-hover-background: var(--dark-color-outline-hover-background);
    --color-dark-hover: var(--dark-color-dark-hover);
    --color-light-hover: var(--dark-color-light-hover);
    --color-outline-light-border: var(--dark-color-outline-light-border);
    --color-outline-light-hover: var(--dark-color-outline-light-hover);
    --color-trust-divider: var(--dark-color-trust-divider);
    --color-note-background: var(--dark-color-note-background);
    --color-note-border: var(--dark-color-note-border);
    --color-note-divider: var(--dark-color-note-divider);
    --color-experience-divider: var(--dark-color-experience-divider);
    --color-featured-review-background: var(--dark-color-featured-review-background);
    --color-featured-review-border: var(--dark-color-featured-review-border);
    --color-result-badge-border: var(--dark-color-result-badge-border);
    --color-review-body: var(--dark-color-review-body);
    --color-avatar-background: var(--dark-color-avatar-background);
    --color-review-divider: var(--dark-color-review-divider);
    --color-footer-muted: var(--dark-color-footer-muted);
    --color-footer-accent: var(--dark-color-footer-accent);
    --color-footer-copy: var(--dark-color-footer-copy);
    --color-footer-divider: var(--dark-color-footer-divider);
    --color-footer-link-underline: var(--dark-color-footer-link-underline);
    --color-classroom-image-background: var(--dark-color-classroom-image-background);
    --color-classroom-board-background: var(--dark-color-classroom-board-background);
    --color-presentation-border: var(--dark-color-presentation-border);
    --color-presentation-background: var(--dark-color-presentation-background);
    --color-currency-background: var(--dark-color-currency-background);
    --color-currency-active-border: var(--dark-color-currency-active-border);
    --color-floating-border: var(--dark-color-floating-border);
    --color-viewer-close-hover: var(--dark-color-viewer-close-hover);
    --color-portrait-backdrop: var(--dark-color-portrait-backdrop);
    --color-portrait-border: var(--dark-color-portrait-border);
    --color-overlay: var(--dark-color-overlay);
    --color-shadow-soft: var(--dark-color-shadow-soft);
    --color-shadow-strong: var(--dark-color-shadow-strong);
    --inverse-background: var(--dark-inverse-background);
    --inverse-text: var(--dark-inverse-text);
    --accent-contrast: var(--dark-accent-contrast);
    --color-theme-track: var(--dark-color-theme-track);
    --color-theme-thumb: var(--dark-color-theme-thumb);
    --color-theme-icon: var(--dark-color-theme-icon);
  }
}