/* ═══════════════════════════════════════════════════════════════
   KOÇPANEL DESIGN SYSTEM v1.0 — "Tokens Foundation"
   ═══════════════════════════════════════════════════════════════
   Tek-kaynak (single source of truth) tasarım değişkenleri.
   Tüm bileşenler bu token'ları kullanır — değiştirmek için tek satır.
   
   Stratejik prensipler:
   • Spacing 4px base scale (4, 8, 12, 16, 24, 32, 48, 64)
   • Typography 12-32px ramp, 1.25 ratio modular scale
   • Shadow 5 katmanlı elevation sistemi (sm → 2xl)
   • Radius 4 boy (sm/md/lg/xl) + pill için full
   • Lime accent 5 shade'lik palet (50-500)
   • Glassmorphism + multi-layer shadow + cubic-bezier easings
*/
:root{
  /* ─── BRAND ACCENT (Volt — Sportif kimlik, 2026-07-17; eski Indigo #C8F531) — 5 shade palette ─── */
  --accent:#C8F531;
  --accent-50:rgba(200,245,49,0.04);
  --accent-100:rgba(200,245,49,0.08);
  --accent-200:rgba(200,245,49,0.16);
  --accent-300:rgba(200,245,49,0.32);
  --accent-400:rgba(200,245,49,0.6);
  --accent-500:#C8F531;
  --accent-dim:rgba(200,245,49,0.12);
  --accent-glow:0 0 32px rgba(200,245,49,0.25);

  /* ─── BACKGROUNDS ─── */
  --bg-dark:#0C0E10;
  --bg-sidebar:#0E1114;
  --bg-card:#13161A;
  --bg-card-hover:#1A1F26;
  --bg-input:#1A1F26;
  --bg-elevated:#1A1F26;
  --bg-glass:rgba(19,22,26,0.6);
  --bg-overlay:rgba(0,0,0,0.7);

  /* ─── TEXT HIERARCHY ─── */
  --text-primary:#F3F4F6;
  --text-secondary:#9CA3AF;
  --text-tertiary:#6B7280;
  --text-dim:#4B5563;
  --text-on-accent:#0C0E10;

  /* ─── BORDERS ─── */
  --border:#22262C;
  --border-strong:rgba(255,255,255,0.10);
  --border-accent:rgba(200,245,49,0.32);
  --border-input:rgba(255,255,255,0.08);
  --border-input-focus:rgba(200,245,49,0.5);

  /* ─── SEMANTIC COLORS ─── */
  --red:#EF4444;
  --red-soft:rgba(239,68,68,0.12);
  --orange:#F59E0B;
  --orange-soft:rgba(245,158,11,0.12);
  --blue:#60A5FA;
  --blue-soft:rgba(96,165,250,0.12);
  --green:#10B981;
  --green-soft:rgba(16,185,129,0.12);
  --purple:#A855F7;
  --purple-soft:rgba(168,85,247,0.12);
  --cyan:#22D3EE;
  --cyan-soft:rgba(34,211,238,0.12);
  --yellow:#FBBF24;
  --yellow-soft:rgba(251,191,36,0.12);

  /* ─── SPACING SCALE (4px base, T-shirt naming) ─── */
  --space-2xs:2px;   /* hairline */
  --space-xs:4px;    /* tight inline */
  --space-sm:8px;    /* default gap */
  --space-md:12px;   /* card inner */
  --space-base:16px; /* baseline */
  --space-lg:20px;   /* section gap */
  --space-xl:24px;   /* major gap */
  --space-2xl:32px;  /* hero gap */
  --space-3xl:48px;  /* layout gap */
  --space-4xl:64px;  /* wide spacing */

  /* ─── TYPOGRAPHY SCALE (modular, 1.2 ratio) ─── */
  --font-2xs:0.68rem;   /* 10.9px - meta, captions */
  --font-xs:0.75rem;    /* 12px - small labels */
  --font-sm:0.82rem;    /* 13px - body small */
  --font-base:0.92rem;  /* 14.7px - body */
  --font-md:1rem;       /* 16px - emphasis */
  --font-lg:1.15rem;    /* 18.4px - subtitles */
  --font-xl:1.4rem;     /* 22.4px - section titles */
  --font-2xl:1.75rem;   /* 28px - page titles */
  --font-3xl:2.2rem;    /* 35.2px - hero */
  --font-4xl:2.8rem;    /* 44.8px - display */

  /* ─── FONT WEIGHTS ─── */
  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;
  --fw-extrabold:800;
  --fw-black:900;

  /* ─── LETTER SPACING ─── */
  --tracking-tight:-0.02em;
  --tracking-normal:0;
  --tracking-wide:0.04em;
  --tracking-wider:0.08em;

  /* ─── LINE HEIGHTS ─── */
  --leading-tight:1.15;
  --leading-snug:1.35;
  --leading-normal:1.5;
  --leading-relaxed:1.65;

  /* ─── BORDER RADIUS SCALE ─── */
  --radius-2xs:4px;
  --radius-xs:6px;
  --radius-sm:8px;
  --radius-md:10px;
  --radius:14px;        /* default, mevcut kod ile uyumlu */
  --radius-lg:16px;
  --radius-xl:20px;
  --radius-2xl:24px;
  --radius-pill:9999px;

  /* ─── SHADOW ELEVATION SYSTEM (5 katman) ─── */
  --shadow-xs:0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm:0 2px 4px rgba(0,0,0,0.35),
              0 1px 2px rgba(0,0,0,0.2);
  --shadow-md:0 4px 8px rgba(0,0,0,0.4),
              0 2px 4px rgba(0,0,0,0.25);
  --shadow-lg:0 8px 16px rgba(0,0,0,0.45),
              0 4px 8px rgba(0,0,0,0.3);
  --shadow-xl:0 16px 32px rgba(0,0,0,0.5),
              0 8px 16px rgba(0,0,0,0.35);
  --shadow-2xl:0 24px 48px rgba(0,0,0,0.55),
               0 12px 24px rgba(0,0,0,0.4);
  /* Inner shadows for inputs/wells */
  --shadow-inner:inset 0 2px 4px rgba(0,0,0,0.3);

  /* ─── CUBIC BEZIER EASINGS (uiverse-grade smoothness) ─── */
  --ease-out:cubic-bezier(0.16,1,0.3,1);          /* expo out */
  --ease-in-out:cubic-bezier(0.65,0,0.35,1);       /* expo io */
  --ease-bounce:cubic-bezier(0.34,1.56,0.64,1);    /* back out */
  --ease-snappy:cubic-bezier(0.22,0.61,0.36,1);    /* native iOS */
  --ease-linear:linear;

  /* ─── TRANSITION SPEEDS ─── */
  --duration-instant:80ms;
  --duration-fast:140ms;
  --duration-base:220ms;
  --duration-slow:380ms;
  --duration-slower:600ms;

  /* ─── Z-INDEX LAYER STACK ─── */
  --z-base:1;
  --z-raised:10;
  --z-dropdown:1000;
  --z-sticky:1100;
  --z-fixed:1200;
  --z-overlay:9000;
  --z-modal:9500;
  --z-toast:9700;
  --z-tooltip:9800;
  --z-max:9999;
  /* §4.1 RESMİ ölçeğin token'ları (2026-07-12, Faz C-0) — yukarıdaki eski
     --z-modal:9500 ailesi KULLANILMIYOR ve gerçek ölçekle uyuşmuyor; bağlayıcı
     değerler MASTER_DOCUMENT §4.1 tablosudur. Yeni kod BUNLARI kullanmalı: */
  --z-detail:10100;        /* Danışan Detayı paneli */
  --z-detail-modal:10200;  /* panel içi wizard/modallar + kp modal fabrikası */
  --z-confirm:10250;       /* #confirmModal — her bağlamın üstü */

  /* ─── LAYOUT ─── */
  --sidebar-w:260px;
  --header-h:64px;
  --container-max:1280px;
  --container-narrow:760px;
  --content-pad-mobile:16px;
  --content-pad-desktop:24px;

  /* ─── GLASSMORPHISM EFFECTS ─── */
  --blur-sm:blur(8px);
  --blur-md:blur(16px);
  --blur-lg:blur(24px);
  --glass-tint:rgba(255,255,255,0.02);
  --glass-border:rgba(255,255,255,0.08);
}