/* ─────────────────────────────────────────────
   MFO CSS Variables
   ───────────────────────────────────────────── */

:root {
  /* ── MFO Brand ── */
  --mfo-dark:          #0a1209;
  --mfo-bg:            #0f1a14;
  --mfo-surface:       #F2E4CE;
  --mfo-card:          #ffffff;
  --mfo-border:        #E2D5BC;
  --mfo-olive:         #484F27;
  --mfo-olive-mid:     #767546;
  --mfo-gold:          #FEB480;
  --mfo-nav:           #9a9a7a;
  --mfo-active:        rgba(242,228,206,0.15);
  --mfo-logo:          #F2E4CE;
  --mfo-text:          #1a1f0a;
  --mfo-text-mid:      #5a5a42;
  --mfo-text-soft:     #9a9a7a;
  --mfo-win-green:     #5a8a4a;
  --mfo-cream:         #F2E4CE;
  --mfo-accent-light:  #f7f0e4;
  --mfo-accent-text:   #484F27;

  /* ── Legacy palette ── */
  --win-green:    #5a8a4a;
  --gold:         #FEB480;
  --orange:       #767546;
  --dark-green:   #484F27;
  --olive:        #484F27;
  --olive-mid:    #767546;
  --beige:        #F2E4CE;
  --espresso:     #0a1209;

  /* ── Shared layout ── */
  --sidebar-width:      240px;
  --right-panel-width:  280px;
  --coach-rail-width:   300px;
  --topnav-height:      52px;
  --radius-sm:          8px;
  --radius-md:          12px;
  --radius-lg:          16px;
  --radius-xl:          20px;
  --shadow-sm:          0 1px 3px rgba(0,0,0,0.06);
  --shadow-md:          0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:          0 8px 32px rgba(0,0,0,0.14);
  --transition:         150ms ease;
}

/* ── Brand-generic aliases — MFO is the only brand ── */
:root,
[data-brand="mfo"] {
  --brand-primary:       var(--mfo-gold);           /* #FEB480 — one per screen, dark text */
  --brand-secondary:     var(--mfo-olive-mid);       /* #767546 — all other interactive */
  --brand-primary-light: rgba(254,180,128,0.15);
  --brand-dark:          var(--mfo-olive);
  --brand-sidebar:       var(--mfo-olive);
  --brand-page-bg:       var(--mfo-surface);
  --brand-card:          var(--mfo-card);
  --brand-border:        var(--mfo-border);
  --brand-text:          var(--mfo-text);
  --brand-text-mid:      var(--mfo-text-mid);
  --brand-muted:         var(--mfo-nav);
  --brand-light:         #f7f3eb;
  --brand-logo-color:    var(--mfo-logo);
  --brand-nav-active:    rgba(242,228,206,0.15);
  --brand-win:           var(--mfo-win-green);
  --brand-heading:       var(--mfo-olive);
}