/**
 * Slipvise tasarım değişkenleri
 *
 * Kaynak: Figma "Slipvise Website UI" içindeki web paneli çizimleri.
 *   - "Dashboard" (anasayfa): zemin, kart, yazı, limon ve boşluk değerleri
 *   - "Slipvise - Dashboard": siyah kutulu menü; düğme ve sekme değerleri
 *   - "Kullanıcılar" tablosu: tablo başlığı, satır zemini, etiket ve avatar tonları
 * Bileşenlerde sabit renk kodu kullanılmaz; bütün renkler buradaki değişkenlerden gelir.
 *
 * Palet:
 * - Sayfa zemini çok açık gridir (#FBFBFB). Kartlar beyaz, kenarlıksız, hafif gölgeli ve 20px köşelidir.
 * - Metin üç tondadır: başlık ve değer (--sv-text), gövde (--sv-text-body), etiket (--sv-text-muted).
 * - Marka limonu yalnızca küçük alanlarda dolu kullanılır: ikon kutusu, nokta, rozet, seçili sekme.
 *   Geniş limon dolgu beyaz zeminde göz yorar; düğme ve kart zemini limon yapılmaz.
 * - Birincil eylem ve menüde seçili sayfa mürekkep siyahıdır (#171A1F).
 * - Durum renkleri (yeşil, kırmızı, turuncu, mavi) canlıdır: rozet ve uyarılarda açık ton zemin +
 *   canlı metin, küçük ikon kutularında dolu renk.
 *
 * Koyu tema: body.dark-mode (sınıfı ThemeManager yönetir). Figma'da koyu çizim yoktur; değerler
 * mobil uygulamanın koyu yüzeylerinden türetilmiştir. Yeni bir değişken eklerken koyu karşılığı da yazılır.
 * Başka bir değişkene var() ile bağlanan değişkenler koyu temada yeniden yazılmalıdır; yoksa
 * açık temadaki değeri miras alırlar.
 */

