:root {
  /* Brand Color Palette */
  --color-primary: #0A6CFF;
  --color-primary-hover: #085ad6;
  --color-primary-light: #EBF3FF;
  --color-ink: #081A4B;
  --color-ink-rgb: 8, 26, 75;
  --color-muted: #6B7280;
  --color-white: #FFFFFF;

  /* Account-type accents */
  --color-user-tint: #EAF2FF;
  --color-biz-tint: #F1E9FF;
  --color-biz-accent: #8B35FF;

  /* Neutral radio / outline */
  --color-outline: #D8DCE3;
  --color-border-light: #EEF1F6;
  --color-bg-subtle: #F8FAFC;

  /* Active tab / notification accent (red) */
  --color-accent: #FF3B30;
  --color-accent-soft: #FFE8E6;

  /* Success / Happy Hour green */
  --color-success: #1E9E5A;

  /* Place-marker accents */
  --color-marker-orange: #F97316;

  /* Auth CTA */
  --color-cta-blue: #1B44E0;

  /* Placeholder / subtle */
  --color-placeholder: #9AA4B2;

  /* Typography */
  --font-main: 'Toroka', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Layout & Spacing */
  --container-max-width: 1200px;
  --header-height: 72px;

  /* Radii */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-subtle: 0 2px 10px rgba(8, 26, 75, 0.04);
  --shadow-card: 0 8px 30px rgba(8, 26, 75, 0.06);
  --shadow-float: 0 16px 40px rgba(8, 26, 75, 0.10);
  --shadow-mockup: 0 24px 50px -10px rgba(8, 26, 75, 0.22);
  --shadow-glow: 0 10px 25px rgba(10, 108, 255, 0.35);

  /* Transitions */
  --transition-fast: 0.18s ease;
  --transition-normal: 0.28s ease;
  --transition-slow: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}