/* ============================================================
   Rangune theme base: the FULL token contract with DARK
   defaults, plus the containment reset the blocks were designed
   against. Load order matters: this sheet first, then the
   builder-generated mfo-tokens.css (brand overrides), then
   mfo-blocks.css, then mfo-dark.css.

   Palette is Rangune's own — lime-on-black, lifted verbatim from
   packages/ui/src/tokens.js in the admin monorepo so the
   storefront and the admin app cannot drift. Dark-first: the
   neutral ramp is TRUE neutral (no blue tint), so black reads as
   black rather than navy.
   ============================================================ */
:root {
    /* brand — lime.400, the admin app's dark-scheme primary */
    --mfo-brand:    #a3e635;
    --mfo-on-brand: #0a0a0a;
    --mfo-secondary: #171717;
    --mfo-accent:   #84cc16;
    --mfo-on-accent: #0a0a0a;
    --mfo-btn:       var(--mfo-brand);
    --mfo-btn-hover: #bef264;
    --mfo-on-btn:    #0a0a0a;
    --mfo-nav-bg:    #0a0a0a;
    --mfo-nav-ink:   #e5e5e5;
    --mfo-nav-hover: var(--mfo-brand);
    --mfo-nav-hover-ink: var(--mfo-nav-hover);
    --mfo-utility-ink: #0a0a0a;
    --mfo-brand-ink:   #0a0a0a;
    /* surfaces — neutral.950 / .900 / .800, borders on .700 */
    --mfo-bg:       #0a0a0a;
    --mfo-surface:  #171717;
    --mfo-card:     #171717;
    --mfo-border:   #404040;
    /* text */
    --mfo-ink:      #fafafa;
    --mfo-body:     #e5e5e5;
    --mfo-muted:    #a3a3a3;
    /* success/savings: cart savings rows, in-stock flags — lime, not green */
    --mfo-savings:  #a3e635;
    /* the gray the 0.5px hairline rules blend the border toward */
    --mfo-hairline: #262626;
    /* shape, depth, type, rhythm. Radius stays squared-off (Sights and
       Scopes' original geometry) — the admin app's 0.5rem fields are a
       form-control detail, not a section-level one. */
    --mfo-radius:    0px;
    --mfo-radius-sm: 0px;
    --mfo-radius-lg: 0px;
    /* On a near-black ground a black shadow is invisible; depth has to come
       from a lifted surface plus a hairline, so the shadow only deepens the
       seam under raised chrome. */
    --mfo-shadow:    0 2px 12px rgba(0, 0, 0, 0.6);
    --mfo-font-heading: 'Oswald', system-ui, -apple-system, sans-serif;
    --mfo-font-body:    'Inter', system-ui, -apple-system, sans-serif;
    --mfo-density:   1;
}

/* Brand type carries store-wide (stock Cornerstone areas included). */
body { font-family: var(--mfo-font-body); }

/* ── Containment reset ─────────────────────────────────────────
   Neutralizes Cornerstone's base styles (link underlines, list
   bullets, heading margins) inside MFO blocks ONLY. Stock areas
   (PDP internals, cart, account) keep Cornerstone's own styling. */
:is(.mfo-utility, .mfo-header, .mfo-navbar, .mfo-nav-master-panel, .mfo-announce, .mfo-hero,
    .mfo-section, .mfo-home, .mfo-footer, .mfo-news, .mfo-cathead, .mfo-toolbar,
    .mfo-404, .mfo-shipbar, .mfo-drawer, .mfo-cartpage, .mfo-plp) a {
    color: inherit;
    text-decoration: none;
}
:is(.mfo-utility, .mfo-header, .mfo-navbar, .mfo-nav-master-panel, .mfo-announce, .mfo-hero,
    .mfo-section, .mfo-home, .mfo-footer, .mfo-news, .mfo-cathead, .mfo-toolbar,
    .mfo-404, .mfo-shipbar, .mfo-drawer, .mfo-cartpage, .mfo-plp) :is(ul, ol) {
    margin: 0;
    padding: 0;
    list-style: none;
}
/* MF1 widget headings carry their own color logic (Design-tab settings with
   token fallbacks); excluding them here keeps this chrome rule from
   out-specifying the widgets' single-class heading rules. */
:is(.mfo-utility, .mfo-header, .mfo-navbar, .mfo-nav-master-panel, .mfo-announce, .mfo-hero,
    .mfo-section, .mfo-home, .mfo-footer, .mfo-news, .mfo-cathead, .mfo-toolbar,
    .mfo-404, .mfo-shipbar, .mfo-drawer, .mfo-cartpage, .mfo-plp) :is(h1, h2, h3, h4):not([class*="mf1-"]) {
    font-family: var(--mfo-font-heading);
    color: var(--mfo-ink);
    line-height: 1.15;
    margin: 0;
}
:is(.mfo-utility, .mfo-header, .mfo-navbar, .mfo-nav-master-panel, .mfo-announce, .mfo-hero,
    .mfo-section, .mfo-home, .mfo-footer, .mfo-news, .mfo-cathead, .mfo-toolbar,
    .mfo-404, .mfo-shipbar, .mfo-drawer, .mfo-cartpage, .mfo-plp) p {
    margin: 0;
}
:is(.mfo-utility, .mfo-header, .mfo-navbar, .mfo-nav-master-panel, .mfo-announce, .mfo-hero,
    .mfo-section, .mfo-home, .mfo-footer, .mfo-news, .mfo-cathead, .mfo-toolbar,
    .mfo-404, .mfo-shipbar, .mfo-drawer, .mfo-cartpage, .mfo-plp) :is(img, svg) {
    display: block;
    max-width: 100%;
}
:is(.mfo-utility, .mfo-header, .mfo-navbar, .mfo-nav-master-panel, .mfo-announce, .mfo-hero,
    .mfo-section, .mfo-home, .mfo-footer, .mfo-news, .mfo-cathead, .mfo-toolbar,
    .mfo-404, .mfo-shipbar, .mfo-drawer, .mfo-cartpage, .mfo-plp) button {
    font: inherit;
    cursor: pointer;
}

/* Text inputs inside MFO forms (newsletter, footer, 404 search) */
:is(.mfo-news-form, .mfo-footer-news, .mfo-404-search) input {
    font: inherit;
    color: var(--mfo-ink);
    background: var(--mfo-surface);
    border: 1px solid var(--mfo-border);
    border-radius: var(--mfo-radius-sm);
    padding: 12px 14px;
    min-width: 0;
}
:is(.mfo-news-form, .mfo-footer-news, .mfo-404-search) input::placeholder { color: var(--mfo-muted); }
:is(.mfo-news-form, .mfo-footer-news, .mfo-404-search) input:focus {
    outline: none;
    border-color: var(--mfo-brand);
}