/* grammar: what each data-role looks like. The vocabulary is closed (the brand schema's x-roles); a page that
   writes another role fails check. Every value is a token. */
@layer grammar {
  [data-role="page"] { display: grid; min-height: 100vh; grid-template-rows: auto 1fr auto; }
  [data-role="header"], [data-role="footer"] { padding: var(--space, 1rem); border-color: var(--color-line); }
  [data-role="header"] { border-bottom: 1px solid var(--color-line); display: flex; gap: var(--space, 1rem); align-items: center; justify-content: space-between; }
  [data-role="footer"] { border-top: 1px solid var(--color-line); color: var(--color-muted-fg, var(--color-fg)); }
  [data-role="nav"] { display: flex; gap: var(--space, 1rem); flex-wrap: wrap; }
  [data-role="nav"] a { min-height: 44px; display: inline-flex; align-items: center; }
  [data-role="main"] { padding: var(--space, 1rem); max-width: 72rem; width: 100%; margin: 0 auto; display: grid; gap: calc(var(--space, 1rem) * 2); }
  [data-role="hero"] { padding: calc(var(--space, 1rem) * 3) 0; display: grid; gap: var(--space, 1rem); }
  [data-role="section"] { display: grid; gap: var(--space, 1rem); }
  [data-role="list"] { display: grid; gap: var(--space, 1rem); grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); padding: 0; list-style: none; }
  [data-role="card"] { background: var(--color-muted); border: 1px solid var(--color-line); border-radius: var(--radius, 6px); padding: var(--space, 1rem); display: grid; gap: calc(var(--space, 1rem) / 2); }
  [data-role="media"] { border-radius: var(--radius, 6px); overflow: hidden; }
  [data-role="form"] { display: grid; gap: var(--space, 1rem); max-width: 32rem; }
  [data-role="field"] { display: grid; gap: 0.25rem; }
  [data-role="field"] input, [data-role="field"] select, [data-role="field"] textarea { min-height: 44px; padding: 0.5rem; border: 1px solid var(--color-line); border-radius: var(--radius, 6px); background: var(--color-bg); }
  [data-role="action"] { min-height: 44px; padding: 0 1.25rem; border: 0; border-radius: var(--radius, 6px); background: var(--color-accent); color: var(--color-bg); cursor: pointer; display: inline-flex; align-items: center; text-decoration: none; }
  [data-role="note"] { padding: var(--space, 1rem); border-left: 4px solid var(--color-accent); background: var(--color-muted); }
  [data-role="badge"] { display: inline-block; padding: 0 0.5rem; border-radius: 999px; border: 1px solid var(--color-line); font-size: 0.875rem; }
  [data-role="table"] { width: 100%; border-collapse: collapse; }
  [data-role="table"] th, [data-role="table"] td { text-align: left; padding: 0.5rem; border-bottom: 1px solid var(--color-line); }
  [data-role="price"] { font-variant-numeric: tabular-nums; font-weight: 600; }
}