/**
 * ============================================================================
 * [MODÜL: DESIGN TOKENS — CSS CUSTOM PROPERTIES]
 * Youthside ATS — Profile UI
 * ============================================================================
 * Amaç: Tüm renk paleti, tipografi, spacing, shadow ve border-radius
 *        değerlerini tek merkezden yönetir.
 *
 * Mimar Notu (Ferhat Cengiz):
 *   Tailwind config'deki renkler runtime'da CSS class olarak çalışır.
 *   Ancak custom property'ler, inline stillerde ve JS tarafında da
 *   erişilebilir olduğu için "Single Source of Truth" prensibini güçlendirir.
 *   İleride Tailwind bağımsız bileşenler yazılırsa bu dosya temel olacaktır.
 *
 * DRY Notu: Hiçbir renk kodu bu dosya dışında hardcode edilmeyecek.
 * ============================================================================
 */

:root {
  /* ── Primary Palette ─────────────────────────────────────────── */
  --color-primary: #e30613;
  --color-primary-50: #fdf2f2;
  --color-primary-100: #fbe6e6;
  --color-primary-200: #f5c2c3;
  --color-primary-300: #ee9899;
  --color-primary-400: #e66366;
  --color-primary-500: #e30613;
  --color-primary-600: #c40510;
  --color-primary-700: #9e040d;
  --color-primary-800: #80050d;
  --color-primary-900: #6b0810;

  /* ── Neutral / Surface ───────────────────────────────────────── */
  --color-bg-light: #fdfdfd;
  --color-bg-dark: #111827;
  --color-surface-light: #ffffff;
  --color-surface-dark: #1f2937;
  --color-text-light: #1f2937;
  --color-text-dark: #f3f4f6;
  --color-text-muted-light: #6b7280;
  --color-text-muted-dark: #9ca3af;

  /* ── Accent ──────────────────────────────────────────────────── */
  --color-accent: #f04c11;

  /* ── Typography ──────────────────────────────────────────────── */
  --font-family-sans:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* ── Spacing Scale (8px grid) ────────────────────────────────── */
  --space-xs: 0.25rem; /* 4px  */
  --space-sm: 0.5rem; /* 8px  */
  --space-md: 1rem; /* 16px */
  --space-lg: 1.5rem; /* 24px */
  --space-xl: 2rem; /* 32px */
  --space-2xl: 3rem; /* 48px */
  --space-3xl: 4rem; /* 64px */

  /* ── Border Radius ───────────────────────────────────────────── */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 2rem;
  --radius-full: 9999px;

  /* ── Shadows ─────────────────────────────────────────────────── */
  --shadow-card:
    0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
  --shadow-hover:
    0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-soft: 0 10px 40px -10px rgba(0, 0, 0, 0.05);
  --shadow-glow: 0 0 20px rgba(240, 76, 17, 0.3);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* ── Transitions ─────────────────────────────────────────────── */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;

  /* ── Z-Index Scale ───────────────────────────────────────────── */
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-header: 40;
  --z-overlay: 50;
  --z-sidebar: 60;
  --z-modal: 70;
  --z-toast: 80;
  --z-announcement: 80;
}