/* =========================================================
   BRAND.CSS — the site's single source of truth for colours,
   fonts, corner-roundness, and page-width options.

   RULE: nothing in any other stylesheet should hardcode a
   colour, font, or width — it should point at a name defined
   here instead. If you need a colour/width that isn't listed
   below, add it here first, then use it elsewhere — don't
   invent a one-off value in a page's own stylesheet.

   Loads FIRST, before every other stylesheet, so these values
   are available everywhere from the moment the page starts
   rendering. See functions.php, style_bsm_fn().

   Created 30 aug 2026 as part of the pre-reskin CSS
   consolidation. Reorganised into POWERS 31 aug 2026 -- each
   heading below is one dial a designer can turn. Every list
   under a POWER is every place that dial reaches. See
   tt24child_backups for the full audit this was built from
   (745 distinct colours were in use sitewide before this file
   existed).
   ========================================================= */

:root {

  /* =====================================================
     POWER: Page Background
     — All Pages
     (Sleep platform pages use their own separate Day/Night/
     Sleep background system, not this value -- see the note
     at the bottom of this file.)
     ===================================================== */
  --brand-bg: #add8e6;

  /* =====================================================
     POWER: Progress / List-Item Background
     — Assessment Progress rows (assessment-landing-page)
     — Configuration Progress rows (personalise-wellness-index,
       wellness-config, sleep-wellness-grid)
     Independent of Page Background above -- these are card/row
     fills, not the page. Added 31 aug 2026 after the lightblue
     bg test showed these rows had no background power of their
     own and were just showing the page colour through.
     ===================================================== */
  --brand-item-bg: var(--brand-white);

  /* =====================================================
     POWER: Primary Brand Colour
     — Default
     — Hover / pressed state
     ===================================================== */
  --brand-primary:      #3f7d8c;
  --brand-primary-dark: #2c5c68;

  /* =====================================================
     POWER: Body Text Colour
     — Main text
     — Muted / secondary text
     ===================================================== */
  --brand-text:       #1e2d38;
  --brand-text-muted: #5c7480;

  /* =====================================================
     POWER: Borders
     — Default hairline / divider
     ===================================================== */
  --brand-border: #d7e3e6;

  /* =====================================================
     POWER: Status Colours
     — Success
     — Warning
     — Error
     ===================================================== */
  --brand-success: #22c55e;
  --brand-warning: #f59e0b;
  --brand-error:   #dc2626;

  /* =====================================================
     POWER: Category Accent Colours (Dashboard cards)
     — Assessment
     — Ecosystem
     — Body
     — Sleep
     — Mind
     — Calendar
     — Badge resting background (before hover)
     One colour per wellness category, deliberately different
     from the main brand colour and from each other, so the
     categories stay visually distinct at a glance.
     ===================================================== */
  --brand-cat-assessment: #d35400;
  --brand-cat-ecosystem:  #e67e22;
  --brand-cat-body:       #27ae60;
  --brand-cat-sleep:      #8e44ad;
  --brand-cat-mind:       #008080;
  --brand-cat-calendar:   #457B9D;
  --brand-cat-badge-bg:   #f0f0f0;

  /* =====================================================
     POWER: Links (Dashboard)
     — Main nav: default colour
     — Main nav: hover colour
     — Utility links: hover colour
     These currently hold different values on purpose (not yet
     unified) -- named here so they can be, later, in one place.
     ===================================================== */
  --brand-link-nav:            #000000;
  --brand-link-nav-hover:      #007cba;
  --brand-link-utility-hover:  #000000;

  /* =====================================================
     POWER: Shape (corner roundness)
     — Small
     — Medium
     — Large
     — Pill
     ===================================================== */
  --brand-radius-sm:   6px;
  --brand-radius-md:   8px;
  --brand-radius-lg:   16px;
  --brand-radius-pill: 999px;

  /* =====================================================
     POWER: Typography
     — Body font
     — Heading font
     — Monospace / code font
     ===================================================== */
  --brand-font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --brand-font-heading: 'Playfair Display', serif;
  --brand-font-mono:    'SFMono-Regular', Consolas, monospace;  /* code / log display only -- not for ordinary text */

  /* =====================================================
     POWER: Page Width
     — Narrow
     — Standard
     — Wide
     ===================================================== */
  --brand-width-narrow:   600px;
  --brand-width-standard: 900px;
  --brand-width-wide:     1100px;

  /* Plain white -- not its own Power, used inside almost every
     other Power's element recipes below (button text, card
     background, badge text, etc). */
  --brand-white: #ffffff;

  /* Breakpoints — for REFERENCE ONLY. CSS variables cannot be
     used inside an @media condition (a browser limitation, not
     a choice we made) so every stylesheet must still type these
     two numbers literally in its @media rules. Keep them matched
     to what's written here: mobile = 600px, tablet = 768px. */

}


