/* CacheBrief look: SILICON (devices, chips, hardware).
   New for CacheBrief: a product studio. Graphite cyclorama with a warm key light and amber accent,
   Archivo (variable width) for type, Geist Mono for specs. A light studio plate is available with
   data-cb-ground="light" on the frame, for products that are dark themselves.
   DESIGN, 2026-09-27. Status: provisional. */

@font-face {
  font-family: "CB Archivo";
  src: url("../../fonts/archivo-latin-wdth-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  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: "silicon";

  --cb-bg: #141517;
  --cb-bg-deep: #0c0d0f;
  --cb-surface-soft: #18191c;
  --cb-surface: #1d1f23;
  --cb-surface-raised: #25282d;
  --cb-text: #f3f1ec;           /* warm white, like a lit product card */
  --cb-muted: #b3afa7;
  --cb-line: #2f3136;
  --cb-line-strong: #4c4f56;
  --cb-accent: #ffb13d;         /* amber: power LED, the spec that matters */
  --cb-accent-text: #ffbd5c;
  --cb-accent-2: #9fc2d8;       /* cool steel: the comparison device, the "before" */
  --cb-on-accent: #1a1204;
  --cb-danger: #ff8a7a;
  --cb-success: #7fd6a4;
  --cb-glow: rgba(255, 236, 210, 0.15);

  --cb-cap-band: rgba(10, 10, 12, 0.9);
  --cb-cap-edge: rgba(255, 189, 92, 0.2);
  --cb-cap-ink: #f3f1ec;
  --cb-cap-hi: #ffbd5c;
  --cb-cap-dim: 0.46;
  --cb-chip-bg: rgba(24, 25, 28, 0.92);

  --cb-plate-light: #ffffff;
  --cb-plate-light-line: #e3e1dc;
  --cb-plate-dark: #0c0d0f;
  --cb-plate-dark-line: #34363c;
  --cb-plate-shadow: 0 40px 90px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.08) inset;

  --cb-font-display: "CB Archivo", system-ui, sans-serif;
  --cb-font-body: "CB Archivo", system-ui, sans-serif;
  --cb-font-mono: "CB Geist Mono", ui-monospace, monospace;
  --cb-display-weight: 680;
  --cb-display-tracking: -0.03em;
  --cb-display-leading: 1.02;
  --cb-display-stretch: 104%;
  --cb-body-weight: 450;

  --cb-v-hero: 150px;
  --cb-v-headline: 94px;
  --cb-v-title: 64px;
  --cb-v-body: 48px;
  --cb-v-label: 40px;
  --cb-v-min: 36px;
  --cb-w-hero: 136px;
  --cb-w-headline: 84px;
  --cb-w-title: 56px;
  --cb-w-body: 42px;
  --cb-w-label: 32px;
  --cb-w-min: 30px;

  --cb-radius-sm: 10px;
  --cb-radius: 16px;
  --cb-radius-lg: 28px;
  --cb-grid: 0px;
  --cb-grain: 0.06;
}

/* light studio plate (for dark products, or a change of ground mid-video). Restate color with the tokens. */
[data-cb-ground="light"] {
  --cb-bg: #e7e8ea;
  --cb-bg-deep: #d6d8db;
  --cb-surface-soft: #eef0f1;
  --cb-surface: #f5f6f7;
  --cb-surface-raised: #ffffff;
  --cb-text: #15171a;
  --cb-muted: #50555d;
  --cb-line: #c9ccd1;
  --cb-line-strong: #9a9ea6;
  --cb-accent-text: #8a4d00;    /* amber darkened for the light plate: 5.5:1 */
  --cb-glow: rgba(255, 255, 255, 0.7);
  --cb-chip-bg: rgba(255, 255, 255, 0.92);
  --cb-plate-shadow: 0 30px 70px rgba(40, 44, 52, 0.22);
  color: var(--cb-text);
}

/* ---------- background recipe: a cyclorama ---------- */
/* far: key light from above, soft */
.cb-bg-far {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(52% 34% at 50% 26%, var(--cb-glow), transparent 72%),
    radial-gradient(30% 20% at 88% 10%, rgba(255, 177, 61, 0.07), transparent 70%);
}
/* mid: the sweep, wall into floor, with a soft horizon at 62% */
.cb-bg-grid {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.06) 60%, rgba(255, 255, 255, 0.03) 76%, rgba(0, 0, 0, 0.3) 100%);
}
[data-cb-ground="light"] .cb-bg-grid {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 56%, rgba(0, 0, 0, 0.05) 66%, rgba(0, 0, 0, 0.1) 100%);
}
/* near: the plinth, an elliptical pool of light and contact shadow under the subject.
   Position it under whatever sits on it; it moves with the subject's contact point. */
.cb-bg-floor {
  position: absolute;
  left: var(--cb-plinth-x, 50%);
  width: 1100px;
  height: 300px;
  margin-left: -550px;
  top: var(--cb-plinth-y, 1210px);
  background:
    radial-gradient(34% 12% at 50% 26%, rgba(0, 0, 0, 0.7), transparent 80%),
    radial-gradient(50% 50% at 50% 42%, rgba(255, 236, 210, 0.16), transparent 72%);
}

.cb-eyebrow {
  font-family: var(--cb-font-body);
  font-stretch: 78%;
  font-weight: 640;
  font-size: var(--cb-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cb-accent-text);
}
.cb-headline {
  font-family: var(--cb-font-display);
  font-weight: var(--cb-display-weight);
  font-stretch: var(--cb-display-stretch);
  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);
}
/* spec figures: wide and heavy, tabular */
.cb-spec-figure {
  font-family: var(--cb-font-display);
  font-stretch: 125%;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}