/* mamacool brand tokens — the single source of truth for page styling.
   Values excavated from the live Shopify theme (settings_data.json current
   block + css-variables.liquid); provenance and rules in DESIGN.md.
   Load this BEFORE page CSS: <link rel="stylesheet" href="/brand.css"> */

/* ---- fonts (self-hosted, latin subset; no third-party requests) ---- */

@font-face {
  font-family: "Petrona";
  font-style: normal;
  font-weight: 400 700; /* variable file */
  font-display: swap;
  src: url("/fonts/petrona-var.woff2") format("woff2");
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/space-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "Space Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/space-mono-700.woff2") format("woff2");
}
@font-face {
  font-family: "Kalam";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/kalam-400.woff2") format("woff2");
}

:root {
  /* ---- color (theme values) ---- */
  --mc-bg: #fee2c7;        /* page background — theme menu/section bg */
  --mc-surface: #fff5ea;   /* cards, inputs — theme scheme-1 section bg */
  --mc-ink: #0b0b0b;       /* text + borders; never #000 */
  --mc-border: #0b0b0b;
  --mc-peach: #ffbe98;     /* theme accent (scheme "apricot") */
  --mc-pink: #ffb1be;      /* theme accent (templates, status css) */
  --mc-maroon: #752329;    /* theme scheme-3 section bg — "undried tomatoes" */
  --mc-error: #d02e2e;     /* theme sale/checkout-error red */
  --mc-success: #56ad6a;   /* theme --COLOR-SUCCESS */

  /* ---- color (our extensions — status set, not in the theme) ---- */
  --mc-status-pending: #ffe9b3;
  --mc-status-published: #bfe3c5;
  --mc-status-rejected: #f4c7bb;
  --mc-muted: #dcc7b1;     /* tracks, disabled, dividers on bg */

  /* ---- type ---- */
  --mc-font-heading: "Petrona", Georgia, serif;         /* weight 500 */
  --mc-font-body: "Space Mono", ui-monospace, monospace; /* customer pages */
  --mc-font-ui: system-ui, -apple-system, sans-serif;    /* admin data tables only */
  --mc-font-accent: "Kalam", cursive;                    /* handwritten highlight */

  /* heading ramp (app-scale derivation of the storefront's 60px scale) */
  --mc-h1: 2.4rem;
  --mc-h2: 1.7rem;
  --mc-h3: 1.35rem;
  --mc-h4: 1.15rem;
  --mc-body: 1rem;
  --mc-lh-body: 1.5625;

  /* label ramp — the only four label sizes */
  --mc-label-xs: .58rem;
  --mc-label-s: .62rem;
  --mc-label-m: .68rem;
  --mc-label-l: .8rem;
  --mc-track-btn: .075em;   /* caps tracking: buttons/labels */
  --mc-track-sub: .1em;     /* caps tracking: subheads */

  /* ---- radius ramp (theme RADIUS ramp) ---- */
  --mc-r-pill: 999px;  /* pills, inputs, buttons (theme 30px equivalent) */
  --mc-r-card: 30px;   /* feature cards */
  --mc-r-panel: 22px;  /* panels, admin cards (RADIUS-SMALL) */
  --mc-r-dense: 14px;  /* tiles, rows (RADIUS-TINY) */
  --mc-r-subtle: 8px;  /* textareas, thumbs (RADIUS-TEXTAREA) */
  --mc-r-tick: 4px;    /* checkboxes, swatches (RADIUS-CHECKBOX) */

  /* ---- spacing / layout ---- */
  --mc-pad-page: 40px 16px 80px;
  --mc-pad-card: 22px 24px;
  --mc-max-interstitial: 400px;
  --mc-max-linktree: 480px;
  --mc-max-content: 640px;
  --mc-max-admin: 860px;
  --mc-gap: 16px;
}

/* ---- base component classes (hub, styleguide, new pages) ---- */

.mc-label {
  font-family: var(--mc-font-body);
  font-size: var(--mc-label-s);
  text-transform: uppercase;
  letter-spacing: var(--mc-track-btn);
}

