/* CacheBrief look: ARCADE (games, emulation, decompilation, reverse engineering, Pokemon).
   Derived from Iris (briefcase-frontend-design/design-system-iris): violet #7c4dff / #b59cff,
   Bricolage Grotesque + Geist Mono, 40px line grid. Adds coin yellow as the second accent and a
   subtle CRT layer (scanlines + vignette) that sits under text and never over a logo plate.
   DESIGN, 2026-09-27. Status: provisional. */

@font-face {
  font-family: "CB Bricolage";
  src: url("../../fonts/bricolage-grotesque-latin-opsz-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "CB Geist Mono";
  src: url("../../fonts/geist-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}

:root {
  --cb-look: "arcade";

  --cb-bg: #12101a;
  --cb-bg-deep: #0b0911;
  --cb-surface-soft: #15131e;
  --cb-surface: #1a1724;
  --cb-surface-raised: #201c2b;
  --cb-text: #f4f2fa;
  --cb-muted: #b0a9c4;          /* Iris #9d97ae, raised for video */
  --cb-line: #2d2839;
  --cb-line-strong: #6e6587;
  --cb-accent: #7c4dff;
  --cb-accent-text: #b59cff;    /* 8.2:1 on bg */
  --cb-accent-2: #ffd84d;       /* coin yellow: scores, the one fact to remember */
  --cb-on-accent: #ffffff;
  --cb-danger: #ff8a8f;
  --cb-success: #6fd3a6;
  --cb-glow: rgba(124, 77, 255, 0.26);

  --cb-cap-band: rgba(10, 8, 16, 0.9);
  --cb-cap-edge: rgba(181, 156, 255, 0.22);
  --cb-cap-ink: #f4f2fa;
  --cb-cap-hi: #ffd84d;
  --cb-cap-dim: 0.46;
  --cb-chip-bg: rgba(22, 19, 31, 0.92);

  --cb-plate-light: #ffffff;
  --cb-plate-light-line: #e4e0ee;
  --cb-plate-dark: #0b0911;
  --cb-plate-dark-line: #2d2839;
  --cb-plate-shadow: 0 30px 80px rgba(6, 2, 16, 0.6), 0 0 0 1px rgba(181, 156, 255, 0.08);

  --cb-font-display: "CB Bricolage", system-ui, sans-serif;
  --cb-font-body: "CB Bricolage", system-ui, sans-serif;
  --cb-font-mono: "CB Geist Mono", ui-monospace, monospace;
  --cb-display-weight: 760;
  --cb-display-tracking: -0.04em;
  --cb-display-leading: 1;
  --cb-body-weight: 500;

  --cb-v-hero: 148px;
  --cb-v-headline: 100px;
  --cb-v-title: 66px;
  --cb-v-body: 48px;
  --cb-v-label: 40px;
  --cb-v-min: 36px;
  --cb-w-hero: 136px;
  --cb-w-headline: 88px;
  --cb-w-title: 58px;
  --cb-w-body: 42px;
  --cb-w-label: 32px;
  --cb-w-min: 30px;

  --cb-radius-sm: 4px;
  --cb-radius: 6px;
  --cb-radius-lg: 8px;
  --cb-grid: 40px;
  --cb-pixel: 8px;              /* step size for stepped corners and stepped motion */
}

/* ---------- background recipe ---------- */
.cb-bg-far {
  position: absolute;
  inset: -12%;
  background:
    radial-gradient(50% 30% at 50% 8%, var(--cb-glow), transparent 72%),
    radial-gradient(40% 26% at 88% 82%, rgba(255, 216, 77, 0.07), transparent 70%);
}
.cb-bg-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(181, 156, 255, 0.07) 2px, transparent 2px) 0 0 / var(--cb-grid) var(--cb-grid),
    linear-gradient(90deg, rgba(181, 156, 255, 0.07) 2px, transparent 2px) 0 0 / var(--cb-grid) var(--cb-grid);
}
/* near: a horizon of stepped "pixel hills" across the bottom of the frame */
.cb-bg-floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22%;
  background:
    linear-gradient(180deg, rgba(124, 77, 255, 0.28), rgba(124, 77, 255, 0.05)) bottom / 100% 100% no-repeat;
  clip-path: polygon(0 40%, 8% 40%, 8% 24%, 20% 24%, 20% 8%, 34% 8%, 34% 32%, 46% 32%, 46% 16%, 62% 16%,
    62% 36%, 74% 36%, 74% 20%, 88% 20%, 88% 44%, 100% 44%, 100% 100%, 0 100%);
}
.cb-frame--w .cb-bg-floor {
  height: 20%;
  opacity: 0.8;
}
/* CRT: scanlines (3px dark in a 6px period, 14%) plus a vignette. Place it above the background and
   any stock image, below text, plates and captions. It is static; never animate it. */
.cb-crt {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.14) 0 3px, transparent 3px 6px),
    radial-gradient(120% 90% at 50% 45%, transparent 60%, rgba(0, 0, 0, 0.45) 100%);
}

.cb-eyebrow {
  font-family: var(--cb-font-mono);
  font-weight: 600;
  font-size: var(--cb-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cb-accent-2);
}
.cb-headline {
  font-family: var(--cb-font-display);
  font-weight: var(--cb-display-weight);
  font-size: var(--cb-headline);
  letter-spacing: var(--cb-display-tracking);
  line-height: var(--cb-display-leading);
  font-optical-sizing: auto;
  text-wrap: balance;
}
.cb-headline em {
  font-style: normal;
  color: var(--cb-accent-text);
}
/* stepped (pixel) corners for cards the look owns; never for logo plates */
.cb-pixel-corners {
  clip-path: polygon(0 var(--cb-pixel), var(--cb-pixel) var(--cb-pixel), var(--cb-pixel) 0,
    calc(100% - var(--cb-pixel)) 0, calc(100% - var(--cb-pixel)) var(--cb-pixel), 100% var(--cb-pixel),
    100% calc(100% - var(--cb-pixel)), calc(100% - var(--cb-pixel)) calc(100% - var(--cb-pixel)),
    calc(100% - var(--cb-pixel)) 100%, var(--cb-pixel) 100%, var(--cb-pixel) calc(100% - var(--cb-pixel)),
    0 calc(100% - var(--cb-pixel)));
}