:root,
html[data-theme="light"] {
    --font-family-base: 'Haskoy', Arial, Helvetica, sans-serif;
    --font-size-base: 0.9375rem;
    --line-height-base: 1.5;

    /* Arayüzün ağırlığı nötr gri ölçektedir. Griler maviye kaçmaz: renk
       yalnızca durum ve vurgu taşısın diye zemin, kenar ve metin tarafsız
       tutulur. */
    --color-background: #f7f7f8;
    --color-surface: #ffffff;
    --color-surface-muted: #f4f4f5;
    --color-text: #18181b;
    --color-text-muted: #71717a;
    /* Tablo başlığı, üst etiket gibi okunması gerekmeyen taşıyıcı metin. */
    --color-text-subtle: #a1a1aa;
    --color-border: #e7e7ea;
    /* Girdi ve düğme kenarı: kart kenarından bir ton koyu, tıklanabilir olanı
       ayırır. */
    --color-border-strong: #d7d7dc;

    --color-primary: #2563eb;
    --color-primary-hover: #1d4ed8;
    --color-on-primary: #ffffff;
    --color-primary-soft: #eff6ff;
    --color-link: #1d4ed8;

    --color-success: #15803d;
    --color-success-soft: #ecfdf3;
    --color-warning: #b45309;
    --color-warning-soft: #fffbeb;
    --color-danger: #b91c1c;
    --color-danger-soft: #fef2f2;
    --color-info: #0369a1;
    --color-info-soft: #f0f9ff;
    --color-neutral-soft: #f4f4f5;

    /* Sayaç karosunun dolu daire renkleri. Yukarıdaki durum renkleri **metin**
       için seçildi: beyaz zeminde 4.5:1 tutsunlar diye koyudurlar ve dolu daire
       olarak sönük kalırlar. Bunlar aynı tonların canlı karşılığıdır; simge
       beyaz çizildiği için ölçü metin değil metin dışı öğe eşiğidir (WCAG
       1.4.11, en az 3:1). Daire dolu renk taşıdığından iki temada da aynıdır.
       Kullanan: `.stat-tile` (assets/css/components.css). */
    --stat-tone-primary: #3b82f6;
    --stat-tone-success: #16a34a;
    --stat-tone-warning: #d97706;
    --stat-tone-danger: #ef4444;
    --stat-tone-info: #0891b2;
    /* Durum adı olmayan iki ton. Bir şeridin bütün karoları farklı renk ister;
       altı durum tonu kalabalık şeritlere yetmiyor. Mor "fark/sapma", camgöbeği
       yeşili ise "tutar" gibi durum değil ölçü bildiren karolarda kullanılır. */
    --stat-tone-violet: #8b5cf6;
    --stat-tone-teal: #0d9488;

    --color-focus: #2563eb;
    --color-overlay: rgb(24 24 27 / 45%);

    --radius-sm: 0.25rem;
    --radius-md: 5px;
    --radius-lg: 0.75rem;
    /* Kartların yarıçapı: yüzeyi zeminden ayıran tek güçlü işaret budur. */
    --radius-xl: 0.875rem;
    --radius-pill: 999px;
    /* Yüzeyi kenarlık taşır, gölge değil; gölge yalnızca yüzen katmanlarda
       belirginleşir. */
    --shadow-sm: 0 1px 2px rgb(24 24 27 / 4%);
    --shadow-floating: 0 12px 28px rgb(24 24 27 / 12%);

    /* Yerel <select> okunu macOS kendi çizer ve zemin rengini yok sayar;
       kendi okumuzu koyabilmek için appearance kapatılır. */
    --select-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2371717a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");

    /* Logonun altındaki taban. Logo koyu renkli olduğu için karanlık temada
       okunur kalması gerekir; aydınlık temada yüzeyle aynı renk olduğundan
       görünmez, iki temada da tek kural yeter. */
    --brand-plate: #ffffff;

    /* Modül kimlik renkleri. Her modül tek bir renkten okunur: başlatıcıdaki
       karo, açık modülün üst çubuktaki işareti ve modül içi vurgular. Renkler
       birbirinden ayırt edilebilsin diye ton çemberine yayıldı.
       Katalog: app/layout/modules.php */
    --module-intranet: #2563eb;
    --module-assistant: #0d9488;
    --module-boss: #1e3a8a;
    --module-mobile: #475569;
    --module-leads: #7c3aed;
    --module-customers: #0891b2;
    --module-documents: #9333ea;
    --module-inventory: #b45309;
    --module-sales: #15803d;
    --module-einvoice: #a21caf;
    --module-procurement: #c2410c;
    --module-production: #4338ca;
    --module-projects: #1d4ed8;
    --module-iot: #155e75;
    --module-quality: #6d28d9;
    --module-legobom: #7e22ce;
    --module-subcontracting: #3f6212;
    --module-finance: #047857;
    --module-accounting: #0f766e;
    --module-budget: #0e7490;
    --module-declarations: #115e59;
    --module-expenses: #a16207;
    --module-humanResources: #be185d;
    --module-assets: #9d174d;
    --module-fleet: #075985;
    --module-tasks: #ca8a04;
    --module-meetings: #0284c7;
    --module-service: #ea580c;
    --module-bpm: #3f3f46;
    --module-it: #7c2d12;
    --module-whatsapp: #128c7e;
    --module-reports: #a16207;
    --module-reportTracking: #b91c1c;
    --module-settings: #52525b;

    --grid-background: #ffffff;
    --grid-header-background: #fafafa;
    --grid-header-text: #71717a;
    --grid-border: #e7e7ea;
    --grid-row-border: #f0f0f2;
    --grid-row-hover: #fafafa;
    --grid-row-selected: #eff6ff;
    --grid-row-selected-hover: #e4eeff;
    --grid-control-background: #ffffff;
    --grid-control-hover: #f4f4f5;
    --grid-control-active: var(--color-primary);
    --grid-sort: #a1a1aa;
    --grid-resize: #d4d4d8;
    --grid-placeholder: #a1a1aa;

    /* Aktivite akışı renkleri. Geçmiş, temsilcinin en uzun baktığı ekrandır;
       ikon rengi olayın ne olduğunu okumadan söyler. Doygunluk bilinçli olarak
       düşüktür — zemin yumuşak, yalnızca ikon renklidir. */
    --activity-created: #0891b2;
    --activity-converted: #7c3aed;
    --activity-lifecycle: #4338ca;
    --activity-status: #a16207;
    --activity-responsible: #be185d;
    --activity-note: #2563eb;
    --activity-call: #15803d;
    --activity-sms: #0d9488;
    --activity-email: #c2410c;
    --activity-appointment: #9333ea;
    --activity-visit: #b45309;
    --activity-payment: #047857;
    --activity-document: #52525b;
    --activity-contact: #db2777;
    --activity-address: #0369a1;
}