/* === Canonical design tokens === */
:root {
  /* Colors: backgrounds & surfaces */
  --color-bg: #f5f6f8;
  --color-surface: #ffffff;
  --color-surface-muted: #f8fafc;

  /* Colors: primary */
  --color-primary: #6366f1;
  --color-primary-hover: #4f46e5;
  --color-primary-soft: #dbeafe;

  /* Colors: text */
  --color-text: #111827;
  --color-text-muted: #6b7280;
  --color-text-on-primary: #ffffff;
  --color-secondary-text: rgba(15, 23, 42, 0.7);
  --color-secondary-text-strong: rgba(15, 23, 42, 0.8);

  /* Colors: semantic & neutrals */
  --color-danger: #b91c1c;
  --color-border: #e2e8f0;
  --color-neutral-weak: rgba(148, 163, 184, 0.35);
  --color-neutral-weak-strong: rgba(148, 163, 184, 0.7);
  --color-placeholder: rgba(100, 116, 139, 0.55);
  --color-placeholder-disabled: rgba(100, 116, 139, 0.7);
  --color-cover-placeholder: #dddddd;
  --color-hero-gradient-end: #8b5cf6;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Typography */
  --font-size-base: 1rem;
  --font-size-sm: 0.875rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.35rem;
  --font-size-2xl: 1.6rem;
  --font-size-3xl: 2rem;

  /* Shadows */
  --shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-card: 0 8px 20px rgba(15, 23, 42, 0.12);
  --shadow-press: 0 4px 10px rgba(15, 23, 42, 0.18);
  --shadow-strong: 0 10px 40px rgba(0, 0, 0, 0.2);
  --shadow-float: 0 -1px 6px rgba(0, 0, 0, 0.05);
  --shadow-hero: 0 8px 24px rgba(0, 0, 0, 0.15);
  --shadow-fab: 0 2px 8px rgba(0, 0, 0, 0.1);

  /* Layout / navigation */
  --bottom-nav-height: 49px;
  --bottom-nav-icon-size: 25px;
  --bottom-nav-spacing: 12px;
  --bottom-nav-offset: calc(var(--bottom-nav-height) + var(--bottom-nav-spacing));
  --page-horizontal-padding: clamp(0.75rem, 3vw, 1.5rem);

  /* Legacy aliases (backwards compatibility) */
  --bg-app: var(--color-bg);

  --accent: var(--color-primary);
  --accent-strong: var(--color-primary);
  --accent-soft: var(--color-primary-soft);

  --text-on-accent: var(--color-text-on-primary);
  --text-normal: var(--color-text);
  --text-muted: var(--color-text-muted);

  --color-text-primary: var(--color-text);
  --color-text-secondary: var(--color-secondary-text);

  --space-1: var(--space-xs);
  --space-2: var(--space-sm);
  --space-3: var(--space-md);
  --space-4: var(--space-lg);
  --space-5: var(--space-xl);
  --space-6: var(--space-2xl);

  --shadow-elevated: var(--shadow-card);
  --shadow-floating: var(--shadow-float);
  --shadow-button: var(--shadow-press);
}