.mc-btn {
  display: inline-block;
  font-family: var(--mc-font-body);
  font-size: var(--mc-label-l);
  text-transform: uppercase;
  letter-spacing: var(--mc-track-btn);
  color: var(--mc-surface);
  background: var(--mc-ink);
  border: 1px solid var(--mc-border);
  border-radius: var(--mc-r-pill);
  padding: 12px 22px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
.mc-btn--outline { color: var(--mc-ink); background: transparent; }
.mc-btn--danger { color: var(--mc-error); background: transparent; border-color: var(--mc-error); }
.mc-btn[disabled] { opacity: .45; cursor: not-allowed; }
.mc-btn[disabled]::before { content: none; }

/* ---- button hover: the theme's wipe ----
   The storefront hovers a 30% overlay of the darkened page bg across the
   button, entering from the side the cursor came from (0.3s ease). #fdc895
   is #fee2c7 darkened 10 — the same math as --COLOR-BG-LIGHTEN-DARKEN.
   brand.js sets the entry-side class; with no JS the wipe comes from the top.
   Add .mc-wipe to any page button that isn't an .mc-btn. */
.mc-btn, .mc-wipe { position: relative; z-index: 1; }
.mc-btn::before, .mc-wipe::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  background: #fdc895; opacity: .3;
  transform: scale(1, 0); transform-origin: top center;
  transition: transform .3s ease;
}
.mc-wipe--top::before { transform: scale(1, 0); transform-origin: top center; }
.mc-wipe--bottom::before { transform: scale(1, 0); transform-origin: bottom center; }
.mc-wipe--left::before { transform: scale(0, 1); transform-origin: center left; }
.mc-wipe--right::before { transform: scale(0, 1); transform-origin: center right; }
.mc-btn:hover::before, .mc-wipe:hover::before { transform: none; }

.mc-card {
  background: var(--mc-surface);
  border: 1px solid var(--mc-border);
  border-radius: var(--mc-r-card);
  padding: var(--mc-pad-card);
}
@media (max-width: 540px) { .mc-card { padding: 18px; } }

.mc-pill {
  display: inline-block;
  font-family: var(--mc-font-body);
  font-size: var(--mc-label-s);
  text-transform: uppercase;
  letter-spacing: var(--mc-track-btn);
  border: 1px solid var(--mc-border);
  border-radius: var(--mc-r-pill);
  padding: 4px 12px;
  background: var(--mc-surface);
  color: var(--mc-ink);
}
.mc-pill--pending { background: var(--mc-status-pending); }
.mc-pill--published { background: var(--mc-status-published); }
.mc-pill--rejected { background: var(--mc-status-rejected); }
.mc-pill--muted { background: var(--mc-muted); }
.mc-pill--accent { background: var(--mc-pink); }
.mc-pill--selected { outline: 2px solid var(--mc-peach); outline-offset: 1px; }

/* accent standard (option B, picked 2026-08-02): buttons stay ink; pink/peach
   in pills, focus rings, hovers; maroon reserved for stats and emphasis */
.mc-stat {
  font-family: var(--mc-font-heading);
  font-weight: 600;
  font-size: 1.9rem;
  line-height: 1.1;
  color: var(--mc-maroon);
}

/* data-hierarchy standard (option 1 "serif-led", picked 2026-08-02):
   question in Petrona 600, answer in smaller mono, meta as caps label */
.mc-q {
  font-family: var(--mc-font-heading);
  font-weight: 600;
  font-size: 1.05rem;
  margin: 0 0 3px;
}
.mc-a { font-size: .85rem; margin: 0; }
.mc-meta {
  font-family: var(--mc-font-body);
  font-size: var(--mc-label-s);
  text-transform: uppercase;
  letter-spacing: var(--mc-track-btn);
  opacity: .55;
}

