/* ============================================================
   Müzik Okulu Takip Sistemi — Tasarım Sistemi v3
   Merkezi değişkenler dosyası
   ============================================================ */

:root {

  /* ── Renkler ── */

  /* Ana renk: Marka turuncusu #FF671F — enerjik, aksiyon ve vurgu rengi */
  --c-primary: #FF671F;
  --c-primary-light: #FF8A52;
  --c-primary-dark: #D94F12;
  --c-primary-rgb: 255, 103, 31;

  /* Vurgu rengi: Marka moru #602A80 — kurumsal, koyu yüzeyler */
  --c-accent: #602A80;
  --c-accent-light: #7B4A98;
  --c-accent-dark: #451D5F;
  --c-accent-rgb: 96, 42, 128;

  /* Yardımcı vurgu: marka turuncusu (eski gold kaldırıldı) */
  --c-gold: #FF671F;
  --c-gold-light: #FF8A52;

  /* Başarı / Uyarı / Hata */
  --c-success: #2D8B56;
  --c-warning: #E07B3A;
  --c-danger: #B5332E;
  --c-info: #1B6B8A;

  /* Nötr gri tonları — sıcak alt tonlu */
  --c-gray-50:  #FAF9F7;
  --c-gray-100: #F5F3F0;
  --c-gray-200: #E8E4DF;
  --c-gray-300: #D4CEC7;
  --c-gray-400: #A8A096;
  --c-gray-500: #7A7268;
  --c-gray-600: #5C554D;
  --c-gray-700: #3E3933;
  --c-gray-800: #2A2622;
  --c-gray-900: #1A1714;

  /* Sayfa */
  --c-bg: var(--c-gray-50);
  --c-surface: #FFFFFF;
  --c-ink: var(--c-gray-900);
  --c-ink-2: var(--c-gray-700);
  --c-muted: var(--c-gray-500);
  --c-border: rgba(26, 23, 20, 0.08);
  --c-border-strong: rgba(26, 23, 20, 0.15);

  /* ── Tipografi ── */
  --ff-display: 'Fraunces', 'Georgia', serif;
  --ff-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --fs-xs: 0.75rem;    /* 12px */
  --fs-sm: 0.8125rem;  /* 13px */
  --fs-base: 0.9375rem; /* 15px */
  --fs-md: 1rem;       /* 16px */
  --fs-lg: 1.125rem;   /* 18px */
  --fs-xl: 1.375rem;   /* 22px */
  --fs-2xl: 1.75rem;   /* 28px */
  --fs-3xl: 2.25rem;   /* 36px */
  --fs-4xl: 3rem;      /* 48px */

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.2;
  --lh-base: 1.55;
  --lh-relaxed: 1.7;

  --ls-tight: -0.025em;
  --ls-normal: 0;
  --ls-wide: 0.05em;

  /* ── Spacing (4px taban) ── */
  --sp-0: 0;
  --sp-1: 0.25rem;   /* 4px */
  --sp-2: 0.5rem;    /* 8px */
  --sp-3: 0.75rem;   /* 12px */
  --sp-4: 1rem;      /* 16px */
  --sp-5: 1.5rem;    /* 24px */
  --sp-6: 2rem;      /* 32px */
  --sp-7: 3rem;      /* 48px */
  --sp-8: 4rem;      /* 64px */
  --sp-9: 5rem;      /* 80px */
  --sp-10: 6rem;     /* 96px */

  /* ── Border Radius ── */
  --r-xs: 0.25rem;   /* 4px — compact */
  --r-sm: 0.375rem;  /* 6px — inputs, badges */
  --r-md: 0.5rem;    /* 8px — cards, dropdowns */
  --r-lg: 0.75rem;   /* 12px — large cards, modals */
  --r-xl: 1rem;      /* 16px — hero, feature */
  --r-2xl: 1.5rem;   /* 24px — auth cards */
  --r-full: 9999px;  /* pill */

  /* ── Shadows ── */
  --shadow-xs: 0 1px 2px rgba(26, 23, 20, 0.04);
  --shadow-sm: 0 1px 3px rgba(26, 23, 20, 0.06), 0 2px 8px -2px rgba(26, 23, 20, 0.05);
  --shadow-md: 0 2px 4px rgba(26, 23, 20, 0.06), 0 6px 20px -4px rgba(26, 23, 20, 0.08);
  --shadow-lg: 0 4px 8px rgba(26, 23, 20, 0.06), 0 16px 40px -12px rgba(255, 103, 31, 0.15);
  --shadow-xl: 0 8px 16px rgba(26, 23, 20, 0.08), 0 24px 60px -12px rgba(255, 103, 31, 0.22);

  /* ── Transitions ── */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;

  /* ── Z-index ── */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal-backdrop: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* ── Bootstrap overrides ── */
  --bs-primary: var(--c-primary);
  --bs-primary-rgb: var(--c-primary-rgb);
  --bs-link-color: var(--c-primary);
  --bs-link-hover-color: var(--c-primary-dark);
  --bs-body-bg: var(--c-bg);
  --bs-body-color: var(--c-ink-2);
  --bs-body-font-family: var(--ff-body);
  --bs-body-font-size: var(--fs-base);
  --bs-body-line-height: var(--lh-base);
  --bs-border-radius: var(--r-sm);
  --bs-border-radius-lg: var(--r-md);
  --bs-border-radius-sm: var(--r-xs);
}