/* ============================================================
   YouAİBOOKS — CSS Custom Properties
   React'e geçişte bu dosya direkt kullanılabilir.
   Tüm tasarım tokenları buradan yönetilir.
============================================================ */
:root {
  /* ----------------------------------------------------------
     Core Palette
  ---------------------------------------------------------- */
  --color-base:         #111827;  /* body background */
  --color-surface-1:    #1a2236;  /* sidebar */
  --color-surface-2:    #1f2a40;  /* panels, cards */
  --color-surface-3:    #263350;  /* elevated cards, inputs */
  --color-surface-4:    #2d3c5c;  /* tooltips, dropdowns */

  /* ----------------------------------------------------------
     Primary Accent — Deep Violet
  ---------------------------------------------------------- */
  --accent-primary:       #7c3aed;
  --accent-primary-2:     #9333ea;
  --accent-primary-lt:    #a78bfa;
  --accent-primary-glow:  rgba(124, 58, 237, 0.35);

  /* ----------------------------------------------------------
     Secondary Accent — Amber / Gold
  ---------------------------------------------------------- */
  --accent-gold:          #f59e0b;
  --accent-gold-lt:       #fbbf24;
  --accent-gold-glow:     rgba(245, 158, 11, 0.3);

  /* ----------------------------------------------------------
     Appointment Category Colors
     card-color     → saç boyama, ombre, röfle
     card-cut       → saç kesimi, fön
     card-treatment → bakım, keratin, maske
     card-nail      → manikür, pedikür, protez tırnak
     card-beard     → sakal, erkek hizmetleri
  ---------------------------------------------------------- */
  --cat-color:            #8b5cf6;
  --cat-color-bg:         rgba(139, 92, 246, 0.22);
  --cat-color-text:       #ddd6fe;

  --cat-cut:              #14b8a6;
  --cat-cut-bg:           rgba(20, 184, 166, 0.2);
  --cat-cut-text:         #99f6e4;

  --cat-treatment:        #f59e0b;
  --cat-treatment-bg:     rgba(245, 158, 11, 0.2);
  --cat-treatment-text:   #fde68a;

  --cat-nail:             #ec4899;
  --cat-nail-bg:          rgba(236, 72, 153, 0.2);
  --cat-nail-text:        #fbcfe8;

  --cat-beard:            #3b82f6;
  --cat-beard-bg:         rgba(59, 130, 246, 0.2);
  --cat-beard-text:       #bfdbfe;

  /* ----------------------------------------------------------
     Typography — Text Hierarchy
  ---------------------------------------------------------- */
  --text-primary:       #f8fafc;
  --text-secondary:     #b0bfd4;
  --text-muted:         #6b7f99;
  --text-ultra-muted:   #4a5f7a;

  /* ----------------------------------------------------------
     Borders
  ---------------------------------------------------------- */
  --border-subtle:      rgba(255, 255, 255, 0.08);
  --border-default:     rgba(255, 255, 255, 0.12);
  --border-active:      rgba(124, 58, 237, 0.5);

  /* ----------------------------------------------------------
     Glassmorphism
  ---------------------------------------------------------- */
  --glass-bg:           rgba(26, 34, 54, 0.82);
  --glass-bg-strong:    rgba(17, 24, 39, 0.9);
  --glass-blur:         blur(24px);
  --glass-blur-subtle:  blur(16px);

  /* ----------------------------------------------------------
     Layout Dimensions
  ---------------------------------------------------------- */
  --sidebar-width:        260px;
  --sidebar-collapsed:    72px;
  --header-height:        68px;
  --stats-height:         48px;
  --staff-header-height:  120px;  /* Baş harf yuvarlakları tam görünsün (avatar + isim + rol + randevu sayısı) */
  --time-gutter-width:    72px;
  --staff-col-min:        160px;

  /* ----------------------------------------------------------
     Calendar Grid Math
     Formula: top    = (startH - 8) * 80 + (startM * 80 / 60)
              height = durationMin * 80 / 60
  ---------------------------------------------------------- */
  --hour-height:          80px;   /* 1 saat = 80px */
  --half-hour-height:     40px;   /* 30 dk  = 40px */
  --grid-total-height:    1040px; /* 13 saat × 80px (08:00–21:00) */
  --card-gap:             4px;    /* kart kenar boşluğu */

  /* ----------------------------------------------------------
     Border Radius
  ---------------------------------------------------------- */
  --radius-sm:    8px;
  --radius-md:    12px;
  --radius-lg:    16px;
  --radius-xl:    20px;
  --radius-2xl:   24px;

  /* ----------------------------------------------------------
     Transitions
  ---------------------------------------------------------- */
  --transition-fast:  0.15s ease;
  --transition-base:  0.25s ease;
  --transition-slow:  0.4s cubic-bezier(0.16, 1, 0.3, 1);
}