/* Tokens UFPE — variáveis CSS (fonte da verdade em packages/tokens/) */
:root {
  /* Cores institucionais — Manual de Identidade Visual UFPE */
  --ufpe-bordo: #990000;          /* Pantone 201C, CMYK 0/100/63/29 */
  --ufpe-preto: #000000;
  --ufpe-branco: #ffffff;
  --ufpe-cinza-claro: #e9e9e9;
  --ufpe-cinza-medio: #6a6a6a;

  /* Tipografia — Trebuchet MS conforme manual (pág. 06) */
  --ufpe-font-sans: "Trebuchet MS", "Lucida Grande", Tahoma, sans-serif;

  /* Escala de tamanhos (base 16px) */
  --ufpe-fs-xs: 0.75rem;
  --ufpe-fs-sm: 0.875rem;
  --ufpe-fs-base: 1rem;
  --ufpe-fs-md: 1.125rem;
  --ufpe-fs-lg: 1.5rem;
  --ufpe-fs-xl: 2rem;
  --ufpe-fs-2xl: 2.75rem;

  /* Spacing — derivado da unidade x do brasão (manual, pág. 08) */
  --ufpe-sp-x: 8px;
  --ufpe-sp-1: calc(var(--ufpe-sp-x) * 1);
  --ufpe-sp-2: calc(var(--ufpe-sp-x) * 2);
  --ufpe-sp-3: calc(var(--ufpe-sp-x) * 3);
  --ufpe-sp-4: calc(var(--ufpe-sp-x) * 4);
  --ufpe-sp-6: calc(var(--ufpe-sp-x) * 6);
  --ufpe-sp-8: calc(var(--ufpe-sp-x) * 8);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--ufpe-font-sans);
  font-size: var(--ufpe-fs-base);
  color: var(--ufpe-preto);
  background: var(--ufpe-branco);
  line-height: 1.55;
}

a { color: var(--ufpe-bordo); }

h1, h2, h3, h4 {
  font-weight: 700;
  color: var(--ufpe-bordo);
  letter-spacing: -0.01em;
}
h1 { font-size: var(--ufpe-fs-2xl); }
h2 { font-size: var(--ufpe-fs-xl); }
h3 { font-size: var(--ufpe-fs-lg); }

.versalete {
  /* Versalete: maiúsculas com tamanhos diferentes (manual, pág. 06) */
  font-variant-caps: small-caps;
  text-transform: lowercase;
  letter-spacing: 0.04em;
}

/* Layout do showcase */
.app {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
}
.sidebar {
  background: var(--ufpe-bordo);
  color: var(--ufpe-branco);
  padding: var(--ufpe-sp-3);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.sidebar h1 { color: var(--ufpe-branco); font-size: var(--ufpe-fs-md); margin: 0 0 var(--ufpe-sp-3); }
.sidebar nav { display: flex; flex-direction: column; gap: 4px; }
.sidebar nav button {
  background: transparent;
  border: 0;
  color: var(--ufpe-branco);
  text-align: left;
  padding: 8px 10px;
  border-radius: 4px;
  cursor: pointer;
  font: inherit;
  font-size: var(--ufpe-fs-sm);
}
.sidebar nav button:hover { background: rgba(255,255,255,0.12); }
.sidebar nav button[aria-current="true"] { background: rgba(0,0,0,0.25); font-weight: 700; }
.sidebar nav .group { margin-top: var(--ufpe-sp-2); font-size: var(--ufpe-fs-xs); opacity: 0.7; text-transform: uppercase; padding: 6px 10px; }

.main { padding: var(--ufpe-sp-6); max-width: 980px; }
.main section { margin-bottom: var(--ufpe-sp-8); }

.swatch-row { display: flex; gap: var(--ufpe-sp-3); flex-wrap: wrap; }
.swatch {
  border: 1px solid var(--ufpe-cinza-claro);
  border-radius: 6px;
  overflow: hidden;
  width: 220px;
}
.swatch .chip { height: 120px; }
.swatch .meta { padding: var(--ufpe-sp-2); font-size: var(--ufpe-fs-xs); }
.swatch .meta strong { display: block; font-size: var(--ufpe-fs-base); margin-bottom: 4px; color: var(--ufpe-bordo); }
.swatch .meta code { background: var(--ufpe-cinza-claro); padding: 1px 4px; border-radius: 3px; }

.dont-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: var(--ufpe-sp-2); }
.dont-card { border: 1px solid var(--ufpe-cinza-claro); padding: var(--ufpe-sp-2); border-radius: 6px; }
.dont-card .label { font-size: var(--ufpe-fs-xs); color: var(--ufpe-bordo); margin-top: 8px; }
