/**
 * Tarif Defteri - Design Tokens
 * Modern dogal tonlar - Apple / Notion / SaaS karisimi
 */
:root {
  /* Renk paleti */
  --color-bg: #f7f6f3;
  --color-bg-elevated: #ffffff;
  --color-surface: #ffffff;
  --color-surface-muted: #f3f2ef;

  --color-primary: #5a7d59;
  --color-primary-hover: #4a6b49;
  --color-primary-soft: rgba(90, 125, 89, 0.1);
  --color-primary-muted: rgba(90, 125, 89, 0.65);

  --color-accent: #c9a66b;
  --color-accent-soft: rgba(201, 166, 107, 0.14);

  --color-text: #1a1a1c;
  --color-text-secondary: #52525b;
  --color-text-muted: #71717a;

  --color-border: rgba(0, 0, 0, 0.07);
  --color-border-strong: rgba(0, 0, 0, 0.12);

  --color-danger: #dc4c4c;
  --color-danger-soft: rgba(220, 76, 76, 0.1);
  --color-success: #5a7d59;
  --color-favorite: #e8b84a;

  /* Filter chips */
  --chip-bg: #eef1ec;
  --chip-bg-hover: #e4e9e3;
  --chip-text: #2c3e2c;
  --chip-text-muted: #4a5548;
  --chip-border: rgba(90, 125, 89, 0.22);
  --chip-border-hover: rgba(90, 125, 89, 0.38);
  --chip-active-bg: #4a6b49;
  --chip-active-text: #ffffff;
  --chip-shadow-hover: 0 2px 8px rgba(74, 107, 73, 0.14);
  --chip-shadow-active: 0 2px 10px rgba(74, 107, 73, 0.28);

  /* Header glass */
  --header-bg: rgba(255, 255, 255, 0.78);
  --header-bg-scrolled: rgba(255, 255, 255, 0.92);
  --header-blur: 20px;
  --header-border: rgba(0, 0, 0, 0.06);
  --header-shadow: 0 1px 0 var(--header-border), 0 4px 24px rgba(0, 0, 0, 0.04);
  --header-shadow-scrolled: 0 1px 0 var(--header-border), 0 8px 32px rgba(0, 0, 0, 0.08);

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);

  /* Layout */
  --layout-max-width: 1320px;

  /* Sidebar */
  --sidebar-bg: #fafaf8;
  --sidebar-border: rgba(0, 0, 0, 0.06);
  --sidebar-hover: rgba(90, 125, 89, 0.08);
  --sidebar-active-bg: rgba(90, 125, 89, 0.14);

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;
  --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);

  /* Image loading */
  --skeleton-base: var(--color-surface-muted);
  --skeleton-shine: #eceae6;

  /* Legacy aliases (mevcut styles.css uyumlulu?u) */
  --bg: var(--color-bg);
  --card-bg: var(--color-surface);
  --primary: var(--color-primary);
  --primary-light: var(--color-primary-hover);
  --text: var(--color-text);
  --text-muted: var(--color-text-muted);
  --border: var(--color-border-strong);
  --radius: var(--radius-md);
  --radius-card: var(--radius-lg);
  --radius-lg: var(--radius-xl);
  --shadow: var(--shadow-sm);
  --shadow-soft: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --danger: var(--color-danger);
  --success: var(--color-success);
}

/* Dark mode altyapisi - ileride data-theme="dark" ile aktif edilecek */
[data-theme="dark"] {
  --color-bg: #141414;
  --color-surface: #1e1e1e;
  --color-surface-muted: #2a2a2a;
  --color-text: #f5f5f5;
  --color-text-secondary: #c4c4c4;
  --color-text-muted: #8a8a8a;
  --color-border: rgba(255, 255, 255, 0.08);
  --sidebar-bg: #1a1a1a;
  --sidebar-hover: rgba(255, 255, 255, 0.06);
  --sidebar-active-bg: rgba(90, 125, 89, 0.25);
  --header-bg: rgba(30, 30, 30, 0.85);
  --skeleton-base: #2a2a2a;
  --skeleton-shine: #353535;
}