/**
 * LEVEL 2 - SEMANTIC ROLES. The only colour layer components are allowed to read.
 * One theme: dark. Default in :root, also addressable as [data-theme="dark"].
 */
:root,
[data-theme="dark"] {
  /* surfaces */
  --bg-canvas: var(--neutral-1);
  --bg-app: radial-gradient(120% 90% at 50% 0%, #0d2f39 0%, #061a20 55%, #030d11 100%);
  --bg-surface: rgba(10, 38, 48, 0.62);
  --bg-surface-raised: rgba(18, 80, 92, 0.35);
  --bg-sunken: rgba(3, 13, 17, 0.66);
  --bg-glass: var(--neutral-a56);
  --bg-overlay: var(--neutral-a92);
  --bg-inverse: var(--brand-10);

  /* text */
  --fg-default: var(--brand-9);
  --fg-emphasis: var(--brand-10);
  --fg-muted: var(--brand-6);
  --fg-subtle: var(--neutral-7);
  --fg-on-accent: var(--neutral-0);
  --fg-disabled: var(--neutral-7);
  --fg-link: var(--brand-10);
  --fg-link-visited: var(--brand-11);

  /* borders */
  --border-default: var(--brand-7);
  --border-muted: var(--brand-a32);
  --border-hairline: var(--brand-a16);
  --border-strong: var(--brand-9);
  --border-focus: var(--brand-10);

  /* interactive accent */
  --accent-bg: var(--brand-9);
  --accent-bg-hover: var(--brand-10);
  --accent-bg-active: var(--brand-8);
  --accent-bg-subtle: var(--brand-a16);
  --accent-fg: var(--brand-9);
  --accent-border: var(--brand-9);

  /* statuses x variations */
  --success-bg-subtle: rgba(62, 214, 127, 0.12);
  --success-bg-solid: var(--success-5);
  --success-fg: var(--success-6);
  --success-border: var(--success-5);

  --warning-bg-subtle: rgba(232, 180, 90, 0.12);
  --warning-bg-solid: var(--warning-5);
  --warning-fg: var(--warning-5);
  --warning-border: var(--warning-5);

  --danger-bg-subtle: rgba(244, 99, 95, 0.12);
  --danger-bg-solid: var(--danger-5);
  --danger-fg: var(--danger-5);
  --danger-border: var(--danger-5);

  --info-bg-subtle: rgba(77, 155, 240, 0.12);
  --info-bg-solid: var(--info-5);
  --info-fg: var(--info-5);
  --info-border: var(--info-5);

  /* interaction states as tokens, not ad-hoc filters.
     Rule of the language: hover ADDS LIGHT, it never swaps the fill hue. */
  --state-hover-bg: var(--brand-a08);
  --state-hover-border: var(--brand-9);
  --state-hover-fg: var(--brand-10);
  --state-active-bg: var(--brand-a16);
  --state-active-offset: 1px;
  --state-selected-bg: var(--brand-a08);
  --state-selected-border: var(--brand-9);
  --state-focus-ring: var(--brand-10);
  --state-visited-fg: var(--brand-11);
  --state-disabled-opacity: 0.35; /* @kind other */
  --state-loading-fg: var(--brand-6);
}