/* ═══════════════════════════════════════════════════════════════
   VinciMinds — tokens.css
   TEK RENK KAYNAĞI. Başka hiçbir dosyada renk tanımlanmaz.
   Sürüm 2.0 · Dark/Light · Token-Tabanlı
   Oluşturulma: 16 Mart 2026
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────
   KATMAN 1: Primitive Tokens (ham değerler)
   ───────────────────────────────────────── */
:root {
  /* Navy palette */
  --navy-950: #060b14;
  --navy-900: #0d1525;
  --navy-800: #111d33;
  --navy-700: #162240;
  --navy-600: #1e2d52;
  --navy-500: #253566;
  --navy-400: #3a4f8a;

  /* Slate palette */
  --slate-900: #0f172a;
  --slate-800: #1e293b;
  --slate-700: #293548;
  --slate-600: #334155;
  --slate-500: #475569;
  --slate-400: #64748b;
  --slate-300: #94a3b8;
  --slate-200: #cbd5e1;
  --slate-100: #e2e8f0;
  --slate-50:  #f1f5f9;

  /* Blue accent palette */
  --blue-700: #1d4ed8;
  --blue-600: #2563eb;
  --blue-500: #3b82f6;
  --blue-400: #60a5fa;
  --blue-300: #93c5fd;
  --blue-200: #bfdbfe;

  /* Teal palette (secondary accent) */
  --teal-600: #0d9488;
  --teal-500: #14b8a6;
  --teal-400: #2dd4bf;
  --teal-300: #5eead4;

  /* Status palettes */
  --green-600: #16a34a;
  --green-500: #22c55e;
  --green-400: #4ade80;
  --green-200: #bbf7d0;

  --amber-600: #d97706;
  --amber-500: #f59e0b;
  --amber-400: #fbbf24;
  --amber-200: #fde68a;

  --red-600:   #dc2626;
  --red-500:   #ef4444;
  --red-400:   #f87171;
  --red-200:   #fecaca;

  /* Neutral */
  --white: #ffffff;
  --black: #000000;
}


/* ─────────────────────────────────────────
   KATMAN 2: Semantic Tokens
   ───────────────────────────────────────── */

/* ── DARK MODE (varsayılan) ── */
:root,
[data-theme="dark"],
.dark {
  /* Backgrounds */
  --color-bg:           var(--navy-950);
  --color-bg-surface:   var(--navy-900);
  --color-bg-card:      var(--navy-800);
  --color-bg-elevated:  var(--navy-700);
  --color-bg-overlay:   rgba(6,11,20,0.85);
  --color-bg-hover:     var(--navy-600);
  --color-bg-active:    var(--navy-500);
  --color-bg-muted:     rgba(255,255,255,0.04);

  /* Text */
  --color-text:           var(--slate-50);
  --color-text-secondary: var(--slate-300);
  --color-text-muted:     var(--slate-500);
  --color-text-disabled:  var(--slate-600);
  --color-text-inverse:   var(--navy-950);

  /* Accent — Primary (Blue) */
  --color-primary:        var(--blue-500);
  --color-primary-hover:  var(--blue-400);
  --color-primary-subtle: rgba(59,130,246,0.12);
  --color-primary-text:   var(--blue-300);
  --color-primary-border: rgba(59,130,246,0.35);

  /* Accent — Secondary (Teal) */
  --color-secondary:        var(--teal-500);
  --color-secondary-hover:  var(--teal-400);
  --color-secondary-subtle: rgba(20,184,166,0.12);
  --color-secondary-text:   var(--teal-300);

  /* Status */
  --color-success:        var(--green-500);
  --color-success-subtle: rgba(34,197,94,0.12);
  --color-success-text:   var(--green-400);
  --color-success-border: rgba(34,197,94,0.3);

  --color-warning:        var(--amber-500);
  --color-warning-subtle: rgba(245,158,11,0.12);
  --color-warning-text:   var(--amber-400);
  --color-warning-border: rgba(245,158,11,0.3);

  --color-error:          var(--red-500);
  --color-error-subtle:   rgba(239,68,68,0.12);
  --color-error-text:     var(--red-400);
  --color-error-border:   rgba(239,68,68,0.3);

  /* Borders */
  --color-border:        var(--slate-700);
  --color-border-strong: var(--slate-600);
  --color-border-subtle: rgba(255,255,255,0.07);

  /* Focus ring */
  --color-focus: rgba(59,130,246,0.5);

  /* Shadows */
  --shadow-sm:           0 1px 3px rgba(0,0,0,0.5);
  --shadow-md:           0 4px 12px rgba(0,0,0,0.6);
  --shadow-lg:           0 12px 32px rgba(0,0,0,0.7);
  --shadow-glow-primary: 0 0 24px rgba(59,130,246,0.2);
}

