/* Shared color definitions. Keep literal colors in this file only.
   Palette presets are selected by ACTIVE_THEME in site_pages/theme.py. */
:root {
  /* Current site palette: orange, green and charcoal. */
  --color-orange: #dd8067;
  --color-orange-hover: #c96c54;
  --color-green: #287a7d;
  --color-green-hover: #206265;
  --color-green-light: #c9e3e2;
  --color-charcoal: #343e43;

  /* Colors used by the other existing palette presets. */
  --color-blue: #365f91;
  --color-blue-hover: #2b4d76;
  --color-blue-light: #d0dff0;
  --color-blue-charcoal: #30363b;
  --color-forest: #34745b;
  --color-forest-hover: #295d49;
  --color-forest-light: #c6dfd2;
  --color-forest-charcoal: #243e36;
  --color-burgundy: #92505b;
  --color-burgundy-hover: #773f48;
  --color-burgundy-light: #ecd4d9;
  --color-burgundy-charcoal: #3b3332;
  --color-turquoise: #12bdb3;
  --color-turquoise-dark: #087c76;
  --color-turquoise-dark-hover: #08635e;
  --color-turquoise-hover: #0fa99f;
  --color-pink: #ef417c;
  --color-pink-hover: #df376f;
  --color-black: #101313;
  --color-black-deep: #080a0a;

  /* Neutrals, feedback and translucent colors. */
  --color-white: #fff;
  --color-ink: #30343b;
  --color-muted: #899195;
  --color-border: #e2e5e7;
  --color-border-strong: #adb5b9;
  --color-border-subtle: #e7edf0;
  --color-surface-muted: #f5f7f8;
  --color-selection: #e8e8e7;
  --color-white-soft: #eef0f1;
  --color-white-preview: #eef2f2;
  --color-danger: #b12d28;
  --color-danger-strong: #a52b20;
  --color-danger-surface: #fff1ef;
  --color-on-dark-overlay: #ffffff12;
  --color-on-dark-border-subtle: #ffffff20;
  --color-on-dark-border: #ffffff26;
  --color-on-dark-border-strong: #ffffff2e;
  --color-on-dark-border-emphasis: #ffffff40;
  --color-shadow: #0003;
  --color-backdrop: #141f2a85;
  --color-shadow-popover: #141f2a2e;
  --color-shadow-card: #141f2a12;

  /* Roles shared by all components and pages. */
  --color-brand: var(--color-charcoal);
  --color-brand-deep: var(--color-brand);
  --color-brand-text: var(--color-white-soft);
  --color-main: var(--color-green);
  --color-main-dark: var(--color-main);
  --color-main-hover: var(--color-green-hover);
  --color-main-inverse: var(--color-green-light);
  --color-main-soft: var(--color-white);
  --color-main-border: var(--color-border);
  --color-accent: var(--color-main);
  --color-accent-hover: var(--color-main-hover);
  --color-accent-dark: var(--color-main-dark);
  --color-accent-text: var(--color-white);
  --color-secondary: var(--color-main-dark);
  --color-highlight: var(--color-orange);
  --color-highlight-hover: var(--color-orange-hover);
  --color-highlight-text: var(--color-white);
  --color-navy: var(--color-ink);
  --color-text: var(--color-ink);
  --color-text-strong: var(--color-ink);
  --color-surface: var(--color-white);
  --color-surface-soft: var(--color-white);
  --radius-sm: 6px;
  --radius-md: 8px;
}

html[data-color-theme="1"] {
  --color-brand: var(--color-blue-charcoal);
  --color-main: var(--color-blue);
  --color-main-hover: var(--color-blue-hover);
  --color-main-inverse: var(--color-blue-light);
}
html[data-color-theme="2"] {
  --color-brand: var(--color-forest-charcoal);
  --color-main: var(--color-forest);
  --color-main-hover: var(--color-forest-hover);
  --color-main-inverse: var(--color-forest-light);
}
/* Preset 3 uses the current site palette defined above. */
html[data-color-theme="4"] {
  --color-brand: var(--color-burgundy-charcoal);
  --color-main: var(--color-burgundy);
  --color-main-hover: var(--color-burgundy-hover);
  --color-main-inverse: var(--color-burgundy-light);
}
/* Existing reference-image preview palette. */
html[data-color-theme="5"] {
  --color-brand: var(--color-black);
  --color-brand-deep: var(--color-black-deep);
  --color-brand-text: var(--color-white-preview);
  --color-main: var(--color-turquoise);
  --color-main-dark: var(--color-turquoise-dark);
  --color-main-hover: var(--color-turquoise-dark-hover);
  --color-main-inverse: var(--color-turquoise);
  --color-accent-hover: var(--color-turquoise-hover);
  --color-accent-text: var(--color-black);
  --color-highlight: var(--color-pink);
  --color-highlight-hover: var(--color-pink-hover);
  --color-highlight-text: var(--color-black);
}