/* ============================================================================
   LUNNEMYR BRAND LAYER
   ----------------------------------------------------------------------------
   Re-skins the shared app for the Lunnemyr coaching brand by remapping design
   tokens + fonts only. No structural CSS is duplicated. Scoped to
   html[data-brand="lunnemyr"], so it is inert for North Sea Forge and is loaded
   only on the Lunnemyr deploy (build-time injection in vite.config.js, or the
   ?brand=lunnemyr dev override).

   Palette + fonts from the live www.lunnemyr.com:
     teal #536d70 · ink #1a2223 · rule #d0dbdc · ghost #f3f6f6 · white #fff
     warm accent in the maroon family · Instrument Serif + Montserrat
   ========================================================================== */

/* Fonts are self-hosted (exact .ttf from lunnemyr.com) — see site.css @font-face. */

/* --- Token remap: same variable names the whole app references, so this single
       override reskins every page. NSF ships a dark default; the Lunnemyr
       identity is light + airy, so bg/text invert and the orange "forge" accent
       ramp becomes teal. Pinned across both data-theme values (toggle hidden). */
html[data-brand="lunnemyr"]{
  --black:#ffffff;            /* page background            */
  --deep:#f8fafa;             /* alternating section bg     */
  --stone:#f3f6f6;            /* cards / panels (site ghost)*/
  --ash:#e9eeee;             /* borders / elevated edges   */

  --iron:#7a8a8b;             /* faint / hint text          */
  --drift:#5a6b6c;            /* secondary text             */
  --bone:#3a3a3a;             /* primary body text          */
  --parch:#2a3536;            /* strong body text           */
  --white:#1a2223;            /* headings / strongest ink   */

  --ember:#536d70;            /* primary accent / links     */
  --forge:#536d70;
  --flame:#6a8a8e;            /* hover / brighter accent    */
  --gold:#536d70;             /* helm + tool accent         */
  --coal:#3f5457;             /* deep accent                */

  --sea:#eef3f3;
  --frost:#b9c8c9;
  --brine:#6a8a8e;

  --warm:#b0524a;             /* highlight, in the site's maroon family */

  --font-display:'Instrument Serif', Georgia, serif;
  --font-body:'Montserrat', system-ui, sans-serif;
  --font-reading:'Montserrat', system-ui, sans-serif;
}

/* The grain overlay reads as dirt on a light coaching surface — drop it. */
html[data-brand="lunnemyr"] body::after{ display:none; }

/* The Lunnemyr landing is the marketing page, injected into #page-home by
   brand.js. Hide the original Forge home content until the .lun-home wrapper is
   in place, so there is no flash of Forge content on first paint. */
html[data-brand="lunnemyr"] #page-home > :not(.lun-home){ display:none !important; }

/* (.nav-brand / logo typography is owned entirely by site.css — a second size
   rule here would shadow it at equal specificity and silently win, so it lives
   in one place.) */
html[data-brand="lunnemyr"] .section-title,
html[data-brand="lunnemyr"] .hero-title,
html[data-brand="lunnemyr"] .test-header h1,
html[data-brand="lunnemyr"] h1, html[data-brand="lunnemyr"] h2{
  text-transform:none; letter-spacing:0.01em;
}
html[data-brand="lunnemyr"] [class*="eyebrow"],
html[data-brand="lunnemyr"] .section-label{
  font-family:var(--font-body); font-weight:600; letter-spacing:0.18em; color:var(--ember);
}

/* Buttons: solid teal, the site's signature CTA. */
html[data-brand="lunnemyr"] .btn-forge,
html[data-brand="lunnemyr"] .nav-cta{
  background:var(--ember); color:#ffffff; border-color:var(--ember);
}
html[data-brand="lunnemyr"] .btn-forge:hover,
html[data-brand="lunnemyr"] .nav-cta:hover{
  background:var(--coal); border-color:var(--coal);
}

/* === Light-theme refinements: retune the inherited orange accents to teal === */
/* Assessments dropdown: a rounded light panel with dark links that stay the
   same colour whether or not the header has scrolled. */
