/* ============================================================
 * MEGA BUDDIES DESIGN SYSTEM — tokens
 * "Brutalist-minimal Web3", dark inversion.
 *
 * Lineage: derived from the AGEM design system (warm-gray light
 * theme) and inverted to a near-black ground. Everything else —
 * clip-path geometry, monospace body, [BRACKETED] nav, UPPERCASE
 * chrome, zero gradients/shadows/blur — is carried over verbatim.
 *
 * MIRROR: .claude/skills/mega-buddies-design/tokens.css
 * Change one, change the other.
 * ============================================================ */

/* One request, three families. VT323 and Press Start 2P are rendered by
   `[data-theme='origin']` and by nothing else, and a browser fetches a face
   only when something on the page is actually set in it — so the archive
   costs every other visitor the bytes of two extra @font-face blocks and
   not one font file. */
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=VT323&family=Press+Start+2P&display=swap');

/* ROBINHOOD DADDY is the default, so its palette lives on bare `:root` and
   the absence of `data-theme` is this theme. `[data-theme='paper']` is kept
   beside it as an alias and must not be dropped: `paper` is the literal
   string sitting in `localStorage['mb-theme']` for everyone who picked this
   theme while it was still an override, and the switcher is free to leave
   that value stored while removing the attribute.

   The palette is Robinhood's own — lime #CCFF00, ground #1C180C, olive
   #8AA315. `--mb-light-*` is not "light", it is the counter-ground; here it
   is the pale end of the same lime.

   One brand, one hue. Pink and green are two roles, not two colours, and
   Robinhood does not supply a second hue to give the second role — so the
   loud role takes the lime and the quiet one takes the olive, and they are
   told apart by weight rather than by hue. Do not reach outside the three
   brand colours to invent a contrast that the brand does not have. */
