/* ============================================================
   base.css — Global color tokens and foundational styles

   To re-theme: change the six values under "Brand tuning".
   Everything else derives from them.
   ============================================================ */

:root {
  /* ── Brand tuning ── */
  --primary-hue:        152;
  --primary-sat:        45%;
  --primary-light:      35%;

  --secondary-hue:      38;
  --secondary-sat:      80%;
  --secondary-light:    50%;

  /* ── Primary scale ── */
  --color-primary:          hsl(var(--primary-hue), var(--primary-sat), var(--primary-light));
  --color-primary-dark-1:   hsl(var(--primary-hue), var(--primary-sat), calc(var(--primary-light) - 8%));
  --color-primary-dark-2:   hsl(var(--primary-hue), var(--primary-sat), calc(var(--primary-light) - 16%));
  --color-primary-dark-3:   hsl(var(--primary-hue), var(--primary-sat), calc(var(--primary-light) - 24%));
  --color-primary-light-1:  hsl(var(--primary-hue), var(--primary-sat), calc(var(--primary-light) + 10%));
  --color-primary-light-2:  hsl(var(--primary-hue), var(--primary-sat), calc(var(--primary-light) + 20%));
  --color-primary-bg:       hsl(var(--primary-hue), var(--primary-sat), 95%);

  /* ── Secondary scale ── */
  --color-secondary:          hsl(var(--secondary-hue), var(--secondary-sat), var(--secondary-light));
  --color-secondary-dark-1:   hsl(var(--secondary-hue), var(--secondary-sat), calc(var(--secondary-light) - 8%));
  --color-secondary-dark-2:   hsl(var(--secondary-hue), var(--secondary-sat), calc(var(--secondary-light) - 16%));
  --color-secondary-light-1:  hsl(var(--secondary-hue), var(--secondary-sat), calc(var(--secondary-light) + 10%));
  --color-secondary-light-2:  hsl(var(--secondary-hue), var(--secondary-sat), calc(var(--secondary-light) + 20%));
  --color-secondary-bg:       hsl(var(--secondary-hue), var(--secondary-sat), 95%);

  /* ── Backgrounds ── */
  --color-bg:               hsl(var(--primary-hue), 10%, 96%);
  --color-bg-alt:           hsl(var(--primary-hue), 10%, 93%);

  /* ── Text on backgrounds ── */
  --color-on-bg:             hsl(var(--primary-hue), 20%, 15%);
  --color-on-bg-muted:       hsl(var(--primary-hue), 8%, 35%);

  /* ── CTA buttons ── */
  --color-cta-bg:            hsl(32, 90%, 50%);
  --color-cta-bg-hover:      hsl(30, 100%, 40%);
  --color-cta-text:          hsl(32, 47%, 95%);

  /* ── Surfaces (cards, menus, list items — white, sits above bg) ── */
  --color-surface:          #ffffff;
  --color-surface-border:   hsl(var(--primary-hue), 5%, 90%);

  /* ── Text on surfaces ── */
  --color-on-surface:        hsl(var(--primary-hue), 10%, 12%);
  --color-on-surface-muted:  hsl(var(--primary-hue), 8%, 30%);
  --color-on-surface-subtle: hsl(var(--primary-hue), 5%, 48%);
  --color-on-surface-faint:  hsl(var(--primary-hue), 3%, 67%);

  /* ── Dark surfaces (navbar, footer) ── */
  --color-surface-dark:     hsl(var(--primary-hue), 20%, 8%);
  --color-surface-darker:   hsl(var(--primary-hue), 25%, 5%);
  --color-on-dark:          hsl(var(--primary-hue), 10%, 90%);
  --color-on-dark-muted:    hsl(var(--primary-hue), 10%, 70%);

  /* ── Text on secondary-colored backgrounds ── */
  --color-on-secondary:       hsl(var(--secondary-hue), 40%, 20%);
  --color-on-secondary-muted: hsl(var(--secondary-hue), 40%, 85%);

  /* ── Text on primary backgrounds ── */
  --color-on-primary:        hsl(var(--primary-hue), 40%, 95%);
  --color-on-primary-muted:  hsl(var(--primary-hue), 40%, 85%);
  --color-on-primary-subtle: hsl(var(--primary-hue), 30%, 72%);

  /* ── Hero ── */
  --color-hero-bg:          var(--color-primary);

  /* ── Status / Goal progress ── */
  --color-status-achieved:  hsl(142, 85%, 36%);
  --color-status-close:     hsl(36,  95%, 47%);
  --color-status-partial:   hsl(40,  88%, 60%);
  --color-status-none:      hsl(0,    0%, 76%);
  --color-status-over:      hsl(4,   68%, 52%);
  --color-on-status-none:   hsl(0,    0%, 40%);
}

