/* tokens/fonts.css */
/* Primitive font assets. All files are self-hosted under ../assets/fonts/. */
@font-face{
  font-family:"Archivo";
  font-style:normal;
  font-weight:300 600;
  font-display:swap;
  src:url("assets/fonts/archivo-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Noto Sans Hebrew";
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url("assets/fonts/notosanshebrew-300-700.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0590-05FF,U+2000-206F,U+20AA,U+FB1D-FB4F;
}
@font-face{
  font-family:"Space Mono";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("assets/fonts/spacemono-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Space Mono";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("assets/fonts/spacemono-700-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --font-sans-latin:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-sans-hebrew:"Noto Sans Hebrew",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono-latin:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --font-sans:var(--font-sans-latin);
  --font-mono:var(--font-mono-latin);
  --numerals-tabular:tabular-nums; /* @kind other */
}
/* tokens/colors.css */
:root{
  /* graphite ramp */
  --ink-900:#0e0e0e;   /* row hover */
  --ink-850:#141414;   /* dot grid */
  --ink-800:#1c1c1c;   /* header plate */
  --ink-750:#242424;   /* legacy source hairline */
  --ink-700:#262626;   /* page */
  --ink-650:#3a3a3a;   /* quiet structural line */
  --gray-700:#707070;  /* control boundary, 3.06:1 on page */
  --gray-600:#8d8d8d;
  --gray-400:#9a9a9a;
  --gray-200:#c4c4c4;
  --slate-200:var(--gray-200); /* compatibility alias; no chromatic neutral */
  --white:#ffffff;

  /* signal */
  --signal-500:#ff7a1a;
  --signal-600:var(--signal-500); /* compatibility alias: orange owns interaction */

  /* semantic surfaces */
  --surface-page:var(--ink-700);
  --surface-header:var(--ink-800);
  --surface-hover:var(--ink-900);
  --surface-invert:var(--white);
  --dot-grid:var(--ink-850);
  --dot-grid-soft:#1e1e1e;

  /* semantic text */
  --text-strong:var(--white);
  --text-credential:var(--gray-200);
  --text-body:var(--text-credential); /* compatibility alias */
  --text-support:var(--gray-400);
  --text-faint:var(--gray-600);
  --text-on-invert:#000000;

  /* semantic structure + signal */
  --line-subtle:var(--ink-650);
  --line-control:var(--gray-700);
  --line:var(--line-subtle); /* compatibility alias */
  --signal:var(--signal-500);
  --signal-hot:var(--signal-500);
  --focus-ring:2px solid var(--signal-500);
}
/* tokens/typography.css */
:root{
  --weight-light:300; /* @kind font */
  --weight-regular:400; /* @kind font */
  --weight-medium:500; /* @kind font */
  --weight-semibold:600; /* @kind font */

  /* fluid display */
  --size-display-1:clamp(2.25rem,7.4vw,4.25rem);
  --size-display-2:clamp(2rem,5vw,3.5rem);
  --size-metric:clamp(3rem,7vw,5rem);
  --size-hero-overline:clamp(.875rem,1.55vw,1.03125rem);

  /* static */
  --size-lead:1.0625rem;
  --size-row-title:1.25rem;
  --size-body:1rem;
  --size-small:.9375rem;
  --size-xsmall:.8125rem;
  --size-mono-lg:1.03rem;
  --size-mono-md:.9375rem;
  --size-mono:.75rem;
  --size-mono-sm:.6875rem;
  --size-mono-xs:.625rem;
  --size-arrow:1.75rem;

  --lh-flat:1; /* @kind other */
  --lh-title:1.35; /* @kind other */
  --lh-body:1.6; /* @kind other */
  --lh-row:1.65; /* @kind other */
  --lh-lead:1.75; /* @kind other */
  --lh-mono-stack:2; /* @kind other */

  --track-display:-.04em; /* @kind other */
  --track-hero:.03em; /* @kind other */
  --track-title:-.02em; /* @kind other */
  --track-name:.02em; /* @kind other */
  --track-mono:.16em; /* @kind other */
  --track-nav:.18em; /* @kind other */
  --track-mono-wide:.2em; /* @kind other */
  --track-overline:.24em; /* @kind other */

  --measure-lead:38rem; /* @kind spacing */
  --measure-hero:36rem; /* @kind spacing */

  /* semantic type roles */
  --font-body:var(--font-sans-latin);
  --font-display:var(--font-sans-latin);
  --font-label:var(--font-mono-latin);
  --font-technical:var(--font-mono-latin);
  --font-brand-lockup:var(--font-mono-latin);
  --track-display-role:var(--track-display);
  --track-hero-role:var(--track-hero);
  --track-title-role:var(--track-title);
  --track-label-role:var(--track-mono);
  --track-nav-role:var(--track-nav);
  --track-overline-role:var(--track-overline);
  --track-credential-role:var(--track-mono-wide);
  --transform-label-role:uppercase;

  /* component type tokens */
  --type-button-family:var(--font-label);
  --type-button-size:var(--size-mono);
  --type-button-track:var(--track-label-role);
  --type-button-transform:var(--transform-label-role);
  --type-nav-family:var(--font-label);
  --type-nav-size:var(--size-mono-sm);
  --type-nav-track:var(--track-nav-role);
  --type-nav-transform:var(--transform-label-role);
  --type-overline-family:var(--font-label);
  --type-overline-track:var(--track-overline-role);
  --type-overline-transform:var(--transform-label-role);
  --type-row-title-track:var(--track-title-role);
  --type-credential-family:var(--font-label);
  --type-credential-track:var(--track-credential-role);
  --type-credential-transform:var(--transform-label-role);
  --type-metric-label-family:var(--font-label);
  --type-metric-label-track:var(--track-label-role);
  --type-metric-label-transform:var(--transform-label-role);
}

:where(html,.mbg-page):lang(he){
  --font-body:var(--font-sans-hebrew);
  --font-display:var(--font-sans-hebrew);
  --font-label:var(--font-sans-hebrew);
  --track-display-role:0;
  --track-hero-role:0;
  --track-title-role:0;
  --track-label-role:0;
  --track-nav-role:0;
  --track-overline-role:0;
  --track-credential-role:0;
  --transform-label-role:none;
}
/* tokens/spacing.css */
:root{
  --sp-05:2px;
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:20px;
  --sp-6:24px;
  --sp-7:28px;
  --sp-8:32px;
  --sp-10:40px;
  --sp-12:48px;
  --sp-14:56px;
  --sp-18:72px;

  /* rhythm */
  --rhythm-overline-title:1.25rem;
  --rhythm-title-lead:1.5rem;
  --rhythm-lead-block:1.75rem;
  --rhythm-block:2.5rem;
  --rhythm-grid:3.5rem;
  --rhythm-section-start:clamp(3rem,6vw,5.5rem); /* @kind spacing */
  --rhythm-section-end:clamp(1.75rem,3vw,2.5rem); /* @kind spacing */
  --rhythm-hero-start:clamp(3.5rem,8vw,7rem); /* @kind spacing */
  --rhythm-hero-gap:clamp(2.5rem,5vw,4.5rem); /* @kind spacing */
  --pad-row:1.5rem .875rem; /* @kind spacing */
  --pad-tile:2rem 1.75rem; /* @kind spacing */
}
/* tokens/shape.css */
:root{
  /* the system is square: no radii except the pulse dot and avatars */
  --radius-0:0;
  --radius-round:50%;

  --border-width:1px;
  --border-subtle:var(--border-width) solid var(--line-subtle); /* @kind other */
  --border-control:var(--border-width) solid var(--line-control); /* @kind other */
  --border:var(--border-subtle); /* compatibility alias */
  --dot-size:12px;
  --dot-border:2px solid var(--signal); /* @kind other */

  --grid-dot-tile:14px 14px; /* @kind other */
  --grid-dot-tile-fine:8px 8px; /* @kind other */

  /* hit sizes */
  --hit-min:44px;
  --hit-lang:44px;
  --hit-row:52px;
  --hit-button:56px;

  /* depth comes from tone and hairlines, not shadow */
  --elev-0:none; /* @kind shadow */
}
/* tokens/motion.css */
:root{
  --dur-fast:120ms; /* @kind other */
  --dur:140ms; /* @kind other */
  --dur-pulse:2s; /* @kind other */
  --ease-out:cubic-bezier(.2,.6,.2,1); /* @kind other */
}

@keyframes mbg-pulse{0%,100%{opacity:.25}50%{opacity:1}}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition-duration:.01ms !important;}
}
/* tokens/layout.css */
:root{
  --container:84rem;
  --gutter:2rem;
  --container-inline:min(100% - var(--gutter),var(--container));
  --portrait-max:20rem;
  --bp-md:48rem; /* @kind other */   /* 768px  */
  --bp-lg:64rem; /* @kind other */   /* 1024px */
}
/* tokens/base.css */
html{background:var(--surface-page);}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--size-body);
  line-height:var(--lh-body);
  color:var(--text-strong);
  background:var(--surface-page);
}
*,*::before,*::after{box-sizing:border-box;}
a{color:var(--text-strong);text-decoration:none;}
a:hover{color:var(--signal);}
:where(a,button,summary):focus-visible{outline:var(--focus-ring);outline-offset:3px;}
summary::-webkit-details-marker{display:none;}

