/* ==========================================================================
   Finnec brand layer
   Loaded after each page's inline <style>, so these rules win at equal
   specificity. Values come from the Finnec design system (option 1a,
   "Aubergine & Dune"): tokens/brand.css, tokens/semantic.css, tokens/spacing.css.

   Rules this file enforces site-wide:
   - Aubergine chrome (hero bands, dark CTA panels). Flat: no gradients,
     glows, grid textures, glass or blur.
   - Violet is the only filled-button colour. One primary per view.
   - Dune gold is highlight only: eyebrow rules, progress fills, active
     markers, the logo mark and the hero CTA. Never body text on light.
   - Gabarito for headings, Public Sans for everything else.
   - Near-square corners, thin borders, aubergine-tinted shadow-sm → md.
   ========================================================================== */

:root {
  /* Brand */
  --violet-50:  #F6F2FB;
  --violet-100: #ECE4F6;
  --violet-200: #D8C8EC;
  --violet-300: #BBA0DC;
  --violet-500: #7D55B5;
  --violet-600: #6A3FA8;
  --violet-700: #55328A;
  --aubergine:      #2E1E3D;
  --aubergine-dark: #221630;
  --gold-50:  #FBF6EC;
  --gold-100: #F5EAD2;
  --gold-200: #EDD7A8;
  --gold-300: #E4C585;
  --gold-400: #DCB264;
  --gold-500: #C99A45;
  --gold-600: #A97A28;
  --gold-700: #86601F;

  /* Chrome (aubergine bands) */
  --chrome:          var(--aubergine);
  --chrome-fg:       #F5EFE6;
  --chrome-fg-muted: #BCB0C8;
  --chrome-hover:    rgba(255, 255, 255, 0.06);
  --chrome-active:   rgba(255, 255, 255, 0.10);
  --chrome-border:   rgba(255, 255, 255, 0.12);

  /* Type */
  --font-head: 'Gabarito', 'Public Sans', system-ui, sans-serif;

  /* Elevation */
  --shadow-sm: 0 1px 2px 0 rgba(35, 26, 46, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(35, 26, 46, 0.10), 0 2px 4px -2px rgba(35, 26, 46, 0.10);
  --shadow-lg: 0 10px 15px -3px rgba(35, 26, 46, 0.10), 0 4px 6px -4px rgba(35, 26, 46, 0.10);
  --shadow-xl: 0 20px 25px -5px rgba(35, 26, 46, 0.12), 0 8px 10px -6px rgba(35, 26, 46, 0.10);
}

::selection { background: var(--gold-200); color: var(--aubergine); }

/* ------------------------------------------------------------------ TYPE */
h1, h2, h3,
.form-title, .help-cta-title, .final-cta-headline, .mock-title {
  font-family: var(--font-head);
  letter-spacing: -0.015em;
}
h1 { font-weight: 700; }
h2, h3 { font-weight: 600; }

/* Figures are tabular everywhere they appear as data. */
[class*="-num"], [class*="stat"], [class*="price"], [class*="metric"], .spots-num {
  font-variant-numeric: tabular-nums;
}

/* Focus: 2px violet-500 ring. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--violet-500);
  outline-offset: 2px;
}

/* --------------------------------------------------------------- BUTTONS
   Flat fills. No glow shadows, no lift on hover: hover steps one shade darker. */
.btn, .btn-primary, .btn-section, .btn-violet, .btn-lg, .btn-hero, .btn-ghost,
.btn-ghost-lg, .btn-amber-lg, .form-submit, .price-cta, .sticky-cta .btn {
  box-shadow: none !important;
  transform: none !important;
  border-radius: 6px;
}
.btn-primary, .btn-section, .btn-violet, .form-submit {
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hero CTA on aubergine is the one place gold acts as a call to action. */
.btn-hero {
  background: var(--gold-400) !important;
  color: var(--aubergine) !important;
}
.btn-hero:hover { background: var(--gold-300) !important; }

/* ------------------------------------------------------------------- NAV
   Solid surface when scrolled: no glass, no blur. */
.nav.scrolled {
  background: #FFFFFF !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: var(--shadow-sm) !important;
  border-bottom-color: #EAE5DE !important;
}
/* Pages whose hero is aubergine (body.chrome-hero): over the hero the nav CTA is
   a chrome outline, so the gold hero CTA stays the one primary action. Once
   scrolled it becomes the violet primary. */
.chrome-hero .nav:not(.scrolled) .btn-primary {
  background: var(--chrome-active) !important;
  color: var(--chrome-fg) !important;
  border: 1px solid var(--chrome-border);
}
.chrome-hero .nav:not(.scrolled) .btn-primary:hover { background: rgba(255, 255, 255, 0.16) !important; }
.chrome-hero .nav.scrolled .btn-primary { border: 1px solid transparent; }
.nav-logo-full { height: 26px !important; width: auto; }
.footer-logo, .footer .nav-logo-full { height: 24px !important; width: auto; }

/* ----------------------------------------------------- FLAT BACKGROUNDS
   The system removed gradients, glows and textures. Decorative layers go. */
.hero-bg-glow, .hero-bg-glow-1, .hero-bg-glow-2, .hero-bg-glow-3,
.hero-bg-grid, .hero-bg-fade, .page-header-glow, .final-cta-glow,
.confirm-bg-glow-1, .confirm-bg-glow-2, .confirm-bg-grid, .confirm-bg-fade,
.preview-glow-1, .preview-glow-2 {
  display: none !important;
}

/* Gradient text becomes a solid accent: violet on light, gold on aubergine. */
.grad, .grad-amber {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--violet-600);
}
.chrome-hero .hero .grad, .grad-amber, .final-cta .grad {
  color: var(--gold-400);
}

/* --------------------------------------------------------------- EYEBROWS
   Section labels keep violet text; the leading rule becomes a gold mark. */
.label::before { background: var(--gold-500) !important; height: 2px !important; }

/* ---------------------------------------------------- PROGRESS + COUNTERS */
.spots-fill, .fp-fill { background: var(--gold-500) !important; }

/* ------------------------------------------------------------ CARDS + FORMS
   Thin border, shadow-sm; form cards sit one level up at shadow-md. */
.form-card { box-shadow: var(--shadow-md) !important; }
.form-input, .form-select, .form-textarea {
  background-color: #FFFFFF !important;
  border-color: #DAD3CA;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--violet-500) !important;
  box-shadow: 0 0 0 3px var(--violet-100);
}
.form-input.invalid, .form-select.invalid { border-color: #DC2626 !important; }

/* ------------------------------------------------------------ LEGAL PAGES
   Long-form reading: Public Sans body, Gabarito section heads. */
.legal-content h2, .legal-content h3, .policy-content h2, .policy-content h3 {
  font-family: var(--font-head);
}

@media (prefers-reduced-motion: reduce) {
  .btn, .btn-primary, .form-submit { transition: none; }
}

/* ------------------------------------------------- NAV OVER AUBERGINE HERO */
.chrome-hero .nav:not(.scrolled) .nav-links a { color: var(--chrome-fg-muted) !important; opacity: 1 !important; }
.chrome-hero .nav:not(.scrolled) .nav-links a:hover { color: var(--chrome-fg) !important; }
/* Cross-audience link keeps a gold highlight over the hero. */
.chrome-hero .nav:not(.scrolled) .nav-links a.nav-link-alt { color: var(--gold-300) !important; }
.chrome-hero .nav:not(.scrolled) .btn-ghost {
  color: var(--chrome-fg) !important;
  border-color: var(--chrome-border) !important;
  background: transparent !important;
}
.chrome-hero .nav:not(.scrolled) .btn-ghost:hover { background: var(--chrome-hover) !important; }

/* ------------------------------------------------------------------ ICONS
   Heroicons v2 outline, inlined at 1em so each container's font-size sets the
   size. Violet on light surfaces; gold where the ground is aubergine. No emoji. */
.fi { width: 1em; height: 1em; display: block; flex: none; }
.feature-icon, .benefit-icon, .problem-item-icon, .step-icon, .cat-icon, .wm-badge-icon {
  color: var(--violet-600);
}
.feature-icon .fi, .benefit-icon .fi { width: 28px; height: 28px; }
.step-icon.violet { color: var(--gold-700); }
.step-icon.amber  { color: #B45309; }
.lesson-thumb-icon { color: var(--gold-400); filter: none !important; }
.lesson-thumb-icon .fi { width: 36px; height: 36px; }
.problem-callout .fi, .wm-badge-icon .fi { display: inline-block; vertical-align: -0.15em; }

/* ---------------------------------------------------------- SECTION PILLS
   One eyebrow treatment site-wide: gold wash, deep-gold text. Colour-coded
   variants collapse into it so status colours keep their status meaning. */
.section-eyebrow, .section-eyebrow.amber, .section-eyebrow.violet,
.section-eyebrow.blue, .section-eyebrow.lime {
  background: var(--gold-50) !important;
  color: var(--gold-700) !important;
  border: 1px solid var(--gold-200);
  border-radius: 9999px;
}

/* ------------------------------------------------------------- LOG IN MENU
   Disclosure: the trigger keeps each page's own button class; the panel is a
   popover, the one surface that carries shadow-lg. */
.login-menu { position: relative; display: inline-flex; }
.login-menu-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font); cursor: pointer;
}
.login-menu-btn.nav-login { background: none; border: 0; padding: 0; }
.login-menu-chev { width: 14px; height: 14px; flex: none; transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1); }
.login-menu-btn[aria-expanded="true"] .login-menu-chev { transform: rotate(180deg); }
.login-menu-panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 120;
  min-width: 180px; padding: 6px;
  background: #FFFFFF; border: 1px solid #EAE5DE; border-radius: 8px;
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 2px;
}
.login-menu-panel[hidden] { display: none; }
.login-menu-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; border-radius: 6px; text-align: left;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.login-menu-item:hover, .login-menu-item:focus-visible { background: #F5F2ED; }
.login-menu-label { font-size: 14px; font-weight: 600; color: #231A2E; line-height: 1.3; }