/* Krios Design Tokens
 * Single source of truth for colors, typography, spacing, radii, shadows.
 * Do not duplicate values elsewhere. Bootstrap overrides consume these.
 *
 * NOTE: CSS variable names keep the `--st-*` prefix (instead of `--kr-*`)
 * so that components.css and overrides.css can be shared 1:1 with the
 * SmarTeeth source. The palette values, however, are tuned for a
 * "palestra" (gym) aesthetic — energy + discipline.
 */

:root {
  /* Brand — palestra palette: deep teal/green-blue evoking energy + discipline. */
  --st-brand:       #0e7e6b;
  --st-brand-dark:  #0a5a4d;
  --st-brand-light: #e0f4f0;
  --st-brand-accent: #ff8a3d;   /* warm orange/coral for CTAs */

  /* 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;
}