/* ── LIGHT MODE ── */
[data-theme="light"],
.light,
body.vinciminds-light {
  /* Backgrounds */
  --color-bg:           #f8fafc;
  --color-bg-surface:   #ffffff;
  --color-bg-card:      #ffffff;
  --color-bg-elevated:  #ffffff;
  --color-bg-overlay:   rgba(15,23,42,0.5);
  --color-bg-hover:     var(--slate-100);
  --color-bg-active:    var(--blue-200);
  --color-bg-muted:     var(--slate-50);

  /* Text */
  --color-text:           var(--slate-900);
  --color-text-secondary: var(--slate-800);
  --color-text-muted:     var(--slate-600);
  --color-text-disabled:  var(--slate-500);
  --color-text-inverse:   var(--white);

  /* Accent — Primary */
  --color-primary:        var(--blue-600);
  --color-primary-hover:  var(--blue-700);
  --color-primary-subtle: var(--blue-200);
  --color-primary-text:   var(--blue-600);
  --color-primary-border: var(--blue-300);

  /* Accent — Secondary */
  --color-secondary:        var(--teal-600);
  --color-secondary-hover:  var(--teal-600);
  --color-secondary-subtle: #ccfbf1;
  --color-secondary-text:   var(--teal-600);

  /* Status */
  --color-success:        var(--green-600);
  --color-success-subtle: #dcfce7;
  --color-success-text:   var(--green-600);
  --color-success-border: var(--green-500);

  --color-warning:        var(--amber-600);
  --color-warning-subtle: #fef3c7;
  --color-warning-text:   var(--amber-600);
  --color-warning-border: var(--amber-500);

  --color-error:          var(--red-600);
  --color-error-subtle:   #fee2e2;
  --color-error-text:     var(--red-600);
  --color-error-border:   var(--red-500);

  /* Borders */
  --color-border:        var(--slate-200);
  --color-border-strong: var(--slate-300);
  --color-border-subtle: var(--slate-100);

  --color-focus: rgba(37,99,235,0.4);

  --shadow-sm:           0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:           0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg:           0 12px 32px rgba(0,0,0,0.15);
  --shadow-glow-primary: 0 0 20px rgba(37,99,235,0.15);
}


/* ─────────────────────────────────────────
   KATMAN 3: Component Tokens
   (Her iki temada geçerli — semantic'e bağlı)
   ───────────────────────────────────────── */
:root {
  /* ── Sidebar ── */
  --sidebar-bg:               var(--color-bg-surface);
  --sidebar-item-hover:       var(--color-bg-hover);
  --sidebar-item-active:      var(--color-primary-subtle);
  --sidebar-item-text:        var(--color-text-secondary);
  --sidebar-item-active-text: var(--color-primary-text);
  --sidebar-border:           var(--color-border);
  --sidebar-width:            240px;
  --sidebar-width-collapsed:  64px;

  /* ── Navbar ── */
  --navbar-bg:     var(--color-bg-surface);
  --navbar-border: var(--color-border);
  --navbar-height: 60px;

  /* ── Cards ── */
  --card-bg:           var(--color-bg-card);
  --card-border:       var(--color-border);
  --card-border-hover: var(--color-border-strong);
  --card-radius:       12px;
  --card-padding:      20px;
  --card-shadow:       var(--shadow-sm);
  --card-shadow-hover: var(--shadow-md);

  /* ── Buttons ── */
  --btn-primary-bg:       var(--color-primary);
  --btn-primary-text:     var(--white);
  --btn-primary-hover:    var(--color-primary-hover);
  --btn-secondary-bg:     var(--color-bg-muted);
  --btn-secondary-text:   var(--color-text);
  --btn-secondary-border: var(--color-border);
  --btn-radius:           8px;
  --btn-padding-sm:       6px 12px;
  --btn-padding-md:       8px 16px;
  --btn-padding-lg:       12px 22px;

  /* ── Inputs ── */
  --input-bg:          var(--color-bg-elevated);
  --input-border:      var(--color-border);
  --input-focus:       var(--color-primary);
  --input-text:        var(--color-text);
  --input-placeholder: var(--color-text-muted);
  --input-radius:      8px;

  /* ── Badges ── */
  --badge-radius:  6px;
  --badge-padding: 3px 8px;

  /* ── Progress ── */
  --progress-bg:     var(--color-border);
  --progress-fill:   var(--color-primary);
  --progress-radius: 100px;

  /* ── Sınav — Soru Kartı ── */
  --question-card-bg:         var(--color-bg-card);
  --question-correct-bg:      var(--color-success-subtle);
  --question-correct-border:  var(--color-success-border);
  --question-wrong-bg:        var(--color-error-subtle);
  --question-wrong-border:    var(--color-error-border);
  --question-selected-bg:     var(--color-primary-subtle);
  --question-selected-border: var(--color-primary-border);

  /* ── Dil Dropdown (KORUNAN ALAN — sadece renk token) ── */
  --lang-dropdown-bg:     var(--color-bg-elevated);
  --lang-dropdown-border: var(--color-border);
  --lang-dropdown-shadow: var(--shadow-lg);
  --lang-flag-radius:     2px;

  /* ── Typography ── */
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Sora', 'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* Çok Dilli Font Fallback Zincirleri */
  --font-cyrillic: 'Noto Sans', 'Inter', system-ui, sans-serif;
  --font-arabic:   'Noto Sans Arabic', 'Geeza Pro', 'Arial Unicode MS', sans-serif;
  --font-greek:    'Noto Sans', 'Inter', 'DejaVu Sans', system-ui, sans-serif;
  --font-armenian: 'Noto Sans Armenian', 'Arial Unicode MS', system-ui, sans-serif;
  --font-georgian: 'Noto Sans Georgian', 'Arial Unicode MS', system-ui, sans-serif;
  --font-cjk:
    'PingFang SC', 'PingFang TC',
    'Hiragino Sans', 'Hiragino Kaku Gothic ProN',
    'Apple SD Gothic Neo',
    'Microsoft YaHei', 'Microsoft JhengHei',
    'Meiryo', 'Malgun Gothic',
    'Noto Sans CJK SC', 'Noto Sans CJK JP', 'Noto Sans CJK KR',
    'WenQuanYi Micro Hei',
    system-ui, sans-serif;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  36px;

  --leading-tight:  1.3;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* ── Spacing ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Transitions ── */
  --duration-fast:   120ms;
  --duration-normal: 200ms;
  --duration-slow:   350ms;
  --ease-default:    cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Border Radius ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-full: 9999px;
}