:root {
    /* Marka */
    --sv-lime: #CEFF00;             /* ikon kutusu, nokta, rozet */
    --sv-lime-2: #D8FE51;           /* seçili sekme, tablo etiketi */
    --sv-lime-strong: #B9E600;      /* beyaz zeminde ince çizgi (alt çizgi, grafik çizgisi) */
    --sv-lime-soft: #F0FFB3;        /* açık ton dolgu (filtre etiketi, seçili öğe) */
    --sv-lime-softer: #F8FFDB;      /* satır üstüne gelme, bilgi kutusu zemini */
    --sv-lime-border: #DDFF4D;
    --sv-lime-ink: #171A1F;         /* limon tonlu dolgu üstünde metin */

    /* Nötrler */
    --sv-ink: #171A1F;              /* temaya göre döner: açıkta koyu, koyuda açık */
    --sv-on-ink: #FFFFFF;
    --sv-contrast: #171A1F;         /* her temada koyu kalan zemin */
    --sv-on-contrast: #FFFFFF;
    --sv-bg: #FBFBFB;
    --sv-surface: #FFFFFF;
    --sv-surface-2: #F4F4F4;        /* üstüne gelme, pasif alan, rol etiketi */
    --sv-surface-3: #E9EAEC;
    --sv-border: #E5E7EB;           /* ince ayırıcı çizgi */
    --sv-border-strong: #D1D5DC;    /* form alanı ve çerçeveli düğme kenarı */
    --sv-text: #171A1F;             /* başlık, değer */
    --sv-text-body: #364153;        /* gövde metni */
    --sv-text-muted: #4A5565;       /* etiket, ikincil metin */
    --sv-text-subtle: #6A7282;      /* yer tutucu, pasif metin */

    /* Durum renkleri: metin / açık ton zemin / kenarlık / dolu */
    --sv-success: #008236;
    --sv-success-soft: #DCFCE7;
    --sv-success-border: #B9F8CF;
    --sv-success-solid: #00A63E;

    --sv-danger: #D6003F;
    --sv-danger-soft: #FFE8ED;
    --sv-danger-border: #FFC2CF;
    --sv-danger-solid: #FF3273;
    --sv-danger-fill: #D6003F;        /* dolu kırmızı düğme (beyaz yazı) */
    --sv-danger-fill-hover: #B30035;

    --sv-warning: #BB4D00;
    --sv-warning-soft: #FEF3C6;
    --sv-warning-border: #FEE685;
    --sv-warning-solid: #FE9A00;

    --sv-info: #155DFC;
    --sv-info-soft: #E5EFFF;
    --sv-info-border: #BEDBFF;
    --sv-info-solid: #2B7FFF;

    --sv-neutral: #364153;
    --sv-neutral-soft: #F4F4F4;
    --sv-neutral-border: #E5E7EB;

    /* Bileşen düzeyi */
    --sv-primary-bg: var(--sv-ink);
    --sv-primary-fg: var(--sv-on-ink);
    --sv-primary-hover: #000000;
    --sv-nav-active-bg: var(--sv-ink);
    --sv-nav-active-fg: #FFFFFF;
    --sv-nav-active-icon: #FFFFFF;
    --sv-chip-bg: var(--sv-lime);       /* ikon kutusu, avatar, sayaç: limon zemin + siyah ikon */
    --sv-chip-fg: #0A0A0A;
    --sv-card-border: transparent;      /* kart kenarı: açık temada gölge, koyu temada çizgi */
    --sv-card-shadow: 1px 1px 4px rgba(0, 0, 0, 0.10);
    --sv-card-shadow-hover: 1px 8px 20px rgba(0, 0, 0, 0.10);   /* tıklanabilir kartın üstüne gelince */
    --sv-link: var(--sv-text);
    --sv-link-hover: #000000;
    --sv-link-line: var(--sv-lime-strong);
    --sv-focus: var(--sv-ink);          /* odak rengi: açıkta siyah, koyuda limon */
    --sv-focus-ring: 0 0 0 2px var(--sv-surface), 0 0 0 4px var(--sv-focus);
    --sv-table-head: #FAFAFB;           /* tablo başlık satırı */
    --sv-row-stripe: #FAFAFB;           /* tabloda çift satırların zemini */
    --sv-row-hover: var(--sv-lime-softer);
    --sv-tint-1: #CED0F8;               /* avatar zeminleri (fotoğraf yokken baş harflerin arkası) */
    --sv-tint-2: #F8CEDB;
    --sv-tint-3: #BAF3EB;
    --sv-tint-4: #D8CBF5;
    --sv-brand-whatsapp: #25D366;       /* marka logoları: renkleri markanındır (Config\Icons::$logos) */
    --sv-brand-whatsapp-soft: #D9FDD3;  /* WhatsApp mesaj balonu tonu (anlatım sahnesi) */
    --sv-brand-android: #34A853;
    --sv-on-brand: #FFFFFF;             /* marka renginde dolu kutu üstündeki logo */
    --sv-on-solid: #FFFFFF;             /* düz renkli (yeşil, turuncu, kırmızı) kutu üstündeki ikon */
    --sv-chart-primary: #171A1F;       /* grafiklerin ana serisi (çubuk); koyu temada orta gri */
    --sv-overlay: rgba(23, 26, 31, 0.45);
    --sv-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234A5565' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --sv-check-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    --sv-search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236A7282' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");

    /* Yazı */
    --sv-font: "Nunito", ui-rounded, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --sv-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

    /* Köşe, gölge, ölçü */
    --sv-radius-xs: 4px;            /* rozet */
    --sv-radius-sm: 6px;            /* düğme, form alanı, menü öğesi */
    --sv-radius: 10px;              /* ikon kutusu, satır, açılır menü */
    --sv-radius-lg: 20px;           /* kart, pencere */
    --sv-radius-pill: 999px;
    --sv-shadow-sm: 0 0 1px rgba(23, 26, 31, 0.07), 0 0 2px rgba(23, 26, 31, 0.12);
    --sv-shadow: 0 8px 24px rgba(23, 26, 31, 0.10), 0 0 1px rgba(23, 26, 31, 0.16);
    --sv-shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --sv-sidebar-width: 220px;
    --sv-sidebar-rail: 72px;
    --sv-topbar-height: 57px;
    --sv-gutter: 32px;              /* içerik kenar boşluğu */
    --sv-gap: 24px;                 /* kartlar arası boşluk */

    /* Hareket: kısa ve abartısız. Kullanımı components.css içindeki "Hareket" bölümündedir. */
    --sv-dur-fast: 150ms;           /* üstüne gelme, renk geçişi */
    --sv-dur: 250ms;                /* açılma, yer değiştirme */
    --sv-dur-slow: 450ms;           /* sayfa girişi */
    --sv-ease: cubic-bezier(0.2, 0, 0, 1);
    --sv-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --sv-stagger: 60ms;             /* sırayla beliren öğeler arasındaki gecikme */
}

