/* Bloom design tokens — single source of truth for app colors.
   Link before app-shell.css (app-shell @imports this file).
   Tailwind CDN palette in templates/partials/tailwind_config.html must match --bloom-color-* below. */

:root {
  /* ---- Raw palette ---- */
  --bloom-color-navy: #091423;
  --bloom-color-light-grey: #f6f3ec;
  --bloom-color-button: #133817;
  --bloom-color-button-dark: #0c2610;
  --bloom-color-white: #ffffff;
  --bloom-color-black: #000000;
  --bloom-color-accent-blue: #9ebbe6;
  --bloom-color-danger: #7f1d1d;
  --bloom-color-danger-hover: #991b1b;
  --bloom-color-error: #b91c1c;
  --bloom-color-success: #3d7a4a;
  --bloom-color-success-dark: #2d5a3d;
  --bloom-color-brand-green: #133817;
  --bloom-color-brand-green-dark: #0c2610;
  --bloom-color-results-pane: #dbdbdd;

  /* RGB components for alpha blends */
  --bloom-rgb-navy: 9, 20, 35;
  --bloom-rgb-light-grey: 246, 243, 236;

  /* ---- Semantic tokens (light theme) ---- */
  --bloom-bg-page: var(--bloom-color-light-grey);
  --bloom-bg-surface: var(--bloom-color-white);
  --bloom-bg-input: var(--bloom-bg-surface);
  --bloom-bg-overlay: rgba(var(--bloom-rgb-navy), 0.5);
  --bloom-bg-hover: rgba(var(--bloom-rgb-navy), 0.08);
  --bloom-bg-hover-subtle: rgba(var(--bloom-rgb-navy), 0.06);
  --bloom-bg-hover-medium: rgba(var(--bloom-rgb-navy), 0.15);
  --bloom-bg-tooltip: rgba(var(--bloom-rgb-navy), 0.92);

  --bloom-text-primary: var(--bloom-color-navy);
  --bloom-text-strong: rgba(var(--bloom-rgb-navy), 0.95);
  --bloom-text-muted: rgba(var(--bloom-rgb-navy), 0.85);
  --bloom-text-subtle: rgba(var(--bloom-rgb-navy), 0.8);
  --bloom-text-faint: rgba(var(--bloom-rgb-navy), 0.75);
  --bloom-text-disabled: rgba(var(--bloom-rgb-navy), 0.7);
  --bloom-text-placeholder: rgba(var(--bloom-rgb-navy), 0.5);
  --bloom-text-on-accent: var(--bloom-color-light-grey);
  --bloom-text-on-tooltip: var(--bloom-color-light-grey);
  --bloom-text-title: var(--bloom-accent);

  --bloom-border: rgba(var(--bloom-rgb-navy), 0.3);
  --bloom-border-subtle: rgba(var(--bloom-rgb-navy), 0.18);
  --bloom-border-faint: rgba(var(--bloom-rgb-navy), 0.15);
  --bloom-border-light: rgba(var(--bloom-rgb-navy), 0.12);
  --bloom-border-muted: rgba(var(--bloom-rgb-navy), 0.2);
  --bloom-border-focus: rgba(var(--bloom-rgb-navy), 0.55);
  --bloom-border-emphasis: rgba(var(--bloom-rgb-navy), 0.45);
  --bloom-border-underline: rgba(var(--bloom-rgb-navy), 0.5);

  /* Light-mode actions match the Superbloom Geographics title green */
  --bloom-accent: var(--bloom-color-brand-green);
  --bloom-accent-hover: var(--bloom-color-brand-green-dark);
  --bloom-nav-brand: var(--bloom-color-brand-green);
  --bloom-nav-brand-hover: var(--bloom-color-success-dark);

  --bloom-shadow-sm: 0 2px 8px rgba(var(--bloom-rgb-navy), 0.08);
  --bloom-shadow-md: 0 4px 12px rgba(var(--bloom-rgb-navy), 0.12);
  --bloom-shadow-lg: 0 12px 40px rgba(var(--bloom-rgb-navy), 0.25);
  --bloom-shadow-tooltip: 0 2px 8px rgba(var(--bloom-rgb-navy), 0.18);

  --bloom-control-border-color: var(--bloom-border);
  --bloom-control-border-color-focus: var(--bloom-border-focus);
  --bloom-bg-checkbox: var(--bloom-bg-surface);
  --bloom-checkbox-checked-bg: var(--bloom-accent);
  --bloom-radio-checked-dot: var(--bloom-accent);
}

/* ---- Dark theme ---- */
[data-theme='dark'] {
  color-scheme: dark;

  --bloom-color-results-pane: #484848;

  --bloom-rgb-navy: 224, 224, 224;
  --bloom-rgb-light-grey: 60, 60, 60;

  --bloom-bg-page: #3c3c3c;
  --bloom-bg-surface: #3c3c3c;
  --bloom-bg-input: #282828;
  --bloom-bg-overlay: rgba(0, 0, 0, 0.55);
  --bloom-bg-hover: rgba(255, 255, 255, 0.08);
  --bloom-bg-hover-subtle: rgba(255, 255, 255, 0.05);
  --bloom-bg-hover-medium: rgba(255, 255, 255, 0.12);
  --bloom-bg-tooltip: rgba(0, 0, 0, 0.92);

  --bloom-text-primary: #e0e0e0;
  --bloom-text-strong: rgba(224, 224, 224, 0.95);
  --bloom-text-muted: rgba(224, 224, 224, 0.88);
  --bloom-text-subtle: rgba(224, 224, 224, 0.82);
  --bloom-text-faint: rgba(224, 224, 224, 0.76);
  --bloom-text-disabled: rgba(224, 224, 224, 0.62);
  --bloom-text-placeholder: rgba(224, 224, 224, 0.48);
  --bloom-text-on-accent: #3c3c3c;
  --bloom-text-on-tooltip: #e0e0e0;

  --bloom-border: rgba(255, 255, 255, 0.18);
  --bloom-border-subtle: rgba(255, 255, 255, 0.12);
  --bloom-border-faint: rgba(255, 255, 255, 0.1);
  --bloom-border-light: rgba(255, 255, 255, 0.08);
  --bloom-border-muted: rgba(255, 255, 255, 0.14);
  --bloom-border-focus: rgba(255, 255, 255, 0.45);
  --bloom-border-emphasis: rgba(255, 255, 255, 0.35);
  --bloom-border-underline: rgba(255, 255, 255, 0.4);

  --bloom-accent: #d4d4d4;
  --bloom-accent-hover: #eeeeee;
  --bloom-nav-brand: var(--bloom-accent);
  --bloom-nav-brand-hover: var(--bloom-accent-hover);

  --bloom-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.28);
  --bloom-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --bloom-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.45);
  --bloom-shadow-tooltip: 0 2px 8px rgba(0, 0, 0, 0.4);

  --bloom-color-success: #6b9e78;
  --bloom-color-success-dark: #3d7a4a;

  --bloom-bg-checkbox: #505050;
  --bloom-checkbox-checked-bg: var(--bloom-accent);
  --bloom-radio-checked-dot: var(--bloom-accent);
}

[data-theme='dark'] .decoration-accent,
[data-theme='dark'] .hover\:underline:hover {
  text-decoration-color: rgba(224, 224, 224, 0.65) !important;
}

[data-theme='dark'] input:-webkit-autofill,
[data-theme='dark'] input:-webkit-autofill:hover,
[data-theme='dark'] input:-webkit-autofill:focus,
[data-theme='dark'] textarea:-webkit-autofill,
[data-theme='dark'] select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--bloom-bg-input) inset;
  -webkit-text-fill-color: var(--bloom-text-primary);
  caret-color: var(--bloom-text-primary);
}

[data-theme='dark'] input::placeholder,
[data-theme='dark'] textarea::placeholder {
  color: var(--bloom-text-placeholder);
  opacity: 1;
}

[data-theme='dark'] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath stroke='%23e0e0e0' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round' d='M2.5 4.25L6 7.75l3.5-3.5'/%3E%3C/svg%3E");
}

/* Choice controls — custom grey check/radio (native + accent-color default to blue on many platforms) */
input[type='range'] {
  accent-color: var(--bloom-checkbox-checked-bg);
}

input[type='checkbox'],
input[type='radio'] {
  accent-color: var(--bloom-checkbox-checked-bg);
  -webkit-appearance: none;
  appearance: none;
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--bloom-border-emphasis);
  background-color: var(--bloom-bg-checkbox);
  cursor: pointer;
  flex-shrink: 0;
}

input[type='checkbox'] {
  border-radius: 3px;
}

input[type='radio'] {
  border-radius: 50%;
}

input[type='checkbox']:checked {
  background-color: var(--bloom-checkbox-checked-bg);
  border-color: var(--bloom-checkbox-checked-bg);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
}

[data-theme='dark'] input[type='checkbox']:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath stroke='%233c3c3c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
}

input[type='radio']:checked {
  border-color: var(--bloom-radio-checked-dot);
  background-color: var(--bloom-bg-checkbox);
  box-shadow: inset 0 0 0 0.28em var(--bloom-radio-checked-dot);
}

/* Project management add panels — Tailwind bg-white on embed markup */
[data-theme='dark'] .share-mgmt-form-panel,
[data-theme='dark'] .share-mgmt-table-shell,
[data-theme='dark'] .share-project-sites-table,
[data-theme='dark'] .project-mgmt-content .bg-white:not(input):not(select):not(textarea),
[data-theme='dark'] body.project-mgmt-embed .bg-white:not(input):not(select):not(textarea) {
  background-color: var(--bloom-bg-surface) !important;
}

[data-theme='dark'] .project-mgmt-content .bg-white\/40,
[data-theme='dark'] body.project-mgmt-embed .bg-white\/40 {
  background-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme='dark'] .share-mgmt-form-panel input,
[data-theme='dark'] .share-mgmt-form-panel select,
[data-theme='dark'] .share-mgmt-form-panel textarea,
[data-theme='dark'] input.bg-white,
[data-theme='dark'] input.bg-white\/80,
[data-theme='dark'] select.bg-white,
[data-theme='dark'] textarea.bg-white {
  background-color: var(--bloom-bg-input) !important;
}

/* ---- Tailwind utility overrides (CDN classes → tokens) ---- */
.text-navy,
.text-navy *:not(option) {
  color: var(--bloom-text-primary) !important;
}
/* Native <select> menus often keep a light OS panel; force readable option colors.
   Closed select face still uses the select element's own color token. */
select option {
  color: var(--bloom-text-primary);
  background-color: var(--bloom-bg-page);
}
.bg-navy {
  background-color: var(--bloom-text-primary) !important;
}
.border-navy {
  border-color: var(--bloom-text-primary) !important;
}

.text-light-grey {
  color: var(--bloom-color-light-grey) !important;
}
.bg-light-grey {
  background-color: var(--bloom-bg-page) !important;
}
.border-light-grey {
  border-color: var(--bloom-color-light-grey) !important;
}

.text-accent {
  color: var(--bloom-color-black) !important;
}
.bg-accent {
  background-color: var(--bloom-color-black) !important;
}
.border-accent {
  border-color: var(--bloom-color-black) !important;
}

.text-accent-dark {
  color: var(--bloom-color-black) !important;
}
.bg-accent-dark {
  background-color: var(--bloom-color-black) !important;
}
.border-accent-dark {
  border-color: var(--bloom-color-black) !important;
}

.text-button {
  color: var(--bloom-accent) !important;
}
.bg-button {
  background-color: var(--bloom-accent) !important;
}
.border-button {
  border-color: var(--bloom-accent) !important;
}

.text-button-dark {
  color: var(--bloom-accent-hover) !important;
}
.bg-button-dark {
  background-color: var(--bloom-accent-hover) !important;
}
.border-button-dark {
  border-color: var(--bloom-accent-hover) !important;
}

.text-accent-blue {
  color: var(--bloom-color-accent-blue) !important;
}
.bg-accent-blue {
  background-color: var(--bloom-color-accent-blue) !important;
}
.border-accent-blue {
  border-color: var(--bloom-color-accent-blue) !important;
}

.border-navy\/30 {
  border-color: var(--bloom-border) !important;
}
.text-navy\/60 {
  color: var(--bloom-text-faint) !important;
}
.text-navy\/70 {
  color: var(--bloom-text-disabled) !important;
}
.text-navy\/80 {
  color: var(--bloom-text-subtle) !important;
}
.bg-navy\/15 {
  background-color: var(--bloom-bg-hover-medium) !important;
}
.hover\:bg-navy\/15:hover {
  background-color: var(--bloom-bg-hover-medium) !important;
}

.decoration-accent {
  text-decoration-color: var(--bloom-color-black) !important;
}
.hover\:underline:hover {
  text-decoration-color: var(--bloom-color-black) !important;
}

.font-title {
  font-family: 'Archivo Black', sans-serif !important;
  text-transform: uppercase !important;
  color: var(--bloom-text-title) !important;
}

nav a.font-title,
nav a .font-title {
  color: var(--bloom-nav-brand) !important;
}

h1.font-title {
  color: var(--bloom-accent) !important;
}

.bloom-hero-text {
  font-size: 2rem;
  font-weight: 500;
  color: var(--bloom-text-primary);
}

/* Compact switch — shared Bloom control (see bloom_switch.js) */
.bloom-switch {
  --bloom-switch-width: 1.25rem;
  --bloom-switch-height: 0.7rem;
  --bloom-switch-pad: 0.1rem;
  --bloom-switch-thumb: calc(var(--bloom-switch-height) - (var(--bloom-switch-pad) * 2));
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.5rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0.35rem;
  background: transparent;
  color: inherit;
  cursor: pointer;
  vertical-align: middle;
}
.bloom-switch:focus {
  outline: none;
}
.bloom-switch:focus-visible {
  outline: 2px solid rgba(var(--bloom-rgb-navy), 0.4);
  outline-offset: 1px;
}
.bloom-switch-track {
  position: relative;
  display: block;
  width: var(--bloom-switch-width);
  height: var(--bloom-switch-height);
  border-radius: 999px;
  background: var(--bloom-border-muted);
  border: 1px solid var(--bloom-border-subtle);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.bloom-switch-thumb {
  position: absolute;
  top: 50%;
  left: var(--bloom-switch-pad);
  width: var(--bloom-switch-thumb);
  height: var(--bloom-switch-thumb);
  border-radius: 50%;
  background: var(--bloom-bg-surface);
  box-shadow: 0 1px 2px rgba(var(--bloom-rgb-navy), 0.28);
  transform: translateY(-50%);
  transition: left 0.15s ease;
}
.bloom-switch.is-on .bloom-switch-track,
.bloom-switch[aria-checked='true'] .bloom-switch-track {
  background: var(--bloom-accent);
  border-color: var(--bloom-accent);
}
.bloom-switch.is-on .bloom-switch-thumb,
.bloom-switch[aria-checked='true'] .bloom-switch-thumb {
  left: calc(100% - var(--bloom-switch-thumb) - var(--bloom-switch-pad));
}
.bloom-switch:disabled,
.bloom-switch.is-disabled {
  opacity: 0.4;
  cursor: default;
}
.bloom-switch.hidden {
  display: none !important;
}

/* Default app font ( .font-title overrides for headings ) */
* {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}