/* ============================================================
   Base — cascades to all page content.
   Navbar, hero, footer override with their own tokens.
   ============================================================ */

body {
  background-color: var(--color-bg);
  color: var(--color-on-bg);
}

/* ============================================================
   Navbar — overrides Bulma .navbar.is-black
   Loaded after bulma.min.css so same-specificity wins.
   ============================================================ */

/* Full-width background wrapper */
.navbar-wrapper {
  background-color: var(--color-primary-dark-2);
}

.navbar.is-black {
  background-color: var(--color-primary-dark-2);
}

.navbar.is-black .navbar-brand > .navbar-item {
  color: hsl(50, 80%, 48%);
  font-weight: 700;
}

.navbar.is-black .navbar-item,
.navbar.is-black .navbar-link {
  color: var(--color-on-dark);
}

.navbar.is-black .navbar-item:hover,
.navbar.is-black .navbar-item:focus,
.navbar.is-black .navbar-link:hover,
.navbar.is-black .navbar-link:focus {
  background-color: var(--color-primary-dark-1);
  color: var(--color-on-dark);
}

/* Burger icon lines */
.navbar.is-black .navbar-burger span {
  background-color: var(--color-on-dark);
}

/* Dropdown — is a surface */
.navbar.is-black .navbar-dropdown {
  background-color: var(--color-surface);
  border-top: 2px solid var(--color-primary);
  padding-top: 0;
  padding-bottom: 0;
}

.navbar.is-black .navbar-dropdown .navbar-item {
  color: var(--color-on-surface);
}

.navbar.is-black .navbar-dropdown .navbar-item:hover {
  background-color: var(--color-bg-alt);
  color: var(--color-on-surface);
}

.navbar.is-black .navbar-divider {
  background-color: var(--color-on-surface-faint);
  --bulma-navbar-divider-height: 1px;
  margin: 0;
}

/* Mobile menu */
@media screen and (max-width: 1023px) {
  .navbar.is-black .navbar-menu.is-active {
    background-color: var(--color-primary-dark-2);
  }
}

/* ============================================================
   Page hero — simple centered title on primary background
   Used by /templates, /about, and similar content pages.
   ============================================================ */

.page-hero {
  background-color: var(--color-hero-bg);
  padding: 14px 20px;
  text-align: center;
}

.page-hero h1 {
  color: var(--color-on-primary);
  font-size: 14px;
  font-weight: 700;
  margin: 0;
}

@media (min-width: 769px) {
  .page-hero {
    padding: 3rem 1.5rem;
  }

  .page-hero h1 {
    font-size: 2.5rem;
  }
}

/* ============================================================
   Buttons — override Bulma semantic colours with brand tokens
   ============================================================ */

/* CTA button — use this class for primary call-to-action buttons.
   Relies on --color-cta-bg, --color-cta-bg-hover, --color-cta-text.
   Paired with Bulma's .button for shape/sizing. Double-class selector
   beats Bulma's single-class .button rules. */
.button.cta-button {
  background-color: var(--color-cta-bg);
  color: var(--color-cta-text);
  border: 1px solid transparent;
}

.button.cta-button:hover,
.button.cta-button:focus {
  background-color: var(--color-cta-bg-hover);
  color: var(--color-cta-text);
  border-color: transparent;
}

/* ============================================================
   Footer — overrides Bulma .footer
   ============================================================ */

.footer {
  background-color: var(--color-primary-dark-3);
  color: var(--color-on-dark-muted);
}

.footer a {
  color: var(--color-on-dark);
}

.footer a:hover {
  color: var(--color-on-primary);
}

.footer .subtitle {
  color: var(--color-on-dark);
}