/* Cambrient AI brand tokens. Fonts are local variable TTFs in this folder. */
@font-face { font-family: 'Fraunces'; src: url('Fraunces.ttf') format('truetype'); font-weight: 100 900; font-style: normal; }
@font-face { font-family: 'Fraunces'; src: url('Fraunces-Italic.ttf') format('truetype'); font-weight: 100 900; font-style: italic; }
@font-face { font-family: 'Hanken Grotesk'; src: url('HankenGrotesk.ttf') format('truetype'); font-weight: 100 900; }
@font-face { font-family: 'Spline Sans Mono'; src: url('SplineSansMono.ttf') format('truetype'); font-weight: 300 700; }

:root {
  /* light surfaces (website, print) */
  --paper: #ffffff;               /* page ground is pure white, never cream */
  --tint: #faf9f7;                /* section background on the site only, never the page ground */
  --tint-2: #f6f6f6;              /* the other allowed section tint */
  --ink: #0e0e0e;
  --body: #454545;
  --muted: #6b6b6b;
  --faint: #9b9b9f;               /* vertical spec rails, tertiary labels */
  --hair: rgba(0,0,0,0.12);       /* hairline rules and frames */
  --grid: rgba(12,12,13,0.045);   /* dot lattice on paper */

  /* dark surfaces (motion, social plates, evidence room) */
  --plate: #0e0e0e;
  --cream: #f5f4f1;               /* type on dark, never pure white */
  --cream-soft: rgba(245,244,241,0.62);
  --plate-line: rgba(245,244,241,0.085);   /* lattice on static dark plates; video has no lattice */
  --card-dark: rgba(255,255,255,0.035);    /* card fill inside a dark site section */

  /* the one accent */
  --red: #ef4444;
  --safe: #22c55e;                /* functional "safe" signal in product UI only, never decoration */

  --display: 'Fraunces', 'Times New Roman', serif;
  --sans: 'Hanken Grotesk', system-ui, sans-serif;
  --mono: 'Spline Sans Mono', ui-monospace, Menlo, monospace;
}

/* Display statement. One italic word carries the turn of phrase. The full stop is red only when it is the plate's one red. */
.display { font-family: var(--display); font-variation-settings: "opsz" 144, "wght" 380, "SOFT" 0, "WONK" 0; letter-spacing: -0.02em; line-height: 0.98; }
.display em { font-style: italic; }
.display .pt { color: var(--red); }
.display-motion { font-family: var(--display); font-variation-settings: "opsz" 60, "wght" 340, "SOFT" 0, "WONK" 0; letter-spacing: -0.025em; line-height: 0.98; }

/* Reading text */
.reading { font-family: var(--sans); font-weight: 300; line-height: 1.55; color: var(--body); }
.reading b { font-weight: 600; color: var(--ink); }

/* Mono labels: uppercase, tracked, small. Plain text, no dash or rule in front. Red only when it is the plate's one red. */
.label { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.2em; font-size: 11px; color: var(--muted); }

/* Logo lockup: the nav mark SVG (fill: currentColor) + live text. Ratio from the live site: mark 38px, text 23px, gap 9px. */
.lockup { display: inline-flex; align-items: center; gap: 0.4em; color: var(--ink); font-size: 23px; }
.lockup svg { width: 1.65em; height: 1.65em; display: block; }
.lockup .wordmark { font-family: var(--display); font-weight: 560; font-variation-settings: "SOFT" 0, "WONK" 0; letter-spacing: -0.018em; line-height: 1; }
.lockup.on-dark { color: var(--cream); }

/* Buttons. Site: pill. Print: 2px radius, mono uppercase, solid + ghost pair. */
.btn { border-radius: 100px; font-family: var(--sans); font-weight: 500; font-size: 15px; height: 52px; padding: 0 24px; display: inline-flex; align-items: center; text-decoration: none; }
.btn.solid { background: var(--ink); color: #fff; }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid rgba(0,0,0,0.2); }
.btn.on-dark.solid { background: #ffffff; color: #000; }   /* the site footer button: the one place pure white sits on black */
.btn-print { border-radius: 2px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; padding: 11px 16px; text-decoration: none; display: inline-block; }
.btn-print.solid { background: var(--ink); color: #fff; }
.btn-print.ghost { border: 1px solid var(--hair); color: var(--ink); }