/* Dar ekran: çizimin mobil hâlindeki boşluklar */
@media (max-width: 991.98px) {
    :root {
        --sv-topbar-height: 53px;
        --sv-gutter: 16px;
        --sv-gap: 16px;
    }
}

/* Koyu tema: mobil uygulamanın koyu yüzeylerinden türetildi */
.dark-mode {
    color-scheme: dark;

    --sv-lime-2: rgba(206, 255, 0, 0.16);
    --sv-lime-strong: #CEFF00;
    --sv-lime-soft: rgba(206, 255, 0, 0.16);
    --sv-lime-softer: rgba(206, 255, 0, 0.08);
    --sv-lime-border: rgba(206, 255, 0, 0.36);
    --sv-lime-ink: #DFFF57;

    --sv-ink: #FAFAFA;
    --sv-on-ink: #171717;
    --sv-bg: #1A1A1A;
    --sv-surface: #242424;
    --sv-surface-2: #2E2E2E;
    --sv-surface-3: #383838;
    --sv-border: #363636;
    --sv-border-strong: #4F4F4F;
    --sv-text: #FAFAFA;
    --sv-text-body: #D4D4D4;
    --sv-text-muted: #B8B8B8;
    --sv-text-subtle: #8F8F8F;

    --sv-success: #5EE08F;
    --sv-success-soft: rgba(0, 201, 80, 0.16);
    --sv-success-border: rgba(0, 201, 80, 0.36);
    --sv-success-solid: #00B848;

    --sv-danger: #FF7DA2;
    --sv-danger-soft: rgba(255, 50, 115, 0.18);
    --sv-danger-border: rgba(255, 50, 115, 0.40);
    --sv-danger-solid: #FF4D86;
    --sv-danger-fill: #D0164F;
    --sv-danger-fill-hover: #B8113F;

    --sv-warning: #FFBE4D;
    --sv-warning-soft: rgba(254, 154, 0, 0.16);
    --sv-warning-border: rgba(254, 154, 0, 0.38);
    --sv-warning-solid: #FE9A00;

    --sv-info: #8FBCFF;
    --sv-info-soft: rgba(43, 127, 255, 0.18);
    --sv-info-border: rgba(43, 127, 255, 0.40);
    --sv-info-solid: #5C9BFF;

    --sv-neutral: #D4D4D4;
    --sv-neutral-soft: #303030;
    --sv-neutral-border: #474747;

    --sv-primary-bg: var(--sv-lime);
    --sv-primary-fg: #171717;
    --sv-primary-hover: #DFFF57;
    --sv-nav-active-bg: var(--sv-surface-3);
    --sv-nav-active-fg: #FFFFFF;
    --sv-nav-active-icon: var(--sv-lime);
    --sv-chip-bg: rgba(206, 255, 0, 0.16);
    --sv-chip-fg: var(--sv-lime);
    --sv-card-border: var(--sv-border);
    --sv-card-shadow: none;
    --sv-card-shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.45);
    --sv-link: var(--sv-text);
    --sv-link-hover: #FFFFFF;
    --sv-link-line: var(--sv-lime);
    --sv-focus: var(--sv-lime);
    --sv-focus-ring: 0 0 0 2px var(--sv-surface), 0 0 0 4px var(--sv-focus);
    --sv-table-head: #2B2B2B;
    --sv-row-stripe: rgba(255, 255, 255, 0.03);
    --sv-row-hover: rgba(206, 255, 0, 0.06);
    --sv-tint-1: rgba(99, 106, 232, 0.30);
    --sv-tint-2: rgba(232, 97, 140, 0.28);
    --sv-tint-3: rgba(34, 204, 178, 0.24);
    --sv-tint-4: rgba(127, 85, 224, 0.32);
    --sv-brand-whatsapp: #25D366;
    --sv-brand-whatsapp-soft: rgba(37, 211, 102, 0.18);
    --sv-brand-android: #34A853;
    --sv-on-brand: #FFFFFF;
    --sv-on-solid: #FFFFFF;
    --sv-chart-primary: #9E9E9E;
    --sv-overlay: rgba(0, 0, 0, 0.6);
    --sv-select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23B8B8B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --sv-check-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171717' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    --sv-search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238F8F8F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");

    --sv-shadow-sm: none;
    --sv-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    --sv-shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
}