.mbg-page{
  min-block-size:100vh;
  background:var(--surface-page);
  color:var(--text-strong);
  background-image:radial-gradient(circle at 1px 1px,var(--dot-grid) 1px,transparent 0);
  background-size:var(--grid-dot-tile);
}
.mbg-container{inline-size:var(--container-inline);margin-inline:auto;}
.mbg-mono,.mbg-technical{font-family:var(--font-technical);}
.mbg-label{
  font-family:var(--font-label);
  letter-spacing:var(--track-label-role);
  text-transform:var(--transform-label-role);
}
.mbg-overline{
  font-family:var(--type-overline-family);
  font-size:var(--size-mono-sm);
  letter-spacing:var(--type-overline-track);
  text-transform:var(--type-overline-transform);
  color:var(--signal);
}
.mbg-lead{
  max-inline-size:var(--measure-lead);
  font-size:var(--size-lead);
  line-height:var(--lh-lead);
  color:var(--text-support);
  text-wrap:pretty;
}
.mbg-hairline{border-block-end:var(--border-subtle);}
.mbg-isolate{unicode-bidi:isolate;}
.mbg-ltr{direction:ltr;unicode-bidi:isolate;}
.mbg-language-fragment:lang(en){font-family:var(--font-sans-latin);}
.mbg-tabular{font-variant-numeric:var(--numerals-tabular);}
/* tokens/components.css */
/* Structural rules that inline styles cannot express (breakpoints, hover descendants). */

