/* ============================================================================
   LANGUY — ONE BUTTON + COLOUR SYSTEM (2026-09-27, founder: "the green button
   looks unprofessional… see what Duolingo and the top apps do")
   ----------------------------------------------------------------------------
   Loaded LAST on /free, /products/method-course and /products/starter-pack, so
   it is the final word over the older per-page layers. CSS only: no link,
   checkout, analytics or copy changes live here.

   Label case: sentence case everywhere (4 of 9 blind judges called the
   tracked ALL-CAPS primary shouty next to sentence-case secondaries); the
   Duolingo lip + press carries the tactile feel.
   Evidence (Mobbin, 2026-09-27): Duolingo primary = full-width 16px-radius
   green, bold UPPERCASE tracked label, a 4px darker "lip" under it that
   collapses when pressed; secondary = white with a 2px grey border + the same
   grey lip. Headspace / Airbnb / Stripe: ONE filled action per view, colour
   used on the action and nowhere else, everything else neutral.
   Spec + rule: languy-empire KNOWLEDGE/DESIGN_POWER_KIT.md §Button system and
   LOCKED_DESIGN.md "BRIGHT + ONE ACCENT".

   GREEN = FRESH LEAF #52BD2A (Joseph picked it 2026-09-27 over muted jade and
   deeper botanical; #2DD760 "felt childish"). CONTRAST (measured): label
   #111114 on #52BD2A = 7.78:1 (AA/AAA); white is 2.42:1 and FAILS, so the
   label is never white. Green as text = #2E7A18, 5.18:1 on paper.
   ============================================================================ */

:root{
  /* the one accent */
  --lg-green:#52BD2A;        /* fill: FRESH LEAF, Joseph's pick 2026-09-27 */
  --lg-green-hover:#5ECB35;  /* hover lightens, like Duolingo */
  --lg-green-lip:#3E9420;    /* the 4px pressable edge */
  --lg-green-text:#2E7A18;   /* green AS TEXT (5.18:1 on paper) */
  --lg-green-soft:#EEF8E8;   /* selected / status tint */
  /* PRIMARY BUTTON = A "deep green premium" (Joseph 2026-09-27, after seeing
     the lime + lip live: "still looks weird, not professional"). Flat, deeper
     fresh-leaf green, WHITE label 5.07:1, soft shadow, no lip. Fresh leaf
     stays the accent for tints, checks, progress, chips and links. */
  --lg-btn:#1C7F36; --lg-btn-hover:#197030; --lg-btn-press:#16632A; --lg-on-btn:#FFFFFF;
  --lg-btn-shadow:0 6px 16px rgba(0,0,0,.12); --lg-btn-shadow-press:0 2px 6px rgba(0,0,0,.12); --lg-btn-r:14px;
  --lg-on-green:#111114;     /* label on green, 7.78:1 (white is 2.42:1 and fails) */
  /* neutrals for everything that is not the action */
  --lg-edge:#E4E4E7;         /* secondary border + its ledge (true neutral) */
  --lg-edge-hi:#D4D4D8;
  --lg-soft:#F3F5F8;
  --lg-ink:#0E1433;
  /* geometry */
  --lg-h:56px; --lg-h-sm:44px; --lg-r:16px; --lg-r-sm:12px; --lg-lip:4px;
  --lg-font:'DM Sans',system-ui,-apple-system,sans-serif;

  /* Retire the sky/cyan leftovers on these pages: every token that painted
     blue now resolves to the one accent (or its text-safe form). */
  --accent:var(--lg-green);
  --accent-soft:var(--lg-green-soft);
  --chalk:var(--lg-green-text);
  --accent-bright:var(--lg-green-text);
  --accent-text:var(--lg-green-text);
  --action-text:var(--lg-green-text);
  --accent-cta:var(--lg-green);
  --action:var(--lg-green);
  --on-action:var(--lg-on-green);
  --action-hi:var(--lg-green-hover);
  --accent-deep:var(--lg-green-lip);
  --action-lip:var(--lg-green-lip);
  --good:var(--lg-green);
  --good-soft:var(--lg-green-soft);
  --owned:var(--lg-green-text);
  --owned-soft:var(--lg-green-soft);
  --cta-height:var(--lg-h);
  --cta-radius:var(--lg-r);
}

