/* SmarTeeth Design Tokens
 * Single source of truth for colors, typography, spacing, radii, shadows.
 * Do not duplicate values elsewhere. Bootstrap overrides consume these.
 */

:root {
  /* Brand — palette derived from the SmarTeeth tooth+wordmark logo (4B). */
  --st-brand:       #1F3A6E;
  --st-brand-dark:  #152547;
  --st-brand-light: #E3F1FB;
  --st-brand-accent: #5BC0EB;

  /* Semantic action colors (mirror CLAUDE.md button convention) */
  --st-success: #1F9D55;
  --st-danger:  #D64545;
  --st-warning: #E08E0B;
  --st-info:    #3182CE;

  /* Neutral scale */
  --st-neutral-100: #F7FAFC;
  --st-neutral-200: #EDF2F7;
  --st-neutral-300: #E2E8F0;
  --st-neutral-400: #CBD5E0;
  --st-neutral-500: #A0AEC0;
  --st-neutral-600: #718096;
  --st-neutral-700: #4A5568;
  --st-neutral-800: #2D3748;
  --st-neutral-900: #1A202C;

  /* Text */
  --st-text:       var(--st-neutral-900);
  --st-text-muted: var(--st-neutral-600);

  /* Typography scale */
  --st-fs-xs:   0.75rem;
  --st-fs-sm:   0.875rem;
  --st-fs-base: 1rem;
  --st-fs-lg:   1.125rem;
  --st-fs-h2:   1.5rem;
  --st-fs-h1:   2rem;

  /* Radii */
  --st-radius-sm: 4px;
  --st-radius:    8px;
  --st-radius-lg: 12px;

  /* Shadows */
  --st-shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --st-shadow:    0 4px 12px rgba(0,0,0,0.08);
  --st-shadow-lg: 0 10px 30px rgba(0,0,0,0.12);

  /* Layout */
  --st-topbar-h:       56px;
  --st-sidebar-w:      240px;
  --st-sidebar-rail-w: 64px;
}