/* ============================================================
   Arbiter Design System — colors + type tokens
   Source: Figma "Arbiter Site Reviews.fig" / 9.12.25-Text-Edits
   ============================================================ */

@font-face {
  font-family: "NeueHaasGroteskDisplay";
  font-weight: 400;
  font-style: normal;
  src: local("Neue Haas Grotesk Display Pro 55 Roman"),
       local("Neue Haas Grotesk Display Pro"),
       local("Helvetica Neue");
}
@font-face {
  font-family: "NeueHaasGroteskDisplay";
  font-weight: 500;
  font-style: normal;
  src: local("Neue Haas Grotesk Display Pro 65 Medium"),
       local("Helvetica Neue Medium");
}
@font-face {
  font-family: "NeueHaasGroteskDisplay";
  font-weight: 700;
  font-style: normal;
  src: local("Neue Haas Grotesk Display Pro 75 Bold"),
       local("Helvetica Neue Bold");
}
@font-face {
  font-family: "NeueHaasGroteskText";
  font-weight: 400;
  font-style: normal;
  src: local("Neue Haas Grotesk Text Pro 55 Roman"),
       local("Neue Haas Grotesk Text Pro"),
       local("Helvetica Neue");
}
@font-face {
  font-family: "NeueHaasGroteskText";
  font-weight: 500;
  font-style: normal;
  src: local("Neue Haas Grotesk Text Pro 65 Medium"),
       local("Helvetica Neue Medium");
}

:root {
  /* ----- Type families ----- */
  --font-display: "NeueHaasGroteskDisplay", "Helvetica Neue", "Inter", Arial, sans-serif;
  --font-text: "NeueHaasGroteskText", "Helvetica Neue", "Inter", Arial, sans-serif;

  /* ----- Color palette (raw) ----- */
  /* neutrals (warm-cool gray scale) */
  --ink-1000: rgb(0, 0, 0);
  --ink-900: rgb(28, 28, 33);     /* primary text */
  --ink-800: rgb(50, 50, 55);     /* secondary text / dark surface */
  --ink-600: rgb(110, 110, 115);  /* eyebrow, muted text */
  --ink-500: rgb(163, 163, 168);  /* placeholder / dim */
  --ink-400: rgb(188, 188, 192);  /* heavy stroke */
  --ink-300: rgb(225, 225, 229);  /* default stroke / divider */
  --ink-200: rgb(242, 242, 245);  /* subtle fill / chip */
  --ink-100: rgb(250, 250, 251);  /* footer / app bg tint */
  --ink-0:   rgb(255, 255, 255);

  /* signature red — the only chromatic brand color */
  --red-700: rgb(200, 30, 0);     /* press/active border */
  --red-600: rgb(218, 30, 64);    /* primary brand red */
  --red-500: rgb(226, 35, 26);    /* alt warning */
  --red-400: rgb(234, 131, 131);  /* hover-fill red */
  --red-200: rgb(246, 175, 175);  /* tint stroke */
  --red-100: rgb(253, 228, 231);  /* hover-tint background */
  --red-50:  rgb(252, 207, 207);

  /* status accents — used sparingly inside dark UI cards */
  --status-ok: rgb(160, 225, 165);
  --status-ok-stroke: rgb(40, 145, 50);

  /* surfaces (elevated/glass) */
  --glass-light: rgba(255, 255, 255, 0.7);
  --glass-dark:  rgba(0, 0, 0, 0.7);
  --glass-blur: blur(20px);

  /* shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-card: 0 4px 25px 2px rgba(0, 0, 0, 0.10);
  --shadow-red: 0 4px 25px 2px rgba(218, 30, 64, 0.30);

  /* radii — Arbiter is decidedly low-radius */
  --r-sharp: 0px;
  --r-xs: 3px;     /* buttons, cards, chips */
  --r-sm: 5px;     /* outlined containers */
  --r-pill: 53px;  /* tag pills */
  --r-bar: 63px;   /* nav pill */
  --r-mobile-bar: 18px;

  /* borders */
  --b-thin: 1px solid var(--ink-300);
  --b-mid:  1px solid var(--ink-400);
  --b-strong: 1px solid var(--ink-900);
  --b-red:  1px solid var(--red-600);
  --b-dashed-spec: 1px dashed rgb(151, 71, 255); /* spec annotation only */

  /* spacing — Arbiter declared scale: 6, 12, 18, 24, 36, 48, 60, 90, 120, 180, 240 */
  --s-1: 6px;
  --s-2: 12px;
  --s-3: 18px;
  --s-4: 24px;
  --s-5: 36px;
  --s-6: 48px;
  --s-7: 60px;
  --s-8: 90px;
  --s-9: 120px;
  --s-10: 180px;
  --s-11: 240px;

  /* tracking */
  --track-display: -0.02em;   /* h1, h2 */
  --track-h2: -0.01em;        /* mid display */
  --track-eyebrow: 0.10em;    /* lowercase 11px eyebrows */

  /* ----- Semantic tokens ----- */
  --bg: var(--ink-0);
  --bg-alt: var(--ink-100);
  --bg-chip: var(--ink-200);
  --fg: var(--ink-900);
  --fg-muted: var(--ink-600);
  --fg-soft: var(--ink-800);
  --fg-on-dark: var(--ink-0);
  --fg-on-red: var(--ink-0);
  --stroke: var(--ink-300);
  --stroke-strong: var(--ink-400);
  --accent: var(--red-600);
  --accent-hover: var(--red-400);
  --accent-tint: var(--red-100);
}

