/* Partitura Livre: tokens do sistema de design (documentados em DESIGN_SYSTEM.md).
   Só variáveis; nada aqui desenha. Todas as páginas do site carregam este
   arquivo primeiro, depois components.css e o CSS da página. O editor
   (/editor) tem superfície própria em editor.css. */
:root {
  /* cor: superfícies */
  --color-bg:#ffffff;
  --color-surface:#ffffff;
  --color-surface-muted:#f6f7fb;
  /* cor: texto */
  --color-text:#0b1220;            /* 17,5:1 sobre surface-muted */
  --color-text-muted:#5b6573;      /* 5,9:1 sobre branco, 5,5:1 sobre surface-muted */
  /* cor: bordas */
  --color-border:#e9ebf2;          /* divisórias e cartões (decorativa) */
  --color-border-strong:#878fa0;   /* contorno de campo: 3,2:1 (WCAG 1.4.11) */
  --color-placeholder:#6b7280;     /* 4,8:1 */
  /* cor: marca / ação */
  --color-primary:#4f46e5;         /* 6,3:1 com texto branco */
  --color-primary-hover:#4338ca;
  --color-primary-soft:#eef2ff;
  --color-primary-border:#c7cdf5;  /* borda de cartão em hover, trilho do giratório */
  --color-primary-text:#4338ca;    /* texto de destaque: 7,1:1 sobre primary-soft */
  --color-on-primary:#ffffff;
  --color-focus:#4f46e5;
  /* cor: estados (fundo / borda / texto) */
  --color-info-bg:#eff5ff;    --color-info-border:#c9dbf3;    --color-info-text:#1e3a5f;
  --color-success-bg:#f0fbf5; --color-success-border:#b8e2c8; --color-success-text:#166534;
  --color-warning-bg:#fff8e1; --color-warning-border:#f3dfa2; --color-warning-text:#7a5b00;
  --color-danger-bg:#fef1f1;  --color-danger-border:#f3c9c9;  --color-danger-text:#7a271a;
  --color-danger:#b42318;     --color-danger-hover:#912018;

  /* tipografia */
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,system-ui,sans-serif;
  --font-music:'PL Musica','Bravura';   /* subconjunto da web + a inteira (result.css) */
  --text-xs:12px;
  --text-sm:13px;
  --text-md:14px;
  --text-base:16px;
  --text-lg:18px;
  --text-xl:20px;
  --text-2xl:24px;
  --text-3xl:28px;
  --text-display:clamp(34px,5.4vw,58px);
  --leading-tight:1.15;
  --leading-normal:1.5;
  --weight-regular:400;
  --weight-semibold:600;
  --weight-bold:700;
  --weight-heavy:800;

  /* espaço (base 4px) */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;

  /* raio */
  --radius-xs:6px;
  --radius-sm:10px;
  --radius-control:11px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-pill:999px;

  /* sombra */
  --shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --shadow:0 1px 2px rgba(16,24,40,.04),0 18px 44px rgba(16,24,40,.10);
  --ring:0 0 0 3px var(--color-primary-soft);

  /* tamanhos */
  --control-sm:36px;
  --control-md:44px;              /* alvo mínimo de toque */
  --control-lg:52px;
  --header-h:64px;
  --maxw:1080px;
  --gutter:24px;

  /* movimento */
  --duration-fast:.15s;

  /* Apelidos antigos: o CSS das páginas ainda usa estes nomes. Código novo
     usa os nomes --color-* / --radius-* acima. */
  --bg:var(--color-bg); --bg-soft:var(--color-surface-muted); --panel:var(--color-surface);
  --ink:var(--color-text); --muted:var(--color-text-muted); --line:var(--color-border);
  --accent:var(--color-primary); --accent-d:var(--color-primary-hover); --accent-soft:var(--color-primary-soft);
  --warn:var(--color-danger);
  --radius:var(--radius-lg);
  --font:var(--font-sans);
}