/* ==========================================================================
   CSS Değişkenleri & Tasarım Sistemi (Design Tokens)
   Google Calendar & Modern Workspace Paleti
   ========================================================================== */

:root {
  /* Renk Paleti - Marka & Temel (Google Blue & Nötrler) */
  --color-primary: #1a73e8;
  --color-primary-hover: #1557b0;
  --color-primary-active: #174ea6;
  --color-primary-light: #e8f0fe;
  --color-primary-container: #d2e3fc;
  --color-on-primary: #ffffff;

  /* Yüzey ve Arka Plan Tonları */
  --color-bg-base: #f8fafd;
  --color-surface: #ffffff;
  --color-surface-hover: #f1f3f4;
  --color-surface-active: #e8eaed;
  --color-surface-variant: #f1f3f4;
  --color-border: #dadce0;
  --color-border-subtle: #edf0f2;
  --color-divider: #e8eaed;

  /* Tipografi Renkleri (Yüksek / Orta / Düşük Kontrast) */
  --color-text-primary: #202124;
  --color-text-secondary: #5f6368;
  --color-text-tertiary: #80868b;
  --color-text-disabled: #bdc1c6;
  --color-text-inverse: #ffffff;

  /* Ekip & Kategori Gösterge Renkleri (Modern Etiket Paleti) */
  --cat-blue: #1a73e8;
  --cat-green: #0d904f;
  --cat-amber: #ea8600;
  --cat-red: #d93025;
  --cat-purple: #8430ce;
  --cat-teal: #129990;
  --cat-pink: #d01884;
  --cat-indigo: #3f51b5;

  /* Durum Renkleri (Online / Meşgul / İzinli) */
  --status-online: #34a853;
  --status-busy: #ea4335;
  --status-away: #fbbc04;
  --status-offline: #9aa0a6;

  /* Tipografi Sistemi (Dinamik clamp() ile Tablet ve Masaüstü Uyumlu) */
  --font-family-base: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.8125rem;  /* 13px */
  --font-size-base: 0.875rem; /* 14px */
  --font-size-md: clamp(0.9375rem, 0.4vw + 0.75rem, 1rem);      /* 15px - 16px */
  --font-size-lg: clamp(1.0625rem, 0.7vw + 0.7rem, 1.125rem);   /* 17px - 18px */
  --font-size-xl: clamp(1.1875rem, 1.1vw + 0.7rem, 1.375rem);   /* 19px - 22px */
  --font-size-2xl: clamp(1.35rem, 1.6vw + 0.75rem, 1.75rem);    /* 22px - 28px */

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  /* Boyutlandırma ve Layout */
  --header-height: 64px;
  --sidebar-width: 280px;
  --sidebar-collapsed-width: 72px;

  /* Boşluklar (Spacing Scale) */
  --space-2xs: 0.25rem; /* 4px */
  --space-xs: 0.5rem;   /* 8px */
  --space-sm: 0.75rem;  /* 12px */
  --space-md: 1rem;     /* 16px */
  --space-lg: 1.25rem;  /* 20px */
  --space-xl: 1.5rem;   /* 24px */
  --space-2xl: 2rem;    /* 32px */

  /* Kenar Yuvarlama (Border Radius) */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  /* Gölgeler (Material 3 Elevation & SaaS Lift) */
  --shadow-sm: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
  --shadow-md: 0 1px 3px 0 rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
  --shadow-lg: 0 2px 6px 2px rgba(60, 64, 67, 0.15), 0 8px 18px 4px rgba(60, 64, 67, 0.15);
  --shadow-floating: 0 4px 12px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-hover-lift: 0 4px 10px rgba(60, 64, 67, 0.18), 0 1px 3px rgba(60, 64, 67, 0.12);

  /* Animasyon & Geçişler */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 320ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-lift: 200ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Webkit & Standart Scrollbar Renkleri */
  --scrollbar-thumb: rgba(189, 193, 198, 0.7);
  --scrollbar-thumb-hover: rgba(128, 134, 139, 0.9);
  --scrollbar-track: transparent;

  /* Katman Düzeyleri (Z-Index) */
  --z-base: 1;
  --z-header: 100;
  --z-sidebar: 200;
  --z-backdrop: 150;
  --z-modal: 500;
  --z-tooltip: 1000;
}