/* Arcus tasarım değişkenleri
 *
 * Kavram: taş ve kemer. Zemin kireçtaşı, metin kurşun, tek vurgu kilit taşı.
 * Yerleşim: solda sabit gezinme, sağda geniş ve yoğun veri alanı.
 *
 * Kurallar
 * - Kilit taşı (--ar-keystone) yalnızca marka işaretinde ve seçili konumu gösteren
 *   kamada kullanılır. Buton, bağlantı ya da durum rengi olarak kullanılmaz; kritik
 *   uyarı kırmızısıyla karışmaması için.
 * - Ana eylemler mürekkep renginde (--ar-ink).
 * - Durum renkleri her zaman şekil ve metinle birlikte kullanılır, asla tek başına.
 * - Ürün aksanı (--ar-product) ürüne göre değişir: <html data-product="guard"> gibi.
 * - Tüm renkler açık ve koyu temada tanımlıdır; bileşenler yalnızca bu değişkenleri kullanır.
 */

:root {
  /* Yüzeyler */
  --ar-ground: #e6eae9;
  --ar-surface: #f7f9f8;
  --ar-surface-sunk: #dce2e1;
  --ar-surface-hover: #eef2f1;

  /* Metin ve çizgiler */
  --ar-ink: #1f2629;
  --ar-ink-muted: #556064;
  --ar-ink-faint: #7a8588;
  --ar-on-ink: #f7f9f8;
  --ar-line: #c9d1d0;
  --ar-line-strong: #a3adad;

  /* Marka */
  --ar-keystone: #b5532e;
  --ar-on-keystone: #ffffff;

  /* Ürün aksanı: Custofaber IT için nötr kurşun mavisi */
  --ar-product: #45575e;
  --ar-product-tint: #dbe3e4;

  /* Durumlar: renk + şekil + metin */
  --ar-critical: #a3204c;
  --ar-critical-tint: #f5e0e7;
  --ar-warning: #855600;
  --ar-warning-tint: #f6ead0;
  --ar-good: #2a6b47;
  --ar-good-tint: #dbede2;
  --ar-info: #355f80;
  --ar-info-tint: #dde8f1;

  --ar-focus: #355f80;
  --ar-overlay-shadow: 0 12px 32px rgb(20 28 31 / 0.18), 0 2px 6px rgb(20 28 31 / 0.10);

  /* Yazı */
  --ar-font: "Manrope", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --ar-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Ölçek: yoğun arayüz için 14 piksel taban, 1,2 oranı */
  --ar-text-xs: 0.75rem;   /* 12 */
  --ar-text-sm: 0.8125rem; /* 13 */
  --ar-text-base: 0.875rem;/* 14 */
  --ar-text-md: 1rem;      /* 16 */
  --ar-text-lg: 1.1875rem; /* 19 */
  --ar-text-xl: 1.4375rem; /* 23 */
  --ar-text-2xl: 1.75rem;  /* 28 */

  /* Boşluk: 4'ün katları */
  --ar-space-1: 0.25rem;
  --ar-space-2: 0.5rem;
  --ar-space-3: 0.75rem;
  --ar-space-4: 1rem;
  --ar-space-5: 1.5rem;
  --ar-space-6: 2rem;
  --ar-space-7: 3rem;

  /* Köşeler göreve göre: küçük öğeler keskin, paneller yumuşak */
  --ar-radius-sm: 3px;
  --ar-radius: 6px;
  --ar-radius-lg: 10px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ar-ground: #111517;
    --ar-surface: #191e21;
    --ar-surface-sunk: #0c0f11;
    --ar-surface-hover: #20262a;
    --ar-ink: #e2e7e7;
    --ar-ink-muted: #a0aaad;
    --ar-ink-faint: #737e81;
    --ar-on-ink: #111517;
    --ar-line: #2b3337;
    --ar-line-strong: #3f4a4e;
    --ar-keystone: #d27a55;
    --ar-on-keystone: #111517;
    --ar-product: #a3b4ba;
    --ar-product-tint: #233035;
    --ar-critical: #f07f9f;
    --ar-critical-tint: #3a1823;
    --ar-warning: #e2ab4f;
    --ar-warning-tint: #33270f;
    --ar-good: #6cc394;
    --ar-good-tint: #14291d;
    --ar-info: #84aed0;
    --ar-info-tint: #172736;
    --ar-focus: #84aed0;
    --ar-overlay-shadow: 0 12px 32px rgb(0 0 0 / 0.5), 0 2px 6px rgb(0 0 0 / 0.4);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --ar-ground: #111517;
  --ar-surface: #191e21;
  --ar-surface-sunk: #0c0f11;
  --ar-surface-hover: #20262a;
  --ar-ink: #e2e7e7;
  --ar-ink-muted: #a0aaad;
  --ar-ink-faint: #737e81;
  --ar-on-ink: #111517;
  --ar-line: #2b3337;
  --ar-line-strong: #3f4a4e;
  --ar-keystone: #d27a55;
  --ar-on-keystone: #111517;
  --ar-product: #a3b4ba;
  --ar-product-tint: #233035;
  --ar-critical: #f07f9f;
  --ar-critical-tint: #3a1823;
  --ar-warning: #e2ab4f;
  --ar-warning-tint: #33270f;
  --ar-good: #6cc394;
  --ar-good-tint: #14291d;
  --ar-info: #84aed0;
  --ar-info-tint: #172736;
  --ar-focus: #84aed0;
  --ar-overlay-shadow: 0 12px 32px rgb(0 0 0 / 0.5), 0 2px 6px rgb(0 0 0 / 0.4);
  color-scheme: dark;
}

/* Ürün aksanları */
:root[data-product="guard"] { --ar-product: #355f80; --ar-product-tint: #dde8f1; }
:root[data-product="civitas"] { --ar-product: #3c6b4f; --ar-product-tint: #dcebe1; }
:root[data-product="table"] { --ar-product: #7a5a2e; --ar-product-tint: #f0e5d4; }

@media (prefers-color-scheme: dark) {
  :root[data-product="guard"]:not([data-theme="light"]) { --ar-product: #84aed0; --ar-product-tint: #172736; }
  :root[data-product="civitas"]:not([data-theme="light"]) { --ar-product: #7fc29a; --ar-product-tint: #15281c; }
  :root[data-product="table"]:not([data-theme="light"]) { --ar-product: #d8b27c; --ar-product-tint: #2e2414; }
}
:root[data-theme="dark"][data-product="guard"] { --ar-product: #84aed0; --ar-product-tint: #172736; }
:root[data-theme="dark"][data-product="civitas"] { --ar-product: #7fc29a; --ar-product-tint: #15281c; }
:root[data-theme="dark"][data-product="table"] { --ar-product: #d8b27c; --ar-product-tint: #2e2414; }