/**
 * BQR App - CSS Variables
 *
 * Tüm renk ve tema tanımlamaları burada merkezi olarak yönetilir.
 * Kolayca özelleştirilebilir ve genişletilebilir yapı.
 */

:root {
  /* ===== Brand Colors ===== */
  --brand-primary: #2563eb;
  --brand-primary-hover: #1e40af;
  --brand-primary-focus: rgba(37, 99, 235, 0.125);

  --brand-secondary: #7c3aed;
  --brand-secondary-hover: #6d28d9;
  --brand-secondary-focus: rgba(124, 58, 237, 0.125);

  --brand-accent: #f59e0b;
  --brand-accent-hover: #d97706;
  --brand-accent-focus: rgba(245, 158, 11, 0.125);

  /* ===== Semantic Colors ===== */
  --color-success: #10b981;
  --color-success-hover: #059669;
  --color-success-bg: #d1fae5;

  --color-warning: #f59e0b;
  --color-warning-hover: #d97706;
  --color-warning-bg: #fef3c7;

  --color-error: #ef4444;
  --color-error-hover: #dc2626;
  --color-error-bg: #fee2e2;

  --color-info: #3b82f6;
  --color-info-hover: #2563eb;
  --color-info-bg: #dbeafe;

  /* ===== Neutral Colors ===== */
  --color-text-primary: #1e293b;
  --color-text-secondary: #64748b;
  --color-text-muted: #94a3b8;

  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f8fafc;
  --color-bg-tertiary: #f1f5f9;

  --color-border: #e2e8f0;
  --color-border-hover: #cbd5e1;

  /* ===== QR Code Specific Colors ===== */
  --qr-foreground: #000000;
  --qr-background: #ffffff;
  --qr-accent: var(--brand-primary);

  /* ===== Spacing Scale ===== */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;

  /* ===== Border Radius ===== */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* ===== Shadows ===== */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

  /* ===== Gradients ===== */
  /* Subtle background gradients */
  --gradient-primary: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #f0f9ff 100%);
  --gradient-secondary: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 50%, #faf5ff 100%);
  --gradient-accent: linear-gradient(135deg, #fffbeb 0%, #fef3c7 50%, #fffbeb 100%);
  --gradient-neutral: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #f8fafc 100%);

  /* Button gradients - aynı rengin tonları */
  --gradient-button-primary: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  --gradient-button-secondary: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  --gradient-button-success: linear-gradient(135deg, #34d399 0%, #10b981 100%);
  --gradient-button-warning: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  --gradient-button-error: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
  --gradient-button-contrast: linear-gradient(135deg, #475569 0%, #334155 100%);

  /* Alert gradients - çok hafif */
  --gradient-alert-success: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  --gradient-alert-warning: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  --gradient-alert-error: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
  --gradient-alert-info: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);

  /* Mesh gradients - daha karmaşık geçişler */
  --gradient-mesh-cool: linear-gradient(135deg, #e0f2fe 0%, #ddd6fe 50%, #fce7f3 100%);
  --gradient-mesh-warm: linear-gradient(135deg, #fef3c7 0%, #fed7aa 50%, #fecaca 100%);
  --gradient-mesh-ocean: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 50%, #e0f2fe 100%);

  /* Card/Section gradients */
  --gradient-card-default: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  --gradient-card-highlight: linear-gradient(145deg, #ffffff 0%, #e0f2fe 100%);
  --gradient-card-subtle: linear-gradient(to bottom, #ffffff 0%, #fafbfc 100%);

  /* Radial gradients */
  --gradient-radial-primary: radial-gradient(circle at top right, #dbeafe 0%, transparent 70%);
  --gradient-radial-secondary: radial-gradient(circle at bottom left, #f3e8ff 0%, transparent 70%);
  --gradient-radial-accent: radial-gradient(circle at center, #fef3c7 0%, transparent 70%);

  /* ===== Pico CSS Override ===== */
  --pico-primary: var(--brand-primary);
  --pico-primary-hover: var(--brand-primary-hover);
  --pico-primary-focus: var(--brand-primary-focus);

  --pico-secondary: var(--brand-secondary);
  --pico-secondary-hover: var(--brand-secondary-hover);
  --pico-secondary-focus: var(--brand-secondary-focus);

  --pico-contrast: var(--color-text-primary);
  --pico-contrast-hover: var(--brand-primary);
}

/* ===== Dark Theme ===== */
[data-theme="dark"] {
  /* Brand colors stay consistent */
  --brand-primary: #3b82f6;
  --brand-primary-hover: #60a5fa;
  --brand-primary-focus: rgba(59, 130, 246, 0.25);

  --brand-secondary: #8b5cf6;
  --brand-secondary-hover: #a78bfa;
  --brand-secondary-focus: rgba(139, 92, 246, 0.25);

  /* Dark semantic colors */
  --color-success: #34d399;
  --color-success-hover: #6ee7b7;
  --color-success-bg: #064e3b;

  --color-warning: #fbbf24;
  --color-warning-hover: #fcd34d;
  --color-warning-bg: #78350f;

  --color-error: #f87171;
  --color-error-hover: #fca5a5;
  --color-error-bg: #7f1d1d;

  --color-info: #60a5fa;
  --color-info-hover: #93c5fd;
  --color-info-bg: #1e3a8a;

  /* Dark neutral colors */
  --color-text-primary: #f1f5f9;
  --color-text-secondary: #cbd5e1;
  --color-text-muted: #94a3b8;

  --color-bg-primary: #0f172a;
  --color-bg-secondary: #1e293b;
  --color-bg-tertiary: #334155;

  --color-border: #334155;
  --color-border-hover: #475569;

  /* Dark QR colors */
  --qr-foreground: #ffffff;
  --qr-background: #1e293b;

  /* ===== Dark Theme Gradients ===== */
  --gradient-primary: linear-gradient(135deg, #1e3a8a 0%, #1e40af 50%, #1e3a8a 100%);
  --gradient-secondary: linear-gradient(135deg, #581c87 0%, #6d28d9 50%, #581c87 100%);
  --gradient-accent: linear-gradient(135deg, #78350f 0%, #92400e 50%, #78350f 100%);
  --gradient-neutral: linear-gradient(135deg, #1e293b 0%, #334155 50%, #1e293b 100%);

  /* Dark button gradients */
  --gradient-button-primary: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
  --gradient-button-secondary: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
  --gradient-button-success: linear-gradient(135deg, #6ee7b7 0%, #34d399 100%);
  --gradient-button-warning: linear-gradient(135deg, #fcd34d 0%, #fbbf24 100%);
  --gradient-button-error: linear-gradient(135deg, #fca5a5 0%, #f87171 100%);
  --gradient-button-contrast: linear-gradient(135deg, #64748b 0%, #475569 100%);

  /* Dark alert gradients */
  --gradient-alert-success: linear-gradient(135deg, #064e3b 0%, #065f46 100%);
  --gradient-alert-warning: linear-gradient(135deg, #78350f 0%, #92400e 100%);
  --gradient-alert-error: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%);
  --gradient-alert-info: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);

  --gradient-mesh-cool: linear-gradient(135deg, #1e3a8a 0%, #581c87 50%, #7f1d1d 100%);
  --gradient-mesh-warm: linear-gradient(135deg, #92400e 0%, #9a3412 50%, #991b1b 100%);
  --gradient-mesh-ocean: linear-gradient(135deg, #1e40af 0%, #4338ca 50%, #1e3a8a 100%);

  --gradient-card-default: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);
  --gradient-card-highlight: linear-gradient(145deg, #1e293b 0%, #1e3a8a 100%);
  --gradient-card-subtle: linear-gradient(to bottom, #0f172a 0%, #1a2332 100%);

  --gradient-radial-primary: radial-gradient(circle at top right, #1e3a8a 0%, transparent 70%);
  --gradient-radial-secondary: radial-gradient(circle at bottom left, #581c87 0%, transparent 70%);
  --gradient-radial-accent: radial-gradient(circle at center, #78350f 0%, transparent 70%);
}