schema: ai-cjm-component-contract/v1
id: headline
version: 2.0.0
status: stable
owner: AI CJM Design
purpose: Формулирует один главный вывод и управляет смысловым цветовым акцентом.
use_when:
- Страница или секция требует крупного тезиса.
evidence:
- id: production-root-h1
  url: https://aicjm.ru/edu/styles.css?v=20260812-horizontal-team-cards
  locator: .hero h1 and .hero h1 span
  supports: [anatomy, variant:plain, variant:split-accent, size:display, state:default]
anatomy:
- {id: text, required: true, role: Полное осмысленное предложение.}
- {id: accent, required: false, role: Одна смысловая фраза внутри того же heading.}
variants:
- {id: plain, status: stable, description: Один цвет для заголовка., evidence_refs: [production-root-h1]}
- {id: split-accent, status: stable, description: Один синий смысловой фрагмент на светлой поверхности., evidence_refs: [production-root-h1]}
sizes:
- {id: display, status: stable, description: Fluid display size из semantic type tokens., evidence_refs: [production-root-h1]}
states:
  default: {status: stable, basis: observed, description: Heading is visible in normal reading flow., evidence_refs: [production-root-h1]}
  hover: {status: not-applicable, basis: not-applicable, description: Headline is not interactive.}
  focus-visible: {status: not-applicable, basis: not-applicable, description: Headline is not interactive.}
  active: {status: not-applicable, basis: not-applicable, description: Headline is not interactive.}
  selected: {status: not-applicable, basis: not-applicable, description: Headline is not a selector.}
  open: {status: not-applicable, basis: not-applicable, description: Headline owns no disclosure.}
  disabled: {status: not-applicable, basis: not-applicable, description: Headline cannot be disabled.}
  loading: {status: not-applicable, basis: not-applicable, description: Loading belongs to the containing pattern.}
  success: {status: not-applicable, basis: not-applicable, description: Outcome belongs to the containing pattern.}
  error: {status: not-applicable, basis: not-applicable, description: Error belongs to the containing pattern.}
  empty: {status: not-applicable, basis: not-applicable, description: Empty belongs to the containing pattern.}
responsive:
  mode: fluid-wrap
  reading_order: Text and accent remain one heading in DOM order.
  rules:
  - Wrap naturally without decorative line breaks.
  - Keep every word inside the available inline size.
  - Web hero uses component.headline.web-size-*, web-weight, web-line-height and web-tracking.
  - The web split accent is a block-level italic phrase inside the same heading.
accessibility:
  pattern: semantic-heading
  semantics: [Use the correct heading level; a page has one H1.]
  keyboard: [Headline owns no keyboard behavior.]
  focus: [No focus is assigned to a static headline.]
  motion: [Meaning never depends on motion.]
tokens:
- component.headline.text
- component.headline.accent
- component.headline.on-deep
- component.headline.web-max-width
- component.headline.web-size-min
- component.headline.web-size-max
- component.headline.web-weight
- component.headline.web-line-height
- component.headline.web-tracking
content:
  required: [One complete claim.]
  constraints:
  - Split accent contains one logical phrase and at most half of the title.
  - Split accent is forbidden on deep surface.
do: [Highlight the working change or result.]
dont: [Color arbitrary words or multiple disconnected fragments.]
examples:
  approved: {status: stable, description: One blue result phrase inside one H1., evidence: https://aicjm.ru/edu/}
  prohibited: {description: Several decorative blue words without a shared meaning.}
acceptance:
- {id: headline-1, criterion: Split variant contains exactly one direct accent span., method: automated}
- {id: headline-2, criterion: Sentence remains understandable without color., method: manual}
- {id: headline-3, criterion: Web hero matches all component.headline.web-* tokens and uses one block italic accent., method: automated}