/* =====================================================
   Type scale — semantic
   ===================================================== */

.h1, h1.disp {
  font-family: var(--font-display);
  font-weight: 400;          /* "55 Roman" */
  font-size: 90px;
  line-height: 90px;
  letter-spacing: var(--track-display);
  color: var(--fg);
}
.h1-mobile {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 42px;
  line-height: 42px;
  letter-spacing: var(--track-display);
  color: var(--fg);
}
.h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 48px;
  line-height: 48px;
  letter-spacing: var(--track-h2);
  color: var(--fg);
}
.h2-mobile {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 36px;
  line-height: 36px;
  letter-spacing: var(--track-h2);
  color: var(--fg);
}
.h3 {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 22px;
  line-height: 24px;
  letter-spacing: var(--track-display);
  color: var(--fg);
}
.h4 {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  color: var(--fg);
}
.h5, .eyebrow {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 11px;
  line-height: 20px;
  letter-spacing: var(--track-eyebrow);
  color: var(--fg-muted);
  text-transform: lowercase;
}
.h6 {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 17px;
  line-height: 24px;
  color: var(--fg-muted);
}
.p {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: var(--fg-soft);
}
.p-bold {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: var(--fg);
}
.tag {
  font-family: var(--font-text);
  font-weight: 400;
  font-size: 11px;
  line-height: 20px;
  letter-spacing: var(--track-eyebrow);
  color: var(--ink-900);
  text-transform: lowercase;
}

/* base reset for previews */
html, body { background: var(--bg); color: var(--fg); margin: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body { font-family: var(--font-text); font-size: 14px; line-height: 20px; font-feature-settings: "ss01", "kern"; }
* { box-sizing: border-box; }

/* ----- Selection + focus ----- */
::selection { background: var(--red-100); color: var(--ink-900); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--red-600); outline-offset: 2px; border-radius: 2px; }

/* ----- Subtle hairline divider ----- */
.hairline { border-top: 1px solid var(--ink-300); }

/* ----- Section padding system ----- */
.section-pad { padding: 120px 60px; }
.section-pad-lg { padding: 160px 60px 90px; }
.section-pad-sm { padding: 60px 60px; }

@media (max-width: 900px) {
  .section-pad, .section-pad-lg, .section-pad-sm { padding-left: 24px; padding-right: 24px; }
}

/* ----- Reveal-on-scroll ----- */
.reveal { opacity: 0; transform: translateY(8px); transition: opacity 600ms cubic-bezier(.2,.7,.2,1), transform 600ms cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }