:root {
    /* Yuzey / metin */
    --color-page-bg: oklch(97% 0.005 255);
    --color-surface: #ffffff;
    --color-surface-alt: oklch(96% 0.005 255);
    --color-border: oklch(90% 0.008 255);
    --color-border-light: oklch(93% 0.006 255);
    --color-text: oklch(23% 0.01 255);
    --color-text-muted: oklch(52% 0.012 255);
    --color-text-table: oklch(45% 0.01 255);

    /* Modul renkleri: tile (kutucuk) + buton varyanti */
    --hue-blue: 255;   /* genel / destek kaydi formu */
    --hue-indigo: 285; /* destek kayitlari */
    --hue-pink: 340;   /* musteriler */
    --hue-amber: 55;   /* anlasma & ticket */
    --hue-teal: 190;   /* hizmet turleri */
    --hue-purple: 305; /* personel */
    --hue-rose: 20;    /* e-posta ayarlari */

    --color-blue-tile: oklch(62% 0.145 var(--hue-blue));
    --color-blue-btn: oklch(58% 0.14 var(--hue-blue));
    --color-blue-info-bg: oklch(94% 0.03 var(--hue-blue));
    --color-blue-info-text: oklch(40% 0.1 var(--hue-blue));

    --color-indigo-tile: oklch(62% 0.145 var(--hue-indigo));
    --color-indigo-btn: oklch(58% 0.14 var(--hue-indigo));

    --color-pink-tile: oklch(62% 0.145 var(--hue-pink));
    --color-pink-btn: oklch(58% 0.14 var(--hue-pink));
    --color-pink-bg: oklch(94% 0.03 var(--hue-pink));
    --color-pink-border: oklch(85% 0.06 var(--hue-pink));

    --color-amber-tile: oklch(62% 0.145 var(--hue-amber));
    --color-amber-btn: oklch(58% 0.14 var(--hue-amber));
    --color-amber-bg: oklch(95% 0.04 var(--hue-amber));
    --color-amber-border: oklch(85% 0.08 var(--hue-amber));

    --color-teal-tile: oklch(62% 0.145 var(--hue-teal));
    --color-teal-btn: oklch(58% 0.14 var(--hue-teal));

    --color-purple-tile: oklch(62% 0.145 var(--hue-purple));
    --color-purple-btn: oklch(58% 0.14 var(--hue-purple));

    --color-rose-tile: oklch(62% 0.145 var(--hue-rose));
    --color-rose-btn: oklch(58% 0.14 var(--hue-rose));

    --color-neutral-tile: oklch(55% 0.01 255);

    /* Semantik */
    --color-success: oklch(55% 0.14 145);
    --color-success-bg: oklch(94% 0.05 145);
    --color-danger: oklch(55% 0.18 25);
    --color-danger-bg: oklch(94% 0.05 25);
    --color-warning: oklch(58% 0.13 70);
    --color-warning-bg: oklch(94% 0.06 70);
    --color-gold: oklch(48% 0.12 80);
    --color-gold-bg: oklch(94% 0.05 80);

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;

    /* Radius / golge */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 14px;
    --radius-tile: 16px;
    --shadow-tile: 0 6px 14px -6px;

    /* Tipografi */
    --font-family: "IBM Plex Sans", sans-serif;
    --font-family-mono: "IBM Plex Mono", monospace;

    /* Kabuk: sol navigasyon (sidebar) + pencere karti + sekme cubugu */
    --sidebar-width: 224px;
    --color-sidebar-bg: oklch(24% 0.03 255);
    --color-sidebar-bg-active: oklch(30% 0.035 255);
    --color-sidebar-border: oklch(38% 0.03 255);
    --color-sidebar-text: rgba(255, 255, 255, 0.72);
    --color-sidebar-text-active: #ffffff;

    --color-window-bg: oklch(94% 0.006 255);
    --color-window-border: oklch(88% 0.008 255);
    --color-titlebar-bg: oklch(97% 0.004 255);

    --color-tab-bg: oklch(93% 0.006 255);
    --color-tab-active-bg: #ffffff;
    --color-tab-active-text: oklch(30% 0.1 255);

    --color-traffic-red: oklch(75% 0.14 25);
    --color-traffic-yellow: oklch(80% 0.13 90);
    --color-traffic-green: oklch(75% 0.13 145);
}