:root,
[data-theme='paper'] {
  /* -------------------- CORE ------------------------------- */
  --mb-bg: #1C180C;            /* brand ground — warm near-black */
  --mb-surface: #262111;       /* cards, raised chrome */
  --mb-surface-2: #322C16;     /* inputs, hover fills */
  --mb-fg: #EDF3D9;            /* 15.54:1 on the ground */

  /* -------------------- TEXT SCALE ------------------------- */
  --mb-text-2: #A8AF8C;        /* 7.74:1 — AA body */
  --mb-text-3: #6F7659;        /* 3.72:1 — tertiary / disabled */
  --mb-text-on-light: #1C180C; /* text inside inverted bands */

  /* -------------------- BORDERS ---------------------------- */
  --mb-border: #3E3822;                      /* default 1px */
  --mb-border-soft: rgba(237, 243, 217, 0.14);
  --mb-border-faint: rgba(237, 243, 217, 0.07);
  --mb-overlay: rgba(10, 9, 3, 0.82);        /* modal scrim */

  /* -------------------- INVERTED BAND ---------------------- */
  /* The one contrast device: flip to the counter-ground. No third colour.
     The pale end of the lime, not the lime itself — a full #CCFF00 band is
     the most on-brand thing this palette can do and also the one thing the
     ration forbids: a whole section painted in the accent leaves nothing
     for the accent to mean. */
  --mb-light-bg: #E8F0C8;
  --mb-light-fg: #1C180C;      /* 14.96:1 */
  --mb-light-border: #CBD5A2;
  --mb-light-text-2: #5A5A40;  /* 5.97:1 */

  /* The band's own accent pair. `--mb-pink` and `--mb-green` are tuned
     against the page ground and are illegible on the band that inverts it
     — measured, not assumed. With one hue to work in, the two roles
     separate by chroma rather than by colour: the loud one is saturated
     green and reads as an accent beside near-black body copy, the quiet
     one is a near-neutral dark olive that is legible without claiming
     attention. #3F4A06 was tried for the loud role first and disappeared
     into the body text — dark enough to pass at 8:1 and too grey to read
     as an accent at all, which is a legibility number answering the wrong
     question. Use these for any accent inside `.mb-section--invert`; use
     the plain ones everywhere else. */
  --mb-light-pink: #4E6B00;    /* 5.17:1 on #E8F0C8 */
  --mb-light-green: #3F4A06;   /* 8.08:1 on #E8F0C8 */

  /* -------------------- SOLID ACTION ----------------------- */
  /* What a filled `.mb-btn--solid` is painted in — the one place a theme
     is allowed to put its brand colour on something that is not a status.
     The brand lime, 15.08:1 against the dark it carries, and the reason
     this theme reads as Robinhood rather than as a warm grey. A theme
     without a brand colour defines the pair AS fg/bg and nothing changes
     for it. */
  --mb-solid-bg: #CCFF00;
  --mb-solid-fg: #1C180C;

  /* -------------------- ACCENTS (use sparingly) ------------ */
  /* Brand lime carries the loud role — pinned, live, the one accent line
     per section. Brand olive carries the settled one — done, current,
     links. 15.08:1 and 6.18:1 on the ground. */
  --mb-pink: #CCFF00;   /* $BUDDY marks, alerts, live/pinned state */
  --mb-green: #8AA315;  /* success, complete, links, online */
  --mb-error: #F0533A;  /* 5.06:1 — the one colour from outside the
                           palette, because "wrong" cannot be said in the
                           same hue as "done" */

  /* Status tints — muted: ~12% bg, ~28% border */
  --mb-status-live-bg: rgba(204, 255, 0, 0.12);
  --mb-status-live-border: rgba(204, 255, 0, 0.34);
  --mb-status-done-bg: rgba(138, 163, 21, 0.14);
  --mb-status-done-border: rgba(138, 163, 21, 0.36);
  --mb-status-idle-bg: rgba(237, 243, 217, 0.06);
  --mb-status-idle-border: rgba(237, 243, 217, 0.16);

  /* -------------------- TYPE ------------------------------- */
  --mb-font-mono: 'Courier Prime', 'Courier New', Courier, monospace;
  --mb-font-display: 'Helvetica Neue', 'HelveticaNeue', 'Arial Black', 'Arial Bold', Arial, sans-serif;

  /* Scale — desktop <1920px */
  --mb-fs-10xl: 160px;  /* hero wordmark */
  --mb-fs-9xl: 90px;
  --mb-fs-6xl: 64px;
  --mb-fs-5xl: 56px;    /* section H2 */
  --mb-fs-4xl: 36px;    /* big numerals */
  --mb-fs-3xl: 30px;
  --mb-fs-2xl: 24px;    /* card titles */
  --mb-fs-xl: 20px;
  --mb-fs-l: 18px;
  --mb-fs-m: 16px;      /* body */
  --mb-fs-s: 14px;      /* card text, buttons */
  --mb-fs-xs: 12px;     /* labels */
  --mb-fs-2xs: 10px;    /* micro labels, badges */

  --mb-lh-heading: 0.95;
  --mb-lh-body: 1.5;
  --mb-lh-tight: 1;

  --mb-fw-regular: 400;
  --mb-fw-bold: 700;

  /* -------------------- LAYOUT ----------------------------- */
  --mb-content-width: 1286px;
  --mb-nav-height: 48px;
  --mb-pad-x: 16px;
  --mb-pad-x-desktop: 32px;
  --mb-pad-x-wide: 64px;
  --mb-section-y: 96px;

  /* -------------------- MODULE ----------------------------- */
  /* The one new primitive. 8px is already the terminal chamfer and
     4px is already the card chamfer — the module makes that number the
     unit of motion as well as of geometry. */
  --mb-px: 8px;
  --mb-px-half: 4px;
  --mb-px-bed: 16px;

  /* What a module mask is painted in. It has to be the ground of whatever
     the mask covers, not the page's — every band that uses the mask is an
     inverted one, and paying the page ground there flashed the band dark
     for the frames between the overlay being built and the dither starting.
     Inherited, so an overlay never has to know which band it sits in. */
  --mb-px-mask: var(--mb-bg);

  /* What a module painted in `mix-blend-mode: difference` is filled with.
     Not a colour anybody sees — it is the operand, and what lands on
     screen is the distance from whatever is behind it. The foreground
     token is the wrong operand for exactly that reason: against the
     foreground-coloured wordmark it differences to nothing, so the effect
     disappears over the letters it is supposed to invert, and on `paper`
     it barely separates from the ground either. A mid grey is far from
     both ends in every theme, which is why `.mb-px-bed` already picks the
     same value for the same reason, and why this one does not vary by
     theme. */
  --mb-px-blend: #808080;
}

