/* CacheBrief look: SIGNAL (AI models, agents, AI software).
   Derived from BriefcaseOS (briefcase-frontend-design/design-system): blue #2f80ed, Geist + IBM Plex Mono,
   32px line grid. Adjusted for video: muted text and grid raised so they survive H.264 and a phone screen.
   DESIGN, 2026-09-27. Status: provisional. */

@font-face {
  font-family: "CB Geist";
  src: url("../../fonts/geist-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "CB Plex Mono";
  src: url("../../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "CB Plex Mono";
  src: url("../../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: block;
}

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

  /* colour roles */
  --cb-bg: #111419;
  --cb-bg-deep: #0b0e12;
  --cb-surface-soft: #14181e;
  --cb-surface: #171b21;
  --cb-surface-raised: #1c2128;
  --cb-text: #f3f6fa;
  --cb-muted: #a7b1bf;          /* BriefcaseOS #8d97a6, raised one step for video */
  --cb-line: #2b323c;
  --cb-line-strong: #46505e;
  --cb-accent: #2f80ed;
  --cb-accent-text: #6ea8ff;    /* the accent when it is text on bg: 7.7:1 */
  --cb-accent-2: #5cc8e8;       /* second series, links in diagrams */
  --cb-on-accent: #ffffff;       /* 3.9:1 on the accent: large bold text only (40px+, 650+) */
  --cb-danger: #f08678;
  --cb-success: #71d3a2;
  --cb-glow: rgba(47, 128, 237, 0.22);

  /* captions */
  --cb-cap-band: rgba(9, 12, 16, 0.9);
  --cb-cap-edge: rgba(110, 168, 255, 0.18);
  --cb-cap-ink: #f3f6fa;
  --cb-cap-hi: #7fb4ff;         /* the word being spoken */
  --cb-cap-dim: 0.46;           /* opacity of words not yet spoken */
  --cb-chip-bg: rgba(20, 24, 30, 0.92);

  /* logo plates: light plate for dark marks, dark plate for light marks */
  --cb-plate-light: #ffffff;
  --cb-plate-light-line: #dfe5ec;
  --cb-plate-dark: #0b0e12;
  --cb-plate-dark-line: #2b323c;
  --cb-plate-shadow: 0 30px 80px rgba(0, 4, 12, 0.55), 0 2px 0 rgba(255, 255, 255, 0.04);

  /* type */
  --cb-font-display: "CB Geist", system-ui, sans-serif;
  --cb-font-body: "CB Geist", system-ui, sans-serif;
  --cb-font-mono: "CB Plex Mono", ui-monospace, monospace;
  --cb-display-weight: 720;
  --cb-display-tracking: -0.045em;
  --cb-display-leading: 1.02;
  --cb-body-weight: 500;

  /* 1080x1920 */
  --cb-v-hero: 140px;
  --cb-v-headline: 96px;
  --cb-v-title: 64px;
  --cb-v-body: 48px;
  --cb-v-label: 40px;
  --cb-v-min: 36px;
  /* 1920x1080 */
  --cb-w-hero: 132px;
  --cb-w-headline: 84px;
  --cb-w-title: 56px;
  --cb-w-body: 42px;
  --cb-w-label: 32px;
  --cb-w-min: 30px;

  /* shape */
  --cb-radius-sm: 8px;
  --cb-radius: 12px;
  --cb-radius-lg: 18px;
  --cb-grid: 32px;
}

/* ---------- background recipe: three planes ---------- */
/* far: the glow (drift it slowly with x/y transforms, 1-2% of frame per 5 s) */
.cb-bg-far {
  position: absolute;
  inset: -12%;
  background:
    radial-gradient(46% 34% at 76% 20%, var(--cb-glow), transparent 70%),
    radial-gradient(40% 30% at 12% 78%, rgba(47, 128, 237, 0.1), transparent 70%);
}
/* mid: the 32px line grid, 4% white (BriefcaseOS used 1.8%, which vanishes in H.264) */
.cb-bg-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.045) 2px, transparent 2px) 0 0 / var(--cb-grid) var(--cb-grid),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 2px, transparent 2px) 0 0 / var(--cb-grid) var(--cb-grid);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 85%);
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 85%);
}
/* near: a perspective grid floor that fills the lower frame (the platform-UI zone) with depth.
   The plane carries a static transform; to move it, tween background-position on it, never transform. */
.cb-bg-floor {
  position: absolute;
  left: -40%;
  right: -40%;
  bottom: -2%;
  height: 46%;
  transform-origin: 50% 100%;
  transform: perspective(900px) rotateX(64deg);
  background:
    linear-gradient(rgba(110, 168, 255, 0.28) 3px, transparent 3px) 0 0 / 96px 96px,
    linear-gradient(90deg, rgba(110, 168, 255, 0.28) 3px, transparent 3px) 0 0 / 96px 96px;
  -webkit-mask-image: linear-gradient(0deg, #000 10%, transparent 92%);
  mask-image: linear-gradient(0deg, #000 10%, transparent 92%);
}
.cb-frame--w .cb-bg-floor {
  height: 40%;
  opacity: 0.7;
}

/* type roles */
.cb-eyebrow {
  font-family: var(--cb-font-mono);
  font-weight: 500;
  font-size: var(--cb-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cb-accent-text);
}
.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);
  text-wrap: balance;
}
.cb-headline em {
  font-style: normal;
  color: var(--cb-accent-text);
}