/* ═══════════════════════════════════════════════════════════════
   BHAKTA DESIGN SYSTEM — CSS Custom Properties
   Translated from bhakta_ui_kit (Flutter → CSS)
   Source: /bhakta_ui_kit/lib/theme/
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Typography ── */
  --bk-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --bk-font-mono: 'IBM Plex Mono', 'Fira Code', 'Courier New', monospace;

  /* ── Primary — Medical Blue ── */
  --bk-primary-50:  #E3F2FD;
  --bk-primary-100: #BBDEFB;
  --bk-primary-200: #90CAF9;
  --bk-primary-300: #64B5F6;
  --bk-primary-400: #42A5F5;
  --bk-primary-500: #2196F3;
  --bk-primary-600: #1E88E5;
  --bk-primary-700: #1565C0;   /* ← Main brand */
  --bk-primary-800: #1565C0;
  --bk-primary-900: #0D47A1;

  /* ── Secondary — Dental Teal ── */
  --bk-secondary-50:  #E0F2F1;
  --bk-secondary-100: #B2DFDB;
  --bk-secondary-200: #80CBC4;
  --bk-secondary-300: #4DB6AC;
  --bk-secondary-400: #26A69A;
  --bk-secondary-500: #009688;
  --bk-secondary-600: #00897B;  /* ← Main teal */
  --bk-secondary-700: #00796B;
  --bk-secondary-800: #00695C;
  --bk-secondary-900: #004D40;

  /* ── Accent — Action Orange ── */
  --bk-accent:       #FF7043;
  --bk-accent-light: #FFCCBC;
  --bk-accent-dark:  #BF360C;

  /* ── Neutrals ── */
  --bk-neutral-0:   #FFFFFF;
  --bk-neutral-50:  #F5F7FA;
  --bk-neutral-100: #EEEFF5;
  --bk-neutral-200: #E2E6ED;
  --bk-neutral-300: #CDD3DC;
  --bk-neutral-400: #9AA3B0;
  --bk-neutral-500: #6B7480;
  --bk-neutral-600: #4A5260;
  --bk-neutral-700: #353C47;
  --bk-neutral-800: #242830;
  --bk-neutral-900: #1A1A2E;   /* ← Main text */

  /* ── Semantic — Success ── */
  --bk-success:        #2E7D32;
  --bk-success-light:  #E8F5E9;
  --bk-success-border: #A5D6A7;

  /* ── Semantic — Error ── */
  --bk-error:        #C62828;
  --bk-error-light:  #FFEBEE;
  --bk-error-border: #EF9A9A;

  /* ── Semantic — Warning ── */
  --bk-warning:        #F57F17;
  --bk-warning-light:  #FFF8E1;
  --bk-warning-border: #FFCC02;

  /* ── Semantic — Info ── */
  --bk-info:        #0277BD;
  --bk-info-light:  #E1F5FE;
  --bk-info-border: #81D4FA;

  /* ── Text ── */
  --bk-text-primary:   var(--bk-neutral-900);
  --bk-text-secondary: var(--bk-neutral-500);
  --bk-text-disabled:  var(--bk-neutral-400);
  --bk-text-inverse:   var(--bk-neutral-0);

  /* ── Surface ── */
  --bk-surface:          var(--bk-neutral-0);
  --bk-surface-elevated: var(--bk-neutral-0);
  --bk-background:       var(--bk-neutral-50);

  /* ── Border ── */
  --bk-border:       var(--bk-neutral-200);
  --bk-border-focus: var(--bk-primary-700);

  /* ── Border Radius ── */
  --bk-radius-xs:   4px;
  --bk-radius-sm:   8px;
  --bk-radius-md:   12px;   /* buttons, inputs */
  --bk-radius-lg:   16px;   /* cards */
  --bk-radius-xl:   20px;
  --bk-radius-xl2:  24px;   /* bottom sheets, dialogs */
  --bk-radius-xl3:  32px;
  --bk-radius-pill: 999px;  /* badges, chips */

  /* ── Spacing (4pt grid) ── */
  --bk-space-xs2: 2px;
  --bk-space-xs:  4px;
  --bk-space-sm:  8px;
  --bk-space-md:  12px;
  --bk-space-lg:  16px;
  --bk-space-xl:  20px;
  --bk-space-xl2: 24px;
  --bk-space-xl3: 32px;
  --bk-space-xl4: 40px;
  --bk-space-xl5: 48px;

  /* ── Shadows ── */
  --bk-shadow-xs: 0 1px 2px rgba(0,0,0,.05);
  --bk-shadow-sm: 0 2px 6px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --bk-shadow-md: 0 4px 16px rgba(0,0,0,.07), 0 2px 4px rgba(0,0,0,.05);
  --bk-shadow-lg: 0 8px 24px rgba(0,0,0,.07), 0 4px 8px rgba(0,0,0,.05);
  --bk-shadow-xl: 0 16px 48px rgba(0,0,0,.08), 0 8px 16px rgba(0,0,0,.06);
  --bk-shadow-primary: 0 8px 20px rgba(21,101,192,.20);
  --bk-shadow-secondary: 0 8px 20px rgba(0,137,123,.20);

  /* ── Component Heights ── */
  --bk-btn-h-sm: 36px;
  --bk-btn-h-md: 48px;
  --bk-btn-h-lg: 56px;
  --bk-input-h:  48px;
  --bk-appbar-h: 56px;
  --bk-bottomnav-h: 60px;

  /* ── Transitions ── */
  --bk-transition: 200ms ease;
  --bk-transition-slow: 350ms ease;
}