/*
  TR: Tasarım belirteçlerinin TEK kaynağı. Hem ziyaretçi ekranı hem yönetim paneli bu dosyayı
      kullanır; renk, yarıçap ve geçiş değerleri başka hiçbir yerde tanımlanmaz.

      Konvansiyon: `:root` AÇIK temanın temelidir, `[data-theme="dark"]` onu geçersiz kılar.
      Daha önce iki uygulama zıt konvansiyon kullanıyordu (ziyaretçide `:root` açık, yönetimde
      koyu); bu, bir bileşeni bir uygulamadan diğerine taşımayı imkânsız kılıyordu.

      Tema her iki uygulamada da JavaScript ile `data-theme` özniteliği yazılarak seçilir
      (bkz. shared/theme.js). Öznitelik henüz yazılmadan da makul bir görünüm olması için
      `prefers-color-scheme` yedeği tanımlanmıştır.

  EN: The SINGLE source of design tokens. Both the visitor screen and the admin panel use this
      file; colour, radius and transition values are defined nowhere else.

      Convention: `:root` is the LIGHT baseline and `[data-theme="dark"]` overrides it. The two
      applications previously used opposite conventions (light baseline in the visitor screen,
      dark in the admin panel), which made moving a component between them impossible.

      The theme is selected in both applications by writing the `data-theme` attribute from
      JavaScript (see shared/theme.js). A `prefers-color-scheme` fallback is defined so the page
      still looks sensible before that attribute is written.
*/

:root {
  --font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* TR: Açık tema — varsayılan temel. / EN: Light theme — the default baseline. */
  --bg-primary: #f8fafc;
  --bg-secondary: #ffffff;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --border-color: #e2e8f0;

  /*
    TR: Vurgu rengi kurum markasına göre çalışma anında değiştirilir. Gradient de birlikte
        güncellenir; yalnızca biri güncellenirse arayüzün bir kısmı markalı, bir kısmı
        varsayılan renkte kalır.
    EN: The accent colour is replaced at runtime from the tenant's branding. The gradient is
        updated with it; updating only one leaves part of the interface branded and part of it
        on the default colour.
  */
  --accent-primary: #6366f1;
  --accent-secondary: #4f46e5;
  --accent-gradient: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);

  --success-color: #10b981;
  --success-bg: #ecfdf5;
  --error-color: #ef4444;
  --error-bg: #fef2f2;
  --warning-color: #f59e0b;
  --warning-bg: #fffbeb;

  --card-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05);

  --border-radius-sm: 6px;
  --border-radius-md: 10px;
  --border-radius-lg: 16px;

  /*
    TR: Ziyaretçi ekranının eski tek yarıçap değişkeni. Mevcut stil kurallarını bozmamak için
        korunur ve ölçekteki büyük değere bağlanır.
    EN: The visitor screen's former single radius variable. Kept so the existing rules keep
        working, and bound to the large step of the scale.
  */
  --border-radius: var(--border-radius-lg);

  --transition-speed: 0.25s;
  --transition-curve: cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
  --bg-primary: #0b0f19;
  --bg-secondary: #161e2e;
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --border-color: #273142;

  /*
    TR: Koyu zeminde durum renkleri açılır. Yönetim paneli önceden açık tema değerlerini
        koyu temada da kullanıyordu; bu, koyu arka planda kontrastı düşürüyordu.
    EN: Status colours are lightened on a dark background. The admin panel previously reused its
        light theme values in dark mode, which weakened the contrast against the dark surface.
  */
  --success-color: #34d399;
  --success-bg: rgba(52, 211, 153, 0.1);
  --error-color: #f87171;
  --error-bg: rgba(248, 113, 113, 0.1);
  --warning-color: #fbbf24;
  --warning-bg: rgba(251, 191, 36, 0.1);

  --card-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
}

/*
  TR: `data-theme` henüz yazılmamışken sistem tercihini izle. Öznitelik yazıldığı anda
      yukarıdaki kurallar devreye girer ve bu blok etkisiz kalır.
  EN: Follow the system preference while `data-theme` has not been written yet. As soon as the
      attribute is set the rules above take over and this block stops applying.
*/
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg-primary: #0b0f19;
    --bg-secondary: #161e2e;
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --border-color: #273142;

    --success-color: #34d399;
    --success-bg: rgba(52, 211, 153, 0.1);
    --error-color: #f87171;
    --error-bg: rgba(248, 113, 113, 0.1);
    --warning-color: #fbbf24;
    --warning-bg: rgba(251, 191, 36, 0.1);

    --card-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
  }
}

/*
  TR: TEMAYA GÖRE LOGO (v1.3.1; shared/themed-logo.js). Koyu logo yalnız koyu temada ve yalnız yüklendiyse görünür; o zaman
      açık logo gizlenir. Kurallar yalnız GİZLER — resimler kendi `display` değerini korur. Tema özniteliği yokken (betik
      çalışmadan önce) sistem tercihi izlenir.
  EN: LOGO BY THEME (v1.3.1; shared/themed-logo.js). The dark logo shows only in dark theme and only when uploaded; the light
      one then hides. The rules only HIDE — images keep their own `display`. Without the attribute the system preference rules.
*/
.themed-logo { display: inline-flex; align-items: center; }
.themed-logo:not(.has-dark-logo) .themed-logo-dark,
:root[data-theme="light"] .themed-logo-dark { display: none !important; }
:root[data-theme="dark"] .themed-logo.has-dark-logo .themed-logo-light { display: none !important; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .themed-logo.has-dark-logo .themed-logo-light { display: none !important; }
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .themed-logo-dark { display: none !important; }
}