/* ==========================================================================
   Brand Design Tokens
   Generated for: Harmony Health & Lifestyle
   Template slug: harmony

   NOTE: filename intentionally left as `brand-slug-brand.css` (the unreplaced "slug" scaffold
   placeholder) - App.razor (line 35) is this file's only reference, and this exact link was
   broken once already in this project (Plan 01-02 fixed a stale `css/harmony-brand.css`
   reference). A rename buys nothing functionally (only the filename's cosmetics change, not
   the tokens inside it) and reintroduces the same fragile single-reference-link failure mode
   for zero benefit. Deliberately not renamed - see 04-RESEARCH.md / 04-01-PLAN.md.
   ========================================================================== */

:root {
    /* ---- Primary Palette ----
       Sourced 2026-08-05 via getComputedStyle sampling of harmonyhealthandlifestyle.com
       (Amy's live Beacons.ai page) - see 04-RESEARCH.md Live Reconnaissance Findings. */
    --brand-primary: #0e172c;       /* SOURCED - live button/link background (deep navy) */
    --brand-primary-dark: #22345c;  /* ADAPTATION - no distinct hover/active shade was live-
                                        sampled; a lighter navy keeps hover feedback visible
                                        since the base navy is already near-black. Also feeds
                                        .hero-section's gradient end-stop (site.css) and
                                        .btn-accent:focus-visible's outline color. */
    --brand-accent: #fec7d7;        /* SOURCED - live button/link text/accent color (blush pink) */

    /* ---- Background Gradient ----
       ADAPTATION - Amy's real page background is an uploaded blurred photo/PNG asset on Beacons
       (.PageFrameWrapper), not literal CSS gradient stops (confirmed via getComputedStyle - see
       04-RESEARCH.md). These tokens approximate the visual read (soft blush-to-lavender blur) for
       CSS use. --brand-gradient-start reuses the sourced blush swatch. --brand-gradient-end was
       revised from an earlier unwired/unverified approximation (#c9b6e4) to a WCAG-verified value
       (#ecdcf5) generated by a /od design-first pass (2026-08-05, see the pink-dominant-surfaces
       artifact) when wiring the gradient into .hero-section - navy text on this lavender clears
       13.69:1, independently recomputed and confirmed. */
    --brand-gradient-start: #fec7d7;
    --brand-gradient-end: #ecdcf5;

    /* ---- Pink-Dominant Surface Tokens (added via /od design-first pass, 2026-08-05) ----
       Fixes a visual-hierarchy mismatch found during operator review: --brand-primary (navy) was
       used for large surfaces (navbar/hero/dark-CTA backgrounds) while --brand-accent (pink) was
       reserved for small button/link highlights - inverted from the source, where blush pink is
       the DOMINANT field color and navy is the smaller-footprint accent. These are ADAPTATIONS
       (not directly sampled), generated by /od with WCAG AA contrast verified against navy text
       (independently recomputed, not trusted from the artifact alone):
         navy #0e172c on pink-light #fedde7 -> 14.19:1
         navy-muted #33405c on pink #fec7d7 ->  7.08:1 (body text on the pink hero/CTA surfaces) */
    --brand-surface-pink-light: #fedde7;
    --brand-navy-muted: #33405c;

    /* ---- Neutral Palette ----
       --brand-dark is a separate neutral used site-wide for .section-dark / hero-gradient starts -
       live recon sampled exactly one distinct navy value (mapped above to --brand-primary), so
       changing --brand-dark too would invent an unsourced second near-black tone rather than adapt
       a sourced one. --brand-white/--brand-text-light were revised from literal pure #ffffff to a
       near-white off-white (operator direction, 2026-08-05: no pure white or pure black anywhere in
       the palette - harsh pure white/black reads less premium and can cause halation against the
       saturated pink/navy brand colors). #1a1a2e/#1a1a1a (--brand-dark/--brand-text-dark) were
       already off-black, no change needed there. The luminance delta between #ffffff and #fdfcfb is
       negligible (<0.5%), so no WCAG contrast ratio computed anywhere in this codebase materially
       changes - re-verified for the pink-dominant surface tokens above (navy-on-white-adjacent
       pairings stay within 0.02 of their previously computed ratios). */
    --brand-dark: #1a1a2e;
    --brand-charcoal: #2c2c2c;
    --brand-gray: #6c757d;
    --brand-light: #f8f9fa;
    --brand-white: #fdfcfb;

    /* ---- Text Colors ---- */
    --brand-text-dark: #1a1a1a;
    --brand-text-muted: #6c6c6c;
    --brand-text-light: #fdfcfb;

    /* ---- Typography ----
       JUDGMENT CALL, not sourced: live sampling of harmonyhealthandlifestyle.com's own UI chrome
       found a system-font stack (-apple-system, "Segoe UI", Roboto, ...), a Beacons platform
       default (free-tier Beacons doesn't let a creator pick a custom webfont for page chrome),
       not a deliberate choice by Amy - there is no distinctive "Amy's brand font" to source for
       body copy. Inter is kept as a reasonable, already-implemented professional sans-serif
       rather than copying Beacons' generic default. See 04-RESEARCH.md Unknown #4. */
    --brand-font-heading: 'Inter', sans-serif;
    --brand-font-body: 'Inter', sans-serif;

    /* ---- Spacing ---- */
    --brand-section-padding: 4rem 0;
    --brand-section-padding-sm: 2.5rem 0;

    /* ---- Borders & Radius ---- */
    --brand-radius: 0.5rem;
    --brand-radius-lg: 1rem;

    /* ---- Shadows ---- */
    --brand-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    --brand-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);

    /* ---- Bootstrap Overrides ---- */
    --bs-primary: var(--brand-primary);
    --bs-primary-rgb: 14, 23, 44;   /* decimal RGB of --brand-primary (#0e172c) - was previously
                                        stale (37, 99, 235 / #2563eb), matching none of this
                                        block's three color tokens even before this plan */
    --bs-link-color: var(--brand-primary);
    --bs-link-hover-color: var(--brand-primary-dark);
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

.skip-link {
    position: absolute;
    top: -40px;
    left: 1rem;
    background: var(--brand-primary);
    color: var(--brand-text-light);
    padding: 0.5rem 1rem;
    z-index: 9999;
    border-radius: 0 0 var(--brand-radius) var(--brand-radius);
    transition: top 0.2s;
}

.skip-link:focus {
    top: 0;
    color: var(--brand-text-light);
}

/* ==========================================================================
   Button Overrides
   ========================================================================== */

.btn-primary {
    --bs-btn-bg: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-bg: var(--brand-primary-dark);
    --bs-btn-hover-border-color: var(--brand-primary-dark);
    --bs-btn-active-bg: var(--brand-primary-dark);
    --bs-btn-active-border-color: var(--brand-primary-dark);
}

.btn-outline-primary {
    --bs-btn-color: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-bg: var(--brand-primary);
    --bs-btn-hover-border-color: var(--brand-primary);
    --bs-btn-active-bg: var(--brand-primary-dark);
    --bs-btn-active-border-color: var(--brand-primary-dark);
}

.btn-accent {
    background-color: var(--brand-accent);
    border-color: var(--brand-accent);
    color: var(--brand-text-dark);
    font-weight: 600;
}

.btn-accent:hover {
    filter: brightness(0.9);
    color: var(--brand-text-dark);
}