/* =========================================================
   ELEMENT MECHANICS
   The standard shapes built from the Powers above. New
   buttons/cards/modals should use one of these; existing ones
   migrate over module by module (not done by this file).
   ========================================================= */

/* ---------- ELEMENT: Buttons ---------- */
/* Six button purposes, standing in for what 531+ separately-
   invented button classes across the site were each doing on
   their own. */

.brand-btn-primary {
  background: var(--brand-primary);
  border: 2px solid var(--brand-primary);
  color: var(--brand-white);
  border-radius: var(--brand-radius-md);
  font-weight: 700;
  padding: 10px 20px;
  cursor: pointer;
}
.brand-btn-primary:hover { background: var(--brand-primary-dark); border-color: var(--brand-primary-dark); }

.brand-btn-secondary {
  background: var(--brand-white);
  border: 2px solid var(--brand-border);
  color: var(--brand-text);
  border-radius: var(--brand-radius-md);
  font-weight: 700;
  padding: 10px 20px;
  cursor: pointer;
}
.brand-btn-secondary:hover { border-color: var(--brand-primary); color: var(--brand-primary); }

.brand-btn-outline {
  background: none;
  border: 2px solid var(--brand-primary);
  color: var(--brand-primary);
  border-radius: var(--brand-radius-md);
  font-weight: 700;
  padding: 10px 20px;
  cursor: pointer;
}
.brand-btn-outline:hover { background: var(--brand-primary); color: var(--brand-white); }

.brand-btn-danger {
  background: var(--brand-error);
  border: 2px solid var(--brand-error);
  color: var(--brand-white);
  border-radius: var(--brand-radius-md);
  font-weight: 700;
  padding: 10px 20px;
  cursor: pointer;
}

.brand-btn-close {
  background: var(--brand-border);
  border: none;
  color: var(--brand-text);
  border-radius: var(--brand-radius-pill);
  width: 28px; height: 28px;
  font-weight: bold;
  cursor: pointer;
}

.brand-btn-link {
  background: none;
  border: none;
  color: var(--brand-primary);
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}


/* ---------- ELEMENT: Cards ---------- */
.brand-card {
  background: var(--brand-white);
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius-md);
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
  padding: 15px;
}


/* ---------- ELEMENT: Modals / Overlays ---------- */
.brand-modal-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(47,62,70,0.6);
  display: none;
  align-items: center; justify-content: center;
  z-index: 9999;
}
.brand-modal-overlay.active { display: flex; }
.brand-modal-box {
  background: var(--brand-white);
  border-radius: var(--brand-radius-lg);
  box-shadow: 0 15px 40px rgba(0,0,0,0.2);
  padding: 20px;
  max-width: var(--brand-width-narrow);
  width: 100%;
}


/* ---------- ELEMENT: Badges / Status Pills ---------- */
.brand-badge-success { background: var(--brand-success); color: var(--brand-white); border-radius: var(--brand-radius-pill); padding: 3px 10px; font-size: 11px; font-weight: 800; }
.brand-badge-warning { background: var(--brand-warning); color: var(--brand-white); border-radius: var(--brand-radius-pill); padding: 3px 10px; font-size: 11px; font-weight: 800; }
.brand-badge-error   { background: var(--brand-error);   color: var(--brand-white); border-radius: var(--brand-radius-pill); padding: 3px 10px; font-size: 11px; font-weight: 800; }


/* ---------- ELEMENT: Form Inputs ---------- */
.brand-input {
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius-sm);
  padding: 10px 12px;
  font-family: var(--brand-font-body);
  color: var(--brand-text);
}
.brand-input:focus { outline: none; border-color: var(--brand-primary); }


/* =========================================================
   HOW THE SLEEP PLATFORM'S DAY/NIGHT/SLEEP THEMES HOOK IN
   (worked example only — styleSleep.css keeps its own theme-
   specific values, e.g. Sleep mode's amber/black palette,
   since those are unique to that one feature, not sitewide
   brand colours. Where a sleep-mode component wants the
   ordinary brand look, it should reference these same
   --brand-* names rather than redefining its own copy.)
   ========================================================= */