.mbg-index{display:grid;grid-template-columns:1fr;border-block-start:var(--border-subtle);}
.mbg-row{
  display:grid;
  grid-template-columns:2.75rem minmax(0,1fr) 2rem;
  gap:.5rem 1.25rem;
  padding:var(--pad-row);
  border-block-end:var(--border-subtle);
  transition:background var(--dur-fast) var(--ease-out);
}
.mbg-row-idx{grid-column:1;grid-row:1;align-self:baseline;}
.mbg-row-title{grid-column:2;grid-row:1;align-self:baseline;letter-spacing:var(--type-row-title-track);}
.mbg-row-desc{grid-column:2;grid-row:2;}
.mbg-row-arrow{grid-column:3;grid-row:1;justify-self:end;align-self:baseline;}
.mbg-row:hover{background:var(--surface-hover);}
.mbg-row:hover .mbg-row-idx{color:var(--signal-hot);}
.mbg-row:hover .mbg-row-arrow{opacity:1;}

.mbg-hero{display:grid;grid-template-columns:1fr;gap:var(--rhythm-hero-gap);}
.mbg-metrics{
  list-style:none;margin:0;padding:0;display:grid;gap:1px;
  grid-template-columns:1fr;background:var(--line-subtle);border:var(--border-subtle);
}

@media (min-width:48rem){
  .mbg-index{grid-template-columns:1fr 1fr;column-gap:2.5rem;}
  .mbg-metrics{grid-template-columns:repeat(3,1fr);}
  .mbg-row{align-items:start;align-content:start;}
  .mbg-hero{grid-template-columns:1.2fr 1fr;align-items:center;}
}
@media (min-width:64rem){
  .mbg-hero{grid-template-columns:1fr 20rem;}
}