/* ============================================================
 * style_type.css — the yCall type system (brand upgrade)
 * ============================================================
 * SELF-HOSTED variable fonts — this app removed Google Fonts on purpose (the stylesheet
 * request leaked every visitor's IP + the room URL to a third party). These two files ship
 * from THIS node, latin subset, variable weight, ~100KB total:
 *   SORA  — the display voice: geometric, slightly technical, unmistakably "brand".
 *   INTER — the working voice: engineered for UI legibility at small sizes.
 * font-display: swap keeps first paint instant; the system stack is the metric-compatible
 * fallback so reflow is minimal.
 * ============================================================ */
@font-face {
  font-family: 'Sora';
  src: url('/fonts/sora-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-display: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Roboto, sans-serif;

  /* ONE brand accent ramp (was: ad-hoc cyans/blues per component). oklch = perceptually
     graded like film; every interactive accent derives from this hue. */
  --brand-h: 235;
  --brand:        oklch(64% 0.17 var(--brand-h));
  --brand-bright: oklch(72% 0.15 var(--brand-h));
  --brand-soft:   oklch(64% 0.17 var(--brand-h) / 0.35);
  --brand-glow:   oklch(70% 0.16 var(--brand-h) / 0.5);
}

/* The working voice everywhere… */
body, button, input, select, textarea { font-family: var(--font-ui); }

/* …and the display voice where the brand speaks. */
.landing-title, .landing-tag,
.rec-consent-title, .lg-title, .lg-sheet h2,
.ypm-head, .yv-title,
.pwa-phone-label,
.card-name, .main-card-name,
.tile-ov-name,
.node-btn, .pwa-install-btn {
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}

/* Unify the accent across every control that used its own blue/cyan. */
:root { --lg-accent: var(--brand-bright); }
.yv-seek, #bg-zoom-slider { accent-color: var(--brand-bright); }
.share-native, .rec-btn-allow { background: linear-gradient(160deg, var(--brand-bright), var(--brand)) !important; }