/* Design tokens — mobil uygulama ile uyumlu mor/yeşil palet */
:root {
  --primary:       #6C63FF;
  --primary-dark:  #554fd4;
  --secondary:     #8B5CF6;
  --accent:        #22C55E;
  --accent-dark:   #16a34a;

  --bg:            #F6F7FB;
  --bg-soft:       #EEF0FF;
  --bg-muted:      #E8EAFE;
  --surface:       #ffffff;
  --surface-glass: rgba(255, 255, 255, 0.72);

  --text:          #0f172a;
  --text-2:        #475569;
  --text-3:        #94a3b8;

  --border:        rgba(15, 23, 42, 0.08);
  --border-hover:  rgba(108, 99, 255, 0.28);

  --gradient-brand: linear-gradient(135deg, #6C63FF 0%, #8B5CF6 55%, #a78bfa 100%);
  --gradient-accent: linear-gradient(135deg, #22C55E 0%, #4ade80 100%);
  --gradient-hero:   radial-gradient(ellipse 80% 60% at 10% -10%, rgba(108,99,255,.18), transparent 55%),
                     radial-gradient(ellipse 70% 50% at 95% 0%, rgba(139,92,246,.14), transparent 50%),
                     radial-gradient(ellipse 60% 40% at 50% 100%, rgba(34,197,94,.08), transparent 55%);

  --radius-xs:  8px;
  --radius-sm:  12px;
  --radius:     16px;
  --radius-lg:  22px;
  --radius-xl:  28px;
  --radius-2xl: 36px;
  --radius-pill: 999px;

  --shadow-xs:  0 2px 8px rgba(108, 99, 255, 0.06);
  --shadow-sm:  0 4px 16px rgba(15, 23, 42, 0.06);
  --shadow:     0 12px 40px rgba(108, 99, 255, 0.12);
  --shadow-lg:  0 24px 64px rgba(108, 99, 255, 0.16);
  --shadow-glow: 0 8px 32px rgba(108, 99, 255, 0.35);

  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 72px;
  --space-4xl: 96px;

  --font: 'Poppins', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --t: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 0.45s cubic-bezier(0.4, 0, 0.2, 1);

  /* Legacy aliases (iç sayfalar) */
  --brand: var(--primary);
  --brand-dark: var(--primary-dark);
  --brand-light: #a5b4fc;
  --bg-card: var(--surface);
  --bg-hover: #f8fafc;
  --bg-active: rgba(108, 99, 255, 0.1);
  --cyan: var(--secondary);
  --green: var(--accent);
  --green-light: #86efac;
  --text-muted: var(--text-2);
  --r-xs: var(--radius-xs);
  --r-sm: var(--radius-sm);
  --r: var(--radius);
  --r-lg: var(--radius-lg);
  --r-xl: var(--radius-xl);
}