/* ---------------------------------------------------------------------------
   1. PRIMARY — the one green action per view
   --------------------------------------------------------------------------- */
html body #dv-hear#dv-hear#dv-hear.dv-hear,
html body #dv-cta#dv-cta#dv-cta.dv-btn,
html body #dv-cta#dv-cta#dv-cta.ov-btn,
html body .dv-go-btn,
html body a.btn:not(.ghost),
html body button.btn:not(.ghost),
html body .lgy-go,
html body .ld .ln{
  align-items:center; justify-content:center;
  min-height:var(--lg-h)!important; padding:0 22px!important;
  background:var(--lg-btn)!important; color:var(--lg-on-btn)!important;
  border:0!important; border-radius:var(--lg-btn-r)!important;
  box-shadow:var(--lg-btn-shadow)!important;
  font:600 17px/1.1 var(--lg-font)!important; letter-spacing:-.005em!important; text-transform:none!important;
  text-decoration:none!important; text-shadow:none!important; filter:none!important; background-image:none!important;
  transform:translateY(0);
  transition:transform .08s ease-out,box-shadow .08s ease-out,background-color .15s ease!important;
  -webkit-tap-highlight-color:transparent;
}
html body #dv-hear#dv-hear#dv-hear.dv-hear{margin-bottom:6px}
html body #dv-hear#dv-hear#dv-hear.dv-hear:hover,
html body #dv-cta#dv-cta#dv-cta.dv-btn:hover,
html body #dv-cta#dv-cta#dv-cta.ov-btn:hover,
html body .dv-go-btn:hover,
html body a.btn:not(.ghost):hover,
html body button.btn:not(.ghost):hover,
html body .lgy-go:hover,
html body .ld .ln:hover{background:var(--lg-btn-hover)!important}
html body #dv-hear#dv-hear#dv-hear.dv-hear:active,
html body #dv-cta#dv-cta#dv-cta.dv-btn:active,
html body #dv-cta#dv-cta#dv-cta.ov-btn:active,
html body .dv-go-btn:active,
html body a.btn:not(.ghost):active,
html body button.btn:not(.ghost):active,
html body .lgy-go:active,
html body .ld .ln:active{transform:scale(.98)!important;background:var(--lg-btn-press)!important;box-shadow:var(--lg-btn-shadow-press)!important}
html body #dv-hear#dv-hear#dv-hear.dv-hear.playing{background:var(--lg-btn)!important}
html body #dv-hear#dv-hear#dv-hear.dv-hear:focus-visible,
html body #dv-cta#dv-cta#dv-cta.dv-btn:focus-visible,
html body #dv-cta#dv-cta#dv-cta.ov-btn:focus-visible,
html body a.btn:focus-visible,
html body button.btn:focus-visible,
html body .lgy-go:focus-visible{outline:3px solid var(--lg-ink)!important;outline-offset:3px!important}
/* icons inside the deep-green button are white, like its label */
html body #dv-hear#dv-hear#dv-hear.dv-hear .ic,
html body #dv-cta#dv-cta#dv-cta.ov-btn .ic,
html body .btn:not(.ghost) .ic{fill:var(--lg-on-btn)!important;background:transparent!important;box-shadow:none!important;padding:0!important;width:16px!important;height:16px!important}
/* the buy button on /free carries the arrow the other primaries already have */
html body #dv-cta#dv-cta#dv-cta.ov-btn::after{content:"\2192";margin-left:10px;font-weight:600}
/* the sticky bar's button is shorter so it fits the bar, same finish */
html body .lgy-bar .lgy-go,
html body .bar .btn{min-height:48px!important;font-size:15px!important;padding:0 18px!important}

