/* ============================================================================
 * Quickly POS Mobil — TEMA TOKEN KATMANI
 * ----------------------------------------------------------------------------
 * Bu dosya temanın TAŞINABİLİR kaynak noktasıdır. Ekran stilleri (style.css)
 * ve ileride apps/pos (Svelte) bileşenleri renk/ölçü kararlarını buradan
 * tüketir; hiçbir yerde hex literal yazılmaz.
 *
 * MİMARİ: Bu proje "tema + override" düzenindedir (legacy Angular projesiyle
 * aynı). Tema = css/bootstrap-superhero.css (Bootswatch Superhero, derlenmiş,
 * dokunulmaz). Override = css/style.css. Bu dosya override katmanının
 * değişken katmanıdır ve temanın ÜSTÜNE yüklenir.
 *
 * DEĞERLER NEREDEN GELİYOR
 *   - Bootswatch Superhero → docs/4/superhero/_variables.scss (thomaspark/
 *     bootswatch deposu, v5 dalındaki docs/4 klasörü; yayınlanan dağıtım
 *     derlenmiş CSS'tir, kaynak SCSS repo içindedir)
 *   - Quickly sözlüğü → legacy projenin src/styles.scss override dosyası
 *     (quickly-desktop). Aşağıdaki oil/gray/dark/light-gray değerleri ve
 *     karşılık gelen .bg-* / .color-* yardımcı sınıfları birebir oradan.
 *   - "Modern" grubu → SettingsScreen'de tarif edilen yumuşak gölge / köşe
 *     yuvarlatma kararı (POS'un ayarlar ekranında zaten uygulanıyor)
 *
 * KURAL: Yeni renk eklerken önce buraya bak. Burada yoksa ya eksiktir ya da
 * gereksizdir. Kurala uymayan sabit hex, tema taşınabilirliğini bozar.
 * ========================================================================== */