/* 4K scale-up */
@media (min-width: 1921px) {
  :root {
    --mb-fs-10xl: 200px;
    --mb-fs-5xl: 72px;
    --mb-fs-4xl: 48px;
    --mb-fs-2xl: 30px;
    --mb-fs-xl: 24px;
    --mb-fs-s: 16px;
    --mb-content-width: 1736px;
  }
}

/* Tablet */
@media (max-width: 1024px) {
  :root {
    --mb-fs-10xl: 96px;
    --mb-fs-5xl: 44px;
    --mb-section-y: 72px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  :root {
    --mb-fs-10xl: 56px;
    --mb-fs-9xl: 40px;
    --mb-fs-6xl: 40px;
    --mb-fs-5xl: 32px;
    --mb-fs-4xl: 26px;
    --mb-fs-3xl: 22px;
    --mb-fs-2xl: 18px;
    --mb-fs-xl: 16px;
    --mb-nav-height: 44px;
    --mb-section-y: 56px;
    --mb-px: 12px;   /* a finger is coarser than a cursor */
  }
}

/* ============================================================
 * THEMES
 *
 * Only values change — never token names — so every component rule
 * in css/mb.css inherits a theme without being touched.
 *
 * The absence of `data-theme` is ROBINHOOD DADDY, whose palette is on
 * bare `:root` above. Without JavaScript, with a cold localStorage or
 * with a failed script, the site renders in the default theme — which
 * is the whole meaning of "default" here.
 *
 * A stored name that is not in this file — `plum`, retired with the
 * roster it belonged to, or anything hand-edited — matches no selector
 * and falls through to the default. That fall-through IS the migration;
 * there is deliberately no alias for the retired name.
 *
 * `--mb-light-*` is the counter-ground of the current theme, not
 * "light": in every theme shipped today the inverted band is the pale
 * one, but the token is named for its role, not its lightness.
 * `.mb-section--invert` stays the only contrast device in every theme.
 * ============================================================ */

/* MEGAETH CHAD in the menu, `night` on the attribute. The key is not
   renamed and must not be: it is what sits in `localStorage['mb-theme']`
   for everyone who has already picked this theme, it is spelled out again
   in the inline <head> script on every page, and `tools/audit.js` takes it
   as `--theme=night`. A rename signs those visitors out of their choice to
   fix a word only this file can see.

   This is the palette the rebuilt site launched with: neutral near-black,
   warm gray-beige type, pink and green as the two accent roles. */
[data-theme='night'] {
  --mb-bg: #0F0F10;            /* page ground — near-black, NOT pure black */
  --mb-surface: #1A1A1B;
  --mb-surface-2: #232324;
  --mb-fg: #DFD9D9;            /* primary text — warm gray-beige */

  --mb-text-2: #8A8785;
  --mb-text-3: #5A5755;
  --mb-text-on-light: #1A1A1B;

  --mb-border: #3A3A3B;
  --mb-border-soft: rgba(223, 217, 217, 0.14);
  --mb-border-faint: rgba(223, 217, 217, 0.07);
  --mb-overlay: rgba(0, 0, 0, 0.8);

  --mb-light-bg: #DFD9D9;
  --mb-light-fg: #1A1A1B;
  --mb-light-border: #CBC5C5;
  --mb-light-text-2: #5E5E5E;  /* 4.65:1 on #DFD9D9 — AA for body text */

  /* The shipped #F85385 reads 2.29:1 on #DFD9D9 and #32B288 reads 1.92:1,
     both under the 3:1 floor for anything at all — hence the band's own
     pair, here as in every other theme. */
  --mb-light-pink: #A81A4A;    /* 5.17:1 on #DFD9D9 */
  --mb-light-green: #0F6B4E;   /* 4.66:1 on #DFD9D9 */

  /* No brand colour of its own, so the filled button is the foreground
     pair and looks exactly as it always did. */
  --mb-solid-bg: var(--mb-fg);
  --mb-solid-fg: var(--mb-bg);

  --mb-pink: #F85385;
  --mb-green: #32B288;
  --mb-error: #DC2626;

  --mb-status-live-bg: rgba(248, 83, 133, 0.12);
  --mb-status-live-border: rgba(248, 83, 133, 0.28);
  --mb-status-done-bg: rgba(50, 178, 136, 0.12);
  --mb-status-done-border: rgba(50, 178, 136, 0.28);
  --mb-status-idle-bg: rgba(223, 217, 217, 0.06);
  --mb-status-idle-border: rgba(223, 217, 217, 0.16);
}

/* BUDDY ORIGIN in the menu, `origin` on the attribute — the styling of the
   site Mega Buddies ran before the rebuild, kept as an exhibit.
 *
 * This is the one theme that is not a palette swap. The rest of it — glow,
 * radius, gradients, the CRT chrome — lives in css/mb-origin.css, which is
 * the only file in this repo allowed to break the style book, and the
 * warning that fronts the theme is built by js/mb-site.js. Values here are
 * the old stylesheet's own, from website-old/css/style.css:345.
 *
 * Do not copy anything from this block into a component. It is an archive,
 * not a source. */
[data-theme='origin'] {
  --mb-bg: #121218;            /* --background-color */
  --mb-surface: #1A1A22;       /* the old cards' rgba(18,18,24,.8), opaque */
  --mb-surface-2: #222228;     /* --terminal-bg, warmed to the ground */
  --mb-fg: #DFD9D9;            /* --text-color */

  --mb-text-2: #BBB9B9;        /* --muted-accent, 9.55:1 */
  --mb-text-3: #929397;        /* --accent-color, 6.08:1 */
  --mb-text-on-light: #121218;

  /* The old site drew every border in the accent grey at 1–2px. Softened
     one step so a page of bordered boxes does not read as a wireframe. */
  --mb-border: #5A5B60;
  --mb-border-soft: rgba(223, 217, 217, 0.16);
  --mb-border-faint: rgba(223, 217, 217, 0.08);
  --mb-overlay: rgba(8, 8, 12, 0.86);

  /* The old site had no inverted band, so this pair is the one thing here
     that is invented rather than copied — and it is invented as plainly as
     possible: the page's own type colour as a ground, its own ground as
     type. Nothing about the archive depends on it. */
  --mb-light-bg: #DFD9D9;
  --mb-light-fg: #121218;
  --mb-light-border: #B9B7B7;
  --mb-light-text-2: #55545A;  /* 5.38:1 on #DFD9D9 */
  --mb-light-pink: #0B4C87;    /* 6.28:1 on #DFD9D9 — the blue, darkened */
  --mb-light-green: #33417F;   /* 6.84:1 on #DFD9D9 — the indigo, darkened */

  /* `.btn-primary` was filled in the accent grey with the ground as its
     type — the old site's one solid action, reproduced. 6.08:1 for the
     label it carries. */
  --mb-solid-bg: #929397;
  --mb-solid-fg: #121218;

  --mb-pink: #1391FF;   /* --secondary-color, the loud role, 5.79:1 */
  --mb-green: #7087E3;  /* --light-accent, the quiet role, 5.57:1 */
  --mb-error: #EF5435;  /* --danger-color, 5.32:1 */

  --mb-status-live-bg: rgba(19, 145, 255, 0.14);
  --mb-status-live-border: rgba(19, 145, 255, 0.38);
  --mb-status-done-bg: rgba(112, 135, 227, 0.14);
  --mb-status-done-border: rgba(112, 135, 227, 0.38);
  --mb-status-idle-bg: rgba(223, 217, 217, 0.06);
  --mb-status-idle-border: rgba(223, 217, 217, 0.18);

  /* VT323 for text, Press Start 2P for headings — the two faces the old
     site loaded. Both fall back to Courier so a blocked CDN leaves the
     archive legible rather than set in the browser default. */
  --mb-font-mono: 'VT323', 'Courier New', Courier, monospace;
  --mb-font-display: 'Press Start 2P', 'Courier New', Courier, monospace;

  /* Press Start 2P is roughly twice the advance width per glyph of
     Helvetica Neue Bold, so the display scale cannot be inherited: a 56px
     section title overflows 390px on the second word. These are the old
     site's own numbers — 2rem section headings (style.css:436), 1.5rem
     card headings (style.css:774), clamp(2.5rem, 6vw, 4rem) hero
     (style.css:1190) — which is where they were proven. */
  --mb-fs-10xl: 64px;
  --mb-fs-9xl: 40px;
  --mb-fs-6xl: 40px;
  --mb-fs-5xl: 32px;
  --mb-fs-4xl: 24px;
  --mb-fs-3xl: 20px;
  --mb-fs-2xl: 18px;
  --mb-fs-xl: 16px;

  /* VT323 sits low and small for its declared size; one step up keeps body
     copy at the same reading size the other themes have. */
  --mb-fs-m: 18px;
  --mb-fs-s: 16px;
  --mb-fs-xs: 14px;
  --mb-fs-2xs: 12px;
}

/* The reduced display scale again for narrow screens. The block above is
   unconditional, so without this the phone would inherit desktop-sized
   Press Start 2P — the exact overflow the scale exists to prevent. */
@media (max-width: 768px) {
  [data-theme='origin'] {
    --mb-fs-10xl: 28px;
    --mb-fs-9xl: 22px;
    --mb-fs-6xl: 22px;
    --mb-fs-5xl: 18px;
    --mb-fs-4xl: 16px;
    --mb-fs-3xl: 15px;
    --mb-fs-2xl: 14px;
    --mb-fs-xl: 13px;
  }
}

/* ============================================================
 * CLIP-PATH UTILITIES — the signature geometry.
 * No border-radius exists anywhere in this system.
 * ============================================================ */

.mb-clip-3 {
  clip-path: polygon(
    3px 0, calc(100% - 3px) 0,
    100% 3px, 100% calc(100% - 3px),
    calc(100% - 3px) 100%, 3px 100%,
    0 calc(100% - 3px), 0 3px
  );
}

.mb-clip-4 {
  clip-path: polygon(
    4px 0, calc(100% - 4px) 0,
    100% 4px, 100% calc(100% - 4px),
    calc(100% - 4px) 100%, 4px 100%,
    0 calc(100% - 4px), 0 4px
  );
}

.mb-clip-8 {
  clip-path: polygon(
    8px 0, calc(100% - 8px) 0,
    100% 8px, 100% calc(100% - 8px),
    calc(100% - 8px) 100%, 8px 100%,
    0 calc(100% - 8px), 0 8px
  );
}

.mb-clip-bl {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 24px 100%, 0 calc(100% - 24px));
}

.mb-clip-tl {
  clip-path: polygon(24px 0, 100% 0, 100% 100%, 0 100%, 0 24px);
}