/**
 * ========================================
 * FLOW THEME - DESIGN TOKENS (v2.0)
 * ========================================
 *
 * Bu dosya tüm tasarım sisteminin temelini oluşturur.
 * Renk, tipografi, spacing gibi tüm değerler burada tanımlanır.
 *
 * Kullanım: var(--color-primary)
 */

:root {

  /* ============================================
     RENK SİSTEMİ
     ============================================ */

  /* --- PRIMARY COLOR --- */
  --color-primary: #3276b3;
  --color-primary-hover: #2a5f8f;
  --color-primary-light: #4a8bc7;
  --color-primary-dark: #1d4a6d;

  /* --- SECONDARY COLORS --- */
  --color-purple: #9b59b6;
  --color-purple-hover: #8134a1;
  --color-purple-light: #b88ac7;
  --color-purple-dark: #7d3c98;

  --color-cyan: #09D2C1;
  --color-cyan-hover: #1A9DA5;
  --color-cyan-light: #3de0d1;
  --color-cyan-dark: #078f82;

  --color-blue: #1da1f2;
  --color-blue-hover: #1990d9;
  --color-blue-light: #4db5f5;
  --color-blue-dark: #1580c4;

  --color-navy: #2980b9;
  --color-navy-hover: #216694;
  --color-navy-light: #4a9dd4;
  --color-navy-dark: #1a5a80;

  --color-magenta: #F46262;
  --color-magenta-hover: #c0392b;
  --color-magenta-light: #f78989;
  --color-magenta-dark: #d63b3b;

  --color-red: #CA2527;
  --color-red-hover: #c0392b;
  --color-red-light: #e54345;
  --color-red-dark: #9b1c1e;

  --color-orange: #f39c12;
  --color-orange-hover: #d68910;
  --color-orange-light: #f5b041;
  --color-orange-dark: #b9770e;

  --color-gold: #ffc107;
  --color-gold-hover: #e0a800;
  --color-gold-light: #ffd54f;
  --color-gold-dark: #c79100;

  --color-green: #4BA978;
  --color-green-hover: #3d8a62;
  --color-green-light: #6fbc94;
  --color-green-dark: #2e7d5a;

  --color-pink: #D93C46;
  --color-pink-hover: #c0323b;
  --color-pink-light: #e4636b;
  --color-pink-dark: #b32d35;

  /* --- NEUTRAL COLORS (GRAY SCALE) --- */
  --color-white: #FFFFFF;
  --color-black: #000000;

  --color-gray-50: #f9fafb;
  --color-gray-100: #f4f4f5;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #bdc3c7;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;

  /* --- SEMANTIC COLORS --- */
  --color-success: #27ae60;
  --color-success-hover: #229954;
  --color-success-light: #52c77a;

  --color-warning: #ffc107;
  --color-warning-hover: #e0a800;
  --color-warning-light: #ffd04b;

  --color-danger: #dc3545;
  --color-danger-hover: #c82333;
  --color-danger-light: #e4606d;

  --color-info: #17a2b8;
  --color-info-hover: #138496;
  --color-info-light: #3fb9ce;

  /* --- GRADIENT COLORS --- */
  --gradient-purple: linear-gradient(to left, #66469c 0%, #274d9e 72%);
  --gradient-cyan: linear-gradient(-90deg, #84fab0 0%, #8fd3f4 60%);
  --gradient-light-purple: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
  --gradient-turquaz: linear-gradient(90deg, #5ee7df 0%, #b490ca 100%);
  --gradient-blue: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
  --gradient-light-blue: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
  --gradient-info: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
  --gradient-green: linear-gradient(180deg, #4BA978 0%, #599576 100%);
  --gradient-red: linear-gradient(180deg, #c72727 0%, #741717 100%);
  --gradient-violet: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-orange: linear-gradient(135deg, #f39c12 0%, #d68910 100%);
  --gradient-gold: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
  --gradient-pink: linear-gradient(135deg, #D93C46 0%, #c0323b 100%);
  --gradient-theme: linear-gradient(120deg, var(--te-color) 0%, var(--te-hover-color) 100%);

  /* --- TRANSPARENT COLORS --- */
  --color-overlay-light: rgba(0, 0, 0, 0.2);
  --color-overlay-medium: rgba(0, 0, 0, 0.5);
  --color-overlay-dark: rgba(0, 0, 0, 0.75);
  --color-overlay-white: rgba(255, 255, 255, 0.9);

  /* --- SOCIAL MEDIA COLORS --- */
  --color-facebook: #3b5998;
  --color-twitter: #000000;
  --color-instagram: #3f729b;
  --color-pinterest: #F74C53;
  --color-linkedin: #0e76a8;
  --color-tiktok: #222222;
  --color-youtube: #FF0000;
  --color-whatsapp: #25D366;
  --color-telegram: #0088cc;

  /* --- BOOTSTRAP COMPATIBILITY --- */
  --bs-primary: var(--color-primary);
  --bs-secondary: var(--color-gray-500);
  --bs-success: var(--color-success);
  --bs-info: var(--color-info);
  --bs-warning: var(--color-warning);
  --bs-danger: var(--color-danger);
  --bs-light: var(--color-gray-100);
  --bs-dark: var(--color-gray-900);

  /* ============================================
     SHADOW SİSTEMİ
     ============================================ */

  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* ============================================
     TRANSITION SİSTEMİ
     ============================================ */

  --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-all: all 250ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ============================================
     TEMA RENKLERİ (Theme Colors)
     ============================================ */

  /*
   * --te-color ve --te-hover-color meta-header.php içinde tanımlanır.
   * CMS entegrasyonunda bu değerler panel ayarlarından gelir.
   * Aşağıdaki değerler sadece FALLBACK (yedek) olarak kullanılır.
   */

  /* Link renkleri */
  --te-link-color: var(--color-gray-900);
  --te-link-hover-color: var(--te-hover-color, #194c82);
}

/* ============================================
   SEMANTIC COLOR TOKENS (Dark Mode İçin)
   ============================================ */

  /* Bu değişkenler dark mode'da otomatik değişir */
  :root {
    /* Surface (Arka Plan) Renkleri */
    --color-surface-primary: var(--color-white);
    --color-surface-secondary: var(--color-gray-50);
    --color-surface-tertiary: var(--color-gray-100);
    --color-surface-elevated: var(--color-white);

    /* Text Renkleri */
    --color-text-primary: var(--color-gray-900);
    --color-text-secondary: var(--color-gray-600);
    --color-text-muted: var(--color-gray-400);
    --color-text-inverse: var(--color-white);

    /* Border Renkleri */
    --color-border-default: var(--color-gray-200);
    --color-border-strong: var(--color-gray-300);
    --color-border-muted: var(--color-gray-100);
  }