:root {
  /* --------------------------------------------------------------------------
   * 1. GRİ PALET — Bootswatch Superhero kaynak değerleri
   * ----------------------------------------------------------------------- */
  --q-gray-100: #ebebeb;
  --q-gray-200: #4e5d6c;
  --q-gray-300: #dee2e6;
  --q-gray-400: #ced4da;
  --q-gray-500: #adb5bd;
  --q-gray-600: #868e96;
  /* Bootstrap 3 döneminden kalan soluk gri. Bootstrap 4'te gray-600 değil —
     #868e96'dır. Karıştırılmamalı: prototipte input-group-text ve arama
     ikonu bu değeri kullanıyor. */
  --q-gray-muted: #6c757d;
  --q-gray-700: #495057;
  --q-gray-800: #343a40;
  --q-gray-900: #212529;
  --q-white: #fff;
  --q-black: #000;

  /* --------------------------------------------------------------------------
   * 2. MARKA + ANLAM RENKLERİ
   * Not: Bootswatch Superhero'da $primary kasıtlı olarak $blue (#df691a) ile
   * aynı değerdir — Quickly marka turuncusu. Yanlışlıkla düzeltilmemeli.
   * ----------------------------------------------------------------------- */
  --q-primary: #df691a;
  --q-secondary: #4e5d6c;
  --q-success: #5cb85c;
  --q-info: #5bc0de;
  --q-warning: #f0ad4e;
  --q-danger: #d9534f;
  --q-light: #8d9dad;
  --q-dark: #4e5d6c;

  --q-indigo: #6610f2;
  --q-purple: #6f42c1;
  --q-pink: #e83e8c;
  --q-orange: #f0ad4e;
  --q-yellow: #f0ad4e;
  --q-green: #5cb85c;
  --q-teal: #20c997;
  --q-cyan: #5bc0de;
  --q-red: #d9534f;

  /* Hover tonları — derlenmiş CSS'ten birebir */
  --q-primary-hover: #b15315;
  --q-secondary-hover: #39444e;
  --q-success-hover: #449d44;
  --q-info-hover: #31b0d5;
  --q-warning-hover: #ec971f;
  --q-danger-hover: #c9302c;
  --q-light-hover: #6f8397;

  /* Tablo hover koyu varyantı */
  --q-success-hover-strong: #4cae4c;
  --q-info-hover-strong: #46b8da;
  --q-primary-hover-strong: #c85e17;
  --q-secondary-hover-strong: #43505d;
  --q-light-hover-strong: #7e90a2;

  /* --------------------------------------------------------------------------
   * 3. GÖVDE / YÜZEY
   * ----------------------------------------------------------------------- */
  --q-body-bg: var(--q-oil);           /* Superhero $body-bg */
  --q-body-color: var(--q-gray-100);   /* Superhero $gray-100 */
  --q-text-muted: var(--q-white-a40);

  --q-surface: var(--q-gray-200);      /* kart / modal / dropdown zemni */
  --q-surface-alt: #43505e;            /* ikincil yüzey, tablo hover */
  --q-surface-deep: #23313f;           /* koyu panel (bottom sheet, kroki zemini) */
  --q-surface-deepest: var(--q-bg-dark); /* en koyu düzlem (kroki arka planı) */
  --q-surface-header: var(--q-white-a75); /* navbar/modal başlık */

  --q-overlay: var(--q-black-a55);
  --q-overlay-soft: var(--q-black-a40);
  --q-overlay-faint: var(--q-black-a35);
  --q-overlay-card: var(--q-black-a25);
  /* --q-scrim-glass: alfa katmanında tanımlı (bölüm 9) */

  --q-border-subtle: var(--q-white-a8);
  --q-border-faint: var(--q-white-a10);
  --q-border-strong: var(--q-black-a20);
  --q-border-table: rgba(0, 0, 0, 0.15);
  --q-border-focus: rgba(223, 105, 26, 0.25);

  /* Para/hesap durum renkleri — satış ve rapor ekranlarında kullanılır */
  --q-state-success: #5cb85c;
  --q-state-danger: #d9534f;
  --q-state-warning: #f0ad4e;
  --q-state-info: #5bc0de;
  --q-state-neutral: #6c757d;

  /* --------------------------------------------------------------------------
   * 4. GÖRSEL ÖLÇÜ
   * ----------------------------------------------------------------------- */
  --q-radius: 0;                 /* Superhero: köşe yuvarlatma YOK */
  --q-radius-sm: 0;
  --q-radius-lg: 0;
  --q-radius-pill: 50rem;        /* rozetler/peek bar */

  --q-space-1: 0.25rem;
  --q-space-2: 0.5rem;
  --q-space-3: 0.75rem;
  --q-space-4: 1rem;
  --q-space-5: 1.5rem;
  --q-space-6: 2rem;
  --q-space-7: 3rem;

  --q-font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol";
  --q-font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;

  --q-font-size-sm: 0.875rem;
  --q-font-size-base: 1rem;
  --q-font-size-lg: 1.25rem;
  --q-font-size-xl: 1.5rem;
  --q-line-height: 1.5;

  --q-transition-fast: 0.15s linear;
  --q-transition-base: 0.2s ease;
  --q-transition-slow: 0.35s ease;
  --q-z-duration: 200ms;

  /* --------------------------------------------------------------------------
   * 5. GÖLGE — Superhero düz tema; "modern" katman ayrı tanımlı
   * ----------------------------------------------------------------------- */
  --q-shadow-none: none;
  --q-shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.35);
  --q-shadow-card: 0 6px 20px rgba(0, 0, 0, 0.25);

  /* Modern (yumuşak) katman — SettingsScreen'de uygulanan karar */
  --q-radius-modern: 10px;
  --q-radius-modern-lg: 12px;

  /* --------------------------------------------------------------------------
   * 6. KATMANLAR (z-index)
   * ----------------------------------------------------------------------- */
  --q-z-base: 1;
  --q-z-sticky: 5;
  --q-z-navbar: 15;
  --q-z-dropdown: 1000;
  --q-z-fixed: 1030;
  --q-z-modal: 1050;
  --q-z-toast: 1100;
  --q-z-keyboard: 1200;

  /* --------------------------------------------------------------------------
   * 7. MOBİL — güvenli alan ve dokunma hedefleri
   * Not: env() yalnız destekleyen tarayıcıda çözülür; desteklemeyen
   * tarayıcıda değer geçersiz kural olur ve ilgili padding atlanır.
   * ----------------------------------------------------------------------- */
  --q-safe-top: env(safe-area-inset-top, 0px);
  --q-safe-bottom: env(safe-area-inset-bottom, 0px);
  --q-safe-left: env(safe-area-inset-left, 0px);
  --q-safe-right: env(safe-area-inset-right, 0px);

  --q-touch-min: 44px;   /* erişilebilir minimum dokunma hedefi */
  --q-touch-comfort: 48px;

  /* --------------------------------------------------------------------------
   * 8. LEGACY QUICKLY SÖZLÜĞÜ
   * Kaynak: quickly-desktop/src/styles.scss — bu projenin override dosyası.
   * Legacy'de bu değerler .bg-* / .color-* yardımcı sınıfları olarak yaşıyordu
   * (.bg-oil, .bg-gray, .bg-dark, .bg-light-gray, .color-* …). Burada değişken
   * hâline getirildi: aynı adlandırma, tek kaynak, utility sınıfları bunları
   * tüketir. Adı olmayan bir renk legacy'de de yoktur.
   * ----------------------------------------------------------------------- */
  --q-oil: #2b3e50;           /* gövde zemini / "bg-oil"        */
  --q-bg-dark: #1b2731;       /* en koyu panel / "bg-dark"       */
  --q-gray: #5b6977;          /* orta ton / "bg-gray"            */
  --q-light-gray: #ebebeb;    /* açık zemin / "bg-light-gray"    */
  --q-dark-gray: #4e5d6c;     /* kart yüzeyi / "bg-dark-gray"    */
  --q-text-quickly: #312783;  /* legacy .text-quickly marka moru */
  --q-rule: #87919b;          /* kesikli ayraç (check-flow)      */
  --q-input-fill: #e6e6e6;    /* form-control dolgusu            */
  --q-scrollbar: #888;
  --q-scrollbar-hover: #555;
  --q-quickly-font-path: "../assets/fonts/Quickly.ttf";

  /* --------------------------------------------------------------------------
   * 9. ALFA / TİNT KATMANI
   * Yarı saydam yüzeyler. Ham rgba() yazmak yerine buradan okunur; böylece
   * opaklık değişikliği tek yerden yapılır.
   * ------------------------------------------------------------------------ */
  --q-white-a3: rgba(255, 255, 255, 0.03);
  --q-white-a5: rgba(255, 255, 255, 0.05);
  --q-white-a8: rgba(255, 255, 255, 0.08);
  --q-white-a9: rgba(255, 255, 255, 0.09);
  --q-white-a10: rgba(255, 255, 255, 0.1);
  --q-white-a12: rgba(255, 255, 255, 0.12);
  --q-white-a15: rgba(255, 255, 255, 0.15);
  --q-white-a25: rgba(255, 255, 255, 0.25);
  --q-white-a35: rgba(255, 255, 255, 0.35);
  --q-white-a40: rgba(255, 255, 255, 0.4);
  --q-white-a42: rgba(255, 255, 255, 0.42);
  --q-white-a45: rgba(255, 255, 255, 0.45);
  --q-white-a75: rgba(255, 255, 255, 0.075);

  --q-black-a12: rgba(0, 0, 0, 0.12);
  --q-black-a20: rgba(0, 0, 0, 0.2);
  --q-black-a25: rgba(0, 0, 0, 0.25);
  --q-black-a30: rgba(0, 0, 0, 0.3);
  --q-black-a35: rgba(0, 0, 0, 0.35);
  --q-black-a40: rgba(0, 0, 0, 0.4);
  --q-black-a50: rgba(0, 0, 0, 0.5);
  --q-black-a55: rgba(0, 0, 0, 0.55);

  /* Primary tini (odak halkası, seçili satır) */
  --q-primary-a18: rgba(223, 105, 26, 0.18);
  --q-primary-a35: rgba(223, 105, 26, 0.35);
  --q-primary-a45: rgba(223, 105, 26, 0.45);

  /* Success tini (ödeme satırı seçimi) */
  --q-success-a8: rgba(92, 184, 92, 0.08);
  --q-success-a18: rgba(92, 184, 92, 0.18);
  --q-success-a35: rgba(92, 184, 92, 0.35);

  --q-danger-a18: rgba(217, 83, 79, 0.18);
  --q-danger-a25: rgba(217, 83, 79, 0.25);
  --q-info-a40: rgba(23, 162, 184, 0.4);

  /* Peek bar / sheet zeminleri */
  --q-peek-bg: rgba(15, 23, 30, 0.65);
  --q-bg-dark-60: rgba(27, 39, 49, 0.6);
  --q-bg-dark-75: rgba(27, 39, 49, 0.75);
  --q-ink-80: rgba(33, 47, 61, 0.8);
  --q-ink-85: rgba(33, 47, 61, 0.85);
  --q-surface-deep-95: rgba(35, 49, 63, 0.95);

  /* Gölge renkleri (legacy: box-shadow 1px 1px 4px …) */
  --q-shadow-ink: rgb(22, 31, 40);
  --q-scrim-glass: rgba(60, 58, 58, 0.48);
  --q-scrim-glass-60: rgba(60, 58, 58, 0.6);
  --q-ink: #111111;

  /* --------------------------------------------------------------------------
   * 10. KIRILIMLAR
   * CSS değişkenleri medya sorgusunda kullanılamaz; @media bunları sayısal
   * tekrarlar. Kaynak: Bootstrap 4 kırılımları (prototip bunları kullanıyor).
   * ----------------------------------------------------------------------- */
  /* xs  : 0     — telefon dikey            (bu dosyada token yok) */
  /* sm  : 576px — büyük telefon            */
  /* md  : 768px — tablet dikey             */
  /* lg  : 992px — tablet yatay / dizüstü    */
  /* xl  : 1200px— geniş masaüstü           */
}