/*
 * Gli stessi token di rigger: il visore deve sembrare la stessa applicazione,
 * quindi superfici, bordi, accenti e tipografia non si reinventano. Mancano solo
 * le voci che servivano a cose che qui non esistono (commenti, presenza).
 */
:root {
  color-scheme: dark;

  /* superfici */
  --surface-canvas: #14161a;
  --surface-chrome: #1c1f25;
  --surface-raised: #23272f;
  --surface-input: #101216;

  /* bordi */
  --border-soft: #2c313a;
  --border-strong: #3a414d;

  /* testo */
  --text-primary: #e8eaee;
  --text-secondary: #9aa2af;
  --text-dim: #6a7280;

  /* accenti */
  --accent: #4c8dff;
  --accent-strong: #3d7bea;
  --accent-soft: rgb(76 141 255 / 18%);
  --danger: #ff5f56;
  --ok: #3ddc84;
  --warn: #ffb84d;

  /* griglia canvas */
  --grid-dot: #2a2f38;
  --grid-size: 24px;

  /* geometria */
  --toolbar-height: 52px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --frame-bar-height: 30px;
  --section-bar-height: 34px;

  /* gruppo: contenitore delle schermate, disegnato sotto ai frame */
  --section-fill: rgb(38 43 52 / 55%);
  --section-border: #333a45;

  /* tipografia */
  --font-ui:
    ui-sans-serif, -apple-system, 'SF Pro Text', 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Menlo', monospace;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-md: 13px;

  /* ombre */
  --shadow-frame: 0 10px 30px rgb(0 0 0 / 45%);
  --shadow-chrome: 0 1px 0 rgb(255 255 255 / 4%), 0 8px 24px rgb(0 0 0 / 35%);

  /* motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 120ms;
}