/* ─────────────────────────────────────────
   GERİYE DÖNÜK UYUMLULUK ALİASLARI
   Eski CSS dosyaları için isim haritalama
   ───────────────────────────────────────── */
:root,
[data-theme="dark"],
.dark {
  /* Eski isimler → yeni token'lara alias */
  --color-background:   var(--color-bg);
  --color-surface:      var(--color-bg-surface);
  --color-card:         var(--color-bg-card);
  --color-text-title:   var(--color-text);
  --color-header:       var(--color-bg-surface);
  --color-danger:       var(--color-error);
  --color-info:         var(--color-primary);

  /* Eski --vm-* tokenleri için alias */
  --vm-surface-top:    var(--color-bg-surface);
  --vm-surface-header: var(--color-bg-surface);
  --vm-surface-panel:  var(--color-bg-card);
  --vm-surface-panel-2: var(--color-bg-elevated);
  --vm-border:         var(--color-border-subtle);
  --vm-border-strong:  var(--color-border);
  --vm-text-primary:   var(--color-text);
  --vm-text-secondary: var(--color-text-secondary);
  --vm-text-muted:     var(--color-text-muted);
  --vm-text-title:     var(--color-text);
  --vm-accent:         var(--color-primary);
  --vm-accent-hover-bg: var(--color-primary-subtle);
  --vm-shadow-panel:   var(--shadow-md);

  /* Eski spacing tokenleri */
  --space-xs: var(--space-1);
  --space-sm: var(--space-2);
  --space-md: var(--space-4);
  --space-lg: var(--space-6);
  --space-xl: var(--space-8);
}

[data-theme="light"],
.light,
body.vinciminds-light {
  --color-background:   var(--color-bg);
  --color-surface:      var(--color-bg-surface);
  --color-card:         var(--color-bg-card);
  --color-text-title:   var(--color-text);
  --color-header:       var(--color-bg-surface);
  --color-danger:       var(--color-error);
  --color-info:         var(--color-primary);

  --vm-surface-top:    var(--color-bg-surface);
  --vm-surface-header: var(--color-bg-surface);
  --vm-surface-panel:  var(--color-bg-card);
  --vm-surface-panel-2: var(--color-bg-elevated);
  --vm-border:         var(--color-border-subtle);
  --vm-border-strong:  var(--color-border);
  --vm-text-primary:   var(--color-text);
  --vm-text-secondary: var(--color-text-secondary);
  --vm-text-muted:     var(--color-text-muted);
  --vm-text-title:     var(--color-text);
  --vm-accent:         var(--color-primary);
  --vm-accent-hover-bg: var(--color-primary-subtle);
  --vm-shadow-panel:   var(--shadow-md);

  --space-xs: var(--space-1);
  --space-sm: var(--space-2);
  --space-md: var(--space-4);
  --space-lg: var(--space-6);
  --space-xl: var(--space-8);
}