html[data-brand="lunnemyr"] .nav-dropdown-menu{
  background:#ffffff !important; border:1px solid #e2e8e8 !important; border-radius:8px !important;
  box-shadow:0 14px 40px rgba(26,34,35,.14) !important;
}
html[data-brand="lunnemyr"] .nav-dropdown-menu a{ color:#3a4a4b !important; border-radius:5px; }
html[data-brand="lunnemyr"] .nav-dropdown-menu a:hover{ color:var(--ember) !important; background:rgba(83,109,112,.07); }

/* Selected assessment answers: teal, not orange. */
html[data-brand="lunnemyr"] .hn-btn.selected,
html[data-brand="lunnemyr"] .fd-likert button.sel,
html[data-brand="lunnemyr"] .fr-rank-btn.selected{
  background:rgba(83,109,112,.12); border-color:var(--ember); color:var(--coal);
  box-shadow:0 0 0 3px rgba(83,109,112,.08);
}
html[data-brand="lunnemyr"] .hn-btn:hover,
html[data-brand="lunnemyr"] .fd-likert button:hover,
html[data-brand="lunnemyr"] .fr-rank-btn:hover{ border-color:var(--ember); color:var(--ember); }

/* Test/Helm accent text + meta chips in teal. */
html[data-brand="lunnemyr"] .fd-vertical-score,
html[data-brand="lunnemyr"] .fd-intro strong,
html[data-brand="lunnemyr"] .test-header .section-label{ color:var(--ember); }
html[data-brand="lunnemyr"] .fd-meta-tag{ background:var(--teal-ghost,#f3f6f6); border-color:#d0dbdc; color:#5a6b6c; }

/* Account menu items readable on the light panel. */
html[data-brand="lunnemyr"] .nav-account-item{ color:#3a4a4b; }
html[data-brand="lunnemyr"] .nav-account-item:hover{ color:var(--ember); background:rgba(83,109,112,.08); }

/* === Test pages: lunnemyr.com colour scheme (approved) ===
   Cream "About Henrik" canvas, teal eyebrow label in that section's style,
   elegant serif title, ghost-teal strips under the toolbars/fields. */
html[data-brand="lunnemyr"] #page-needs-test,
html[data-brand="lunnemyr"] #page-diagnostic,
html[data-brand="lunnemyr"] #page-archetype-test{ background:#f9f9f8; }

/* Eyebrow label styled like the site's "About Henrik" h4. */
html[data-brand="lunnemyr"] .test-header .section-label{
  font-family:'Montserrat',sans-serif; font-weight:500; font-size:.85rem;
  letter-spacing:.15em; text-transform:uppercase; color:#536d70; margin-bottom:.6em;
}
/* Title: elegant serif, in the site's oxblood red (like the main section headers). */
html[data-brand="lunnemyr"] .test-header h1{
  font-family:'Instrument Serif',Georgia,serif; font-weight:400; color:#680e08;
  text-transform:none; letter-spacing:.005em;
}
/* Toolbars / setup strips on a subtle ghost-teal panel. */
html[data-brand="lunnemyr"] .fd-toolbar,
html[data-brand="lunnemyr"] .test-toolbar{ background:#f3f6f6; border-color:#e2e8e8; box-shadow:none; }

/* Human Needs fields brightened to match the Thermometer's light tones:
   white question cards + white answer buttons on the cream canvas. */
html[data-brand="lunnemyr"] .hn-question{ background:#fff; border:1px solid #e7e9e9; border-radius:10px; padding:24px 26px; box-shadow:none; }
html[data-brand="lunnemyr"] .hn-question-text{ color:#1a2223; }
html[data-brand="lunnemyr"] .hn-btn{ background:#fff; border:1px solid #d0dbdc; color:#3a4a4b; box-shadow:none; }

/* Hide North-Sea-Forge-specific result CTAs on Lunnemyr: "Book Old Saga Audit",
   "Join Threshold Experience" (Thermometer) and "View The Path" (Human Needs). */
html[data-brand="lunnemyr"] button[onclick*="old-saga-audit"],
html[data-brand="lunnemyr"] button[onclick*="threshold-experience"],
html[data-brand="lunnemyr"] button[onclick*="navigate('path')"]{ display:none !important; }

/* Human Needs results: give each need bar its own on-brand colour instead of one
   flat teal gradient. The 6 need rows are the first 6 <div>s in .results-box. */
html[data-brand="lunnemyr"] .results-box .result-bar-fill{ background:var(--ember); }
html[data-brand="lunnemyr"] .results-box > div.result-row:nth-of-type(1) .result-bar-fill{ background:#536d70; }
html[data-brand="lunnemyr"] .results-box > div.result-row:nth-of-type(2) .result-bar-fill{ background:#6a8a8e; }
html[data-brand="lunnemyr"] .results-box > div.result-row:nth-of-type(3) .result-bar-fill{ background:#b0524a; }
html[data-brand="lunnemyr"] .results-box > div.result-row:nth-of-type(4) .result-bar-fill{ background:#c0883e; }
html[data-brand="lunnemyr"] .results-box > div.result-row:nth-of-type(5) .result-bar-fill{ background:#5a8a6a; }
html[data-brand="lunnemyr"] .results-box > div.result-row:nth-of-type(6) .result-bar-fill{ background:#4a6b8a; }

/* === Auth pages (login / onboarding / upgrade): light Lunnemyr theme ===
   login.css is built on NSF's dark tokens (--card / --surface / --fog / --line)
   which the brand token remap doesn't cover, so without this the inputs and tabs
   render as dark boxes on the light page and the inactive "Create account" tab
   text is invisible. Re-skin the auth surfaces to light + teal (no orange). */
html[data-brand="lunnemyr"] #page-login,
html[data-brand="lunnemyr"] #page-onboarding,
html[data-brand="lunnemyr"] #page-upgrade{ background:#f9f9f8; }

html[data-brand="lunnemyr"] .login-logo{
  color:#1a2223; font-family:'Montserrat',sans-serif; font-weight:800;
  letter-spacing:.18em; text-transform:uppercase;
}
html[data-brand="lunnemyr"] .login-logo span{ color:#536d70; }
html[data-brand="lunnemyr"] .login-sub{ color:#5a6b6c; }

/* Tabs: light container, readable labels; the active tab is solid teal/white. */
html[data-brand="lunnemyr"] .login-tabs{ border-color:#e2e8e8; }
html[data-brand="lunnemyr"] .login-tab{ background:#f3f6f6; color:#5a6b6c; }
html[data-brand="lunnemyr"] .login-tab.active{ background:#536d70; color:#fff; }

/* Inputs + Google button: white fields, light borders, dark text, teal focus. */
html[data-brand="lunnemyr"] .login-form input,
html[data-brand="lunnemyr"] .login-form select,
html[data-brand="lunnemyr"] .login-google-btn{ background:#fff; border-color:#d0dbdc; color:#1a2223; }
html[data-brand="lunnemyr"] .login-form input::placeholder{ color:#9aa6a7; }
html[data-brand="lunnemyr"] .login-form input:focus,
html[data-brand="lunnemyr"] .login-form select:focus{ border-color:#536d70; }
html[data-brand="lunnemyr"] .login-google-btn:hover{ border-color:#536d70; background:#f3f6f6; }

html[data-brand="lunnemyr"] .login-consent span{ color:#5a6b6c; }
html[data-brand="lunnemyr"] .login-consent a{ color:#536d70; }
html[data-brand="lunnemyr"] .login-divider{ color:#9aa6a7; }
html[data-brand="lunnemyr"] .login-divider::before,
html[data-brand="lunnemyr"] .login-divider::after{ background:#e2e8e8; }

/* (White-band above the active page is a Vite dev-only artifact — gap is 0 in
   the production build. brand.js measures it at runtime and compensates only
   when present, so production is never clipped.) */