/* Portal public design system. Components consume roles, not individual color values. */
:root {
  --color-brand: #006e9b;
  --color-heading: #0b3b50;
  --color-text: #16181b;
  --color-muted: #526570;
  --color-action: #f9c349;
  --color-action-hover: #ffd160;
  --color-surface: #fff;
  --color-surface-soft: #f2f6f8;
  --color-border: #d7e3ea;
  --color-control-border: #778790;
  --color-danger: #b42318;
  --color-rating: #946200;
  --color-focus: #155eef;
  --radius-control: 6px;
  --radius-card: 12px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --control-height: 48px;
  --motion-feedback: 160ms;
  --ink: var(--color-text);
  --ink-soft: #2a2a28;
  --paper: var(--color-surface);
  --cream: var(--color-surface-soft);
  --cream-deep: #e6e8e4;
  --yellow: var(--color-action);
  --yellow-deep: #d99b08;
  --copper: #b8703c;
  --green: #166b3b;
  --blue: var(--color-brand);
  --red: var(--color-danger);
  --muted: var(--color-muted);
  --line: var(--color-border);
  --line-dark: #44443f;
  --focus: var(--color-focus);
  --shadow: 0 24px 80px rgb(20 20 18 / 12%);
  --radius-sm: var(--radius-control);
  --radius: var(--radius-control);
  --radius-lg: var(--radius-card);
  --portal-blue: var(--color-brand);
  --portal-navy: var(--color-heading);
  --portal-muted: var(--color-muted);
  --portal-border: var(--color-border);
  --portal-soft: var(--color-surface-soft);
}