/* Shared styles for color-role preview cards */
html, body { margin: 0; padding: 0; background: var(--sys-surface); font-family: var(--font-sans); color: var(--sys-on-surface); }
.card { width: 760px; padding: 22px 24px; box-sizing: border-box; }
.card h2 { font: 500 11px/14px var(--font-sans); letter-spacing: .8px; text-transform: uppercase; color: var(--sys-on-surface-variant); margin: 0 0 4px; }
.card .desc { font: 400 12px/18px var(--font-sans); color: var(--sys-on-surface-variant); margin: 0 0 16px; max-width: 640px; }
.roles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.roles.two { grid-template-columns: repeat(2, 1fr); }
.roles.three { grid-template-columns: repeat(3, 1fr); }
.roles.five { grid-template-columns: repeat(5, 1fr); }
.role {
  position: relative;
  height: 96px;
  border-radius: 12px;
  padding: 10px 12px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.role .name { font: 500 12px/16px var(--font-sans); letter-spacing: .1px; }
.role .hex  { font: 400 10.5px/14px ui-monospace, Menlo, monospace; opacity: .78; }
.role.tall { height: 120px; }
.role.line-only { border: 2px solid currentColor; background: transparent; }

/* usage examples below the swatch grid */
.uses { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.use {
  border-radius: 12px;
  padding: 14px 16px;
  font: 500 13px/18px var(--font-sans);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 64px;
  justify-content: center;
}
.use .tag { font: 500 10px/14px var(--font-sans); letter-spacing: .6px; text-transform: uppercase; opacity: .72; }
.divider { height: 1px; background: var(--sys-outline-variant); margin: 20px 0 16px; }