/* ---------------------------------------------------------------------------
   2. SECONDARY — white, 2px neutral edge + a subtle 2px ledge, sentence
      case, ink label. Only the green primary is fully raised + uppercase
      (blind panels: a loud secondary competes; a flat one reads as a
      different family).
   --------------------------------------------------------------------------- */
html body #dv-swap.dv-swap,
html body #fg-all.fg-all,
html body #dsx-go.dsx-go,
html body .btn.ghost,
html body .btn-ghost{
  align-items:center; justify-content:center;
  min-height:52px!important; padding:0 20px!important;
  background:#fff!important; color:var(--lg-ink)!important;
  border:2px solid var(--lg-edge)!important; border-radius:var(--lg-r)!important;
  box-shadow:0 2px 0 var(--lg-edge)!important;
  font:700 16px/1.1 var(--lg-font)!important; letter-spacing:0!important; text-transform:none!important;
  text-decoration:none!important;
  transition:transform .08s ease-out,box-shadow .08s ease-out,background-color .15s ease!important;
}
html body #dv-swap.dv-swap:hover,
html body #fg-all.fg-all:hover,
html body #dsx-go.dsx-go:hover,
html body .btn.ghost:hover,
html body .btn-ghost:hover{background:#FAFAFA!important;border-color:var(--lg-edge-hi)!important;box-shadow:0 2px 0 var(--lg-edge-hi)!important}
html body #dv-swap.dv-swap:active,
html body #fg-all.fg-all:active,
html body #dsx-go.dsx-go:active,
html body .btn.ghost:active,
html body .btn-ghost:active{transform:translateY(2px)!important;box-shadow:0 0 0 var(--lg-edge)!important}
html body #fg-all.fg-all .ic,
html body .btn-ghost svg{fill:var(--lg-ink)!important}

/* compact secondary (row actions, inline Listen) */
html body .have .open,
html body .rep .btn-ghost{
  align-items:center; justify-content:center;
  min-height:var(--lg-h-sm)!important; padding:0 14px!important; width:auto!important;
  background:#fff!important; color:var(--lg-ink)!important;
  border:2px solid var(--lg-edge)!important; border-radius:14px!important;
  box-shadow:0 2px 0 var(--lg-edge)!important;
  font:700 15px/1 var(--lg-font)!important; letter-spacing:0!important; text-transform:none!important;
  text-decoration:none!important;
}
html body .have .open:active,
html body .rep .btn-ghost:active{transform:translateY(2px)!important;box-shadow:0 0 0 var(--lg-edge)!important}

/* ---------------------------------------------------------------------------
   3. CHIPS + OPTION TILES — flat, neutral until chosen; chosen = mint + green edge
      (no navy fills on a bright page)
   --------------------------------------------------------------------------- */
html body #dv-chips#dv-chips .dv-chip,
html body .chip,
html body .lang-chip{
  background:#fff!important; color:var(--lg-ink)!important;
  border:2px solid var(--lg-edge)!important; border-radius:999px!important;
  box-shadow:none!important;
  font-family:var(--lg-font)!important; font-weight:700!important;
  transition:transform .08s ease-out,box-shadow .08s ease-out!important;
}
html body #dv-chips#dv-chips .dv-chip[aria-pressed="true"],
html body .chip[aria-pressed="true"],
html body .lang-chip[aria-pressed="true"]{
  background:var(--lg-green-soft)!important; color:var(--lg-ink)!important;
  border-color:var(--lg-green)!important; box-shadow:none!important;
}
html body #dv-chips#dv-chips .dv-chip:active,
html body .chip:active,
html body .lang-chip:active{transform:scale(.97)!important}
html body .dv-chips{padding-bottom:4px!important}

html body .choose .opt{
  background:#fff!important; color:var(--lg-ink)!important;
  border:2px solid var(--lg-edge)!important; border-radius:var(--lg-r)!important;
  box-shadow:none!important;
  font:700 18px/1 var(--lg-font)!important;
}
html body .choose .opt:active{transform:scale(.98)!important;border-color:var(--lg-green)!important}

/* ---------------------------------------------------------------------------
   4. TEXT LINKS (tertiary) — ink, bold, green underline. Colour = "tappable".
   --------------------------------------------------------------------------- */
html body #free-course-link,
html body #dv-offer-line a,
html body .hw-more a,
html body #dv-play,
html body .rest a,
html body .free-course a,
html body .head p a,
html body .peek-foot a,
html body .a a,
html body .fine a,
html body .cta-fine a,
html body #dv-romtog,
html body #door#door .dv-offer-line .see,
html body #kit#kit section.fs-card.ov .ov-more summary,
html body .inline-cta{
  color:var(--lg-ink)!important; font-weight:700!important;
  text-decoration:underline!important; text-decoration-color:var(--lg-green)!important;
  text-decoration-thickness:2px!important; text-underline-offset:4px!important;
}
html body #free-course-link:hover,
html body .hw-more a:hover,
html body #dv-play:hover,
html body .rest a:hover,
html body .free-course a:hover{text-decoration-color:var(--lg-green-lip)!important}

/* ---------------------------------------------------------------------------
   5. SMALL COLOUR LEFTOVERS — numbered badges, level/day tags, icon tiles
   --------------------------------------------------------------------------- */
html body .hw-rec .n{background:var(--lg-green-soft)!important;color:var(--lg-green-text)!important}
html body .lv{background:var(--lg-green-soft)!important;color:var(--lg-ink)!important}
html body .lv b{color:var(--lg-ink)!important}
html body .stage-h .when{background:var(--lg-green-soft)!important;color:var(--lg-ink)!important}
html body .have .ic{background:var(--lg-soft)!important}
html body .lcard .go{color:var(--lg-ink)!important}
html body .lcard.next{box-shadow:inset 0 0 0 2px var(--lg-green)!important}
html body .lcard.next .dot{background:var(--lg-green)!important;color:var(--lg-on-green)!important}
html body .rest{background:var(--lg-green-soft)!important}

/* romanisation is reading help, not an action: neutral, like /free */
html body .rep-rom,
html body .sent .rom,
html body .tlist .r,
html body .rom{color:#3F4753!important}

/* the offer's buy zone: a lighter mint so the green button stands off it */
html body #kit#kit section.fs-card.ov-y .ov-buy{background:#F5FBF1!important}

/* hard-coded #2DD760 leftovers on /free, retuned to fresh leaf */
html body #kit#kit section.fs-card.ov{--ov-green:#52BD2A!important;--ov-green-hi:#5ECB35!important;--ov-deep:#2E7A18!important;--ov-soft:#EEF8E8!important;--ov-soft-line:rgba(46,122,24,.18)!important}
html body{--pv-green-soft:#EEF8E8}
html body #door#door .dv-eyebrow .dot{background:#52BD2A!important}
html body #door#door .dv-h1 .l{box-shadow:inset 0 -.2em 0 rgba(82,189,42,.35)!important}
html body #kit#kit section.fs-card.ov .ov-left::before{box-shadow:0 0 0 3px rgba(82,189,42,.2)!important}
html body #kit#kit .fs-card .fs-stack li::before{background:#52BD2A!important}
html body #kit#kit .fs-card .fs-said-play svg{fill:#52BD2A!important}
html body .v5-prog-rail,html body #v5-prog-bar{background:rgba(82,189,42,.18)!important}

@media (prefers-reduced-motion:reduce){
  html body .btn,html body .btn-ghost,html body .chip,html body .dv-chip,html body #dv-hear,html body #dv-cta{transition:none!important}
}

/* the tap-a-word highlight in the family list: the one accent, not sky */
html body .fg-t .fw.lit{background:var(--lg-green-soft)!important;border-bottom-color:var(--lg-green)!important}