.mc-input {
  font-family: var(--mc-font-body);
  font-size: var(--mc-label-l);
  color: var(--mc-ink);
  background: var(--mc-surface);
  border: 1px solid var(--mc-border);
  border-radius: var(--mc-r-pill);
  padding: 12px 18px;
  width: 100%;
  box-sizing: border-box;
}
.mc-input:focus { outline: 2px solid var(--mc-peach); outline-offset: 1px; }
textarea.mc-input { border-radius: var(--mc-r-subtle); }

/* data tables — zebra rows, sticky header, tabular figures */
.mc-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.mc-table th {
  position: sticky; top: 0;
  background: var(--mc-surface);
  font-family: var(--mc-font-body);
  font-size: var(--mc-label-s);
  text-transform: uppercase;
  letter-spacing: var(--mc-track-btn);
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--mc-border);
}
.mc-table td { padding: 8px 10px; border-bottom: 1px solid rgba(11,11,11,.08); }
.mc-table tbody tr:nth-child(even) { background: rgba(11,11,11,.03); }
.mc-table .num { text-align: right; }

.mc-empty {
  text-align: center;
  padding: 32px 16px;
  border: 1px dashed var(--mc-muted);
  border-radius: var(--mc-r-panel);
  font-family: var(--mc-font-body);
  font-size: var(--mc-label-l);
  color: rgba(11,11,11,.55);
}

/* ---- admin app bar (injected by /admin-nav.js into #admin-nav) ---- */
.mc-nav {
  position: sticky; top: 0; z-index: 40;
  background: var(--mc-surface);
  border-bottom: 1px solid var(--mc-border);
}
.mc-nav__in {
  max-width: var(--mc-max-admin); margin: 0 auto; padding: 0 16px;
  display: flex; align-items: stretch; gap: 18px; min-height: 52px;
}
.mc-nav__brand {
  display: flex; align-items: center; gap: 9px; flex: none;
  font-family: var(--mc-font-heading); font-weight: 500; font-size: 1.15rem;
  color: var(--mc-ink); text-decoration: none;
}
.mc-nav__brand img { width: 24px; height: 24px; border-radius: 7px; display: block; }
.mc-nav__scope {
  font-family: var(--mc-font-body); font-size: var(--mc-label-xs);
  text-transform: uppercase; letter-spacing: var(--mc-track-btn);
  opacity: .5; align-self: center; margin-top: 3px;
}
.mc-nav__tabs {
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
}
.mc-nav__tabs::-webkit-scrollbar { display: none; }
.mc-nav__tab {
  display: flex; align-items: center; padding: 0 10px;
  font-family: var(--mc-font-body); font-size: var(--mc-label-m);
  text-transform: uppercase; letter-spacing: var(--mc-track-btn);
  color: var(--mc-ink); text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent; opacity: .55;
}
.mc-nav__tab:hover { opacity: .85; }
.mc-nav__tab.is-on { border-bottom-color: var(--mc-ink); opacity: 1; }
.mc-nav__logout {
  margin-left: auto; align-self: center; flex: none;
  font-family: var(--mc-font-body); font-size: var(--mc-label-s);
  text-transform: uppercase; letter-spacing: var(--mc-track-btn);
  color: var(--mc-ink); background: none;
  border: 1px solid var(--mc-border); border-radius: var(--mc-r-pill);
  padding: 6px 14px; cursor: pointer;
}
.mc-nav__logout:hover { background: var(--mc-ink); color: var(--mc-surface); }
@media (max-width: 640px) {
  .mc-nav__in { gap: 10px; }
  .mc-nav__scope { display: none; }
}

/* ---- authed boot (kills the login flash) ----
   An inline <head> script adds .mc-authed when the session key exists, before
   first paint; page JS adds .mc-ready once data lands, or drops .mc-authed on
   a 401. The login form only paints when there is genuinely no session. */
html.mc-authed #login-card { display: none; }
html.mc-authed:not(.mc-ready) body::after {
  content: "loading\2026";
  display: block; text-align: center; padding: 34px 0;
  font-family: var(--mc-font-body); font-size: var(--mc-label-m);
  text-transform: uppercase; letter-spacing: var(--mc-track-btn); opacity: .5;
}