/* Design tokens for headspace UI. Bulma CSS variables are the source of
 * truth; these add only app-specific tokens. */
:root {
  --hs-max-width: 56rem;
  --hs-gap: 1rem;
  --hs-accent-h: 171;
  --hs-accent-s: 100%;
  --hs-accent-l: 41%;
}

/* Dark theme (default): teal accent tuned for dark backgrounds. */
[data-theme="dark"] {
  --bulma-primary-h: var(--hs-accent-h);
  --bulma-primary-s: var(--hs-accent-s);
  --bulma-primary-l: 55%;
  --bulma-link-h: var(--hs-accent-h);
  --bulma-link-s: var(--hs-accent-s);
  --bulma-link-l: 62%;
  --hs-muted-l: 60%;
}

/* Light theme: deeper accent + readable text for light backgrounds.
 * Bulma's light defaults wash out (weak grays on near-white), so we pin
 * the key text/border tokens to darker values. */
[data-theme="light"] {
  --bulma-primary-h: var(--hs-accent-h);
  --bulma-primary-s: 90%;
  --bulma-primary-l: 30%;
  --bulma-link-h: var(--hs-accent-h);
  --bulma-link-s: 90%;
  --bulma-link-l: 26%;
  --bulma-text-h: 221;
  --bulma-text-s: 22%;
  --bulma-text-l: 18%;
  --bulma-text-weak-h: 221;
  --bulma-text-weak-s: 14%;
  --bulma-text-weak-l: 34%;
  --bulma-text-strong-h: 221;
  --bulma-text-strong-s: 28%;
  --bulma-text-strong-l: 10%;
  --bulma-border-h: 221;
  --bulma-border-s: 16%;
  --bulma-border-l: 72%;
  --bulma-border-weak-h: 221;
  --bulma-border-weak-s: 16%;
  --bulma-border-weak-l: 84%;
  --bulma-scheme-main-l: 100%;
  --bulma-scheme-main-bis-l: 96%;
  --bulma-scheme-main-ter-l: 93%;
  --bulma-background-l: 95%;
  --bulma-input-border-l: 72%;
  --bulma-input-placeholder-l: 55%;
  --hs-muted-l: 40%;
}

/* Explicit muted helper: readable in both themes even where Bulma's
 * text-weak token is too faint. */
.hs-muted {
  color: hsl(221, 14%, 40%);
}
[data-theme="dark"] .hs-muted {
  color: hsl(221, 10%, 65%);
}

/* Light-theme table + tab + input legibility. */
[data-theme="light"] .table {
  color: hsl(221, 22%, 18%);
}
[data-theme="light"] .tabs a {
  color: hsl(221, 20%, 30%);
}
[data-theme="light"] .tabs li.is-active a {
  color: hsl(var(--hs-accent-h), 90%, 26%);
}
[data-theme="light"] .input::placeholder {
  color: hsl(221, 12%, 55%);
  opacity: 1;
}