:root {
  --color-primary: #0b8ec9;
  --color-primary-hover: #097aa8;
  --color-primary-dark: #1f7ca0;
  --color-primary-light: #e8f6fc;

  --color-bg: #ffffff;
  --color-bg-muted: #f4f7fa;
  --color-surface: #ffffff;
  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;

  --color-text: #0f172a;
  --color-text-secondary: #475569;
  --color-text-muted: #64748b;
  --color-text-inverse: #ffffff;

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.1);

  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --radius-full: 999px;

  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;

  --header-h: 68px;
  --announce-h: 42px;
  --mobile-nav-offset: calc(var(--announce-h) + var(--header-h));
  --container: min(1100px, 100% - 2rem);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  --transition: 0.2s ease;
}