/* Tasarım token'ları — SGK Koli Rezervasyon ve Takip Uygulaması. Palet: SGK'nın gerçek kurumsal kimliğine dayanıyor — resmi Kurumsal Kimlik sayfası (sgk.gov.tr) logoyu "beyaz zemin üzerine mavi ve lacivert" olarak tanımlıyor ve Pantone 288 C (koyu lacivert) + Pantone Process Blue referanslarını veriyor. Buradaki mavi, o iki tondan türetildi; zemin de kurumun kendi tanımına uyacak şekilde temiz beyaz/gri, sıcak kağıt tonu değil. Buradaki değerleri değiştirmek hiçbir iş mantığını etkilemez, sunum backend'den tamamen ayrı. */ :root { /* Marka / vurgu — SGK lacivert/mavisi (Pantone 288C + Process Blue) */ --color-primary-50: #eef3fb; --color-primary-100: #d7e3f5; --color-primary-500: #0a3d91; --color-primary-600: #072c68; --color-primary-700: #051f4a; --color-primary: var(--color-primary-500); --color-primary-hover: var(--color-primary-600); --color-primary-contrast: #ffffff; --color-accent: #0085ca; /* Pantone Process Blue — canlı vurgu, sınırlı kullanım */ /* Nötr skala — temiz beyaz + soğuk gri (SGK'nın "beyaz zemin" kimliğine uygun) */ --color-bg: #eef1f5; --color-surface: #ffffff; --color-surface-alt: #f4f6f9; --color-border: #dde3ea; --color-border-strong: #c2cbd6; --color-text: #16212e; --color-text-muted: #4d5a6b; --color-text-subtle: #8590a0; /* Semantik renkler */ --color-success: #157a45; --color-success-bg: #e6f5ec; --color-warning: #a5620a; --color-warning-bg: #fbf0dd; --color-danger: #b3261e; --color-danger-bg: #fbeaea; /* Tipografi — IBM Plex ailesi (yerel, css/fonts/ altında vendored) */ --font-sans: "Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.1875rem; --font-size-xl: 1.5rem; --font-size-2xl: 1.875rem; --line-height-tight: 1.25; --line-height-base: 1.55; /* Spacing */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; /* Köşe / gölge */ --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-md: 0 6px 16px rgba(10, 40, 90, 0.10); --shadow-lg: 0 20px 45px rgba(10, 40, 90, 0.22); --focus-ring: 0 0 0 3px var(--color-primary-100); } /* Kaynak: kullanıcı isteği (2026-08-26) — koyu/açık tema anahtarı, kurum tarafındaki AYNI desen (kolitakip-kurum/assets/css/tokens.css). Sistem tercihi (aşağıdaki media query) hâlâ varsayılan; kullanıcı inc/header.php'deki anahtarla EXPLICIT bir seçim yaparsa 'e data-theme="dark"/"light" yazılıyor (bkz. inc/header.php'nin en başındaki bloklayıcı script) ve bu iki blok onu geçersiz kılıyor. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --color-primary-50: #13233d; --color-primary-100: #17325a; --color-primary-500: #6b9ee0; --color-primary-600: #8fb6e8; --color-primary-700: #bcd4f2; --color-primary: var(--color-primary-500); --color-primary-hover: var(--color-primary-600); --color-primary-contrast: #071224; --color-accent: #4fb3e0; --color-bg: #0f141b; --color-surface: #171e27; --color-surface-alt: #1c2430; --color-border: #2a333f; --color-border-strong: #3a4552; --color-text: #e7ecf2; --color-text-muted: #a2adba; --color-text-subtle: #78828f; --color-success: #4fbd82; --color-success-bg: #10281c; --color-warning: #e0a542; --color-warning-bg: #2c2110; --color-danger: #ef6a63; --color-danger-bg: #2c1414; --focus-ring: 0 0 0 3px var(--color-primary-100); } } :root[data-theme="dark"] { --color-primary-50: #13233d; --color-primary-100: #17325a; --color-primary-500: #6b9ee0; --color-primary-600: #8fb6e8; --color-primary-700: #bcd4f2; --color-primary: var(--color-primary-500); --color-primary-hover: var(--color-primary-600); --color-primary-contrast: #071224; --color-accent: #4fb3e0; --color-bg: #0f141b; --color-surface: #171e27; --color-surface-alt: #1c2430; --color-border: #2a333f; --color-border-strong: #3a4552; --color-text: #e7ecf2; --color-text-muted: #a2adba; --color-text-subtle: #78828f; --color-success: #4fbd82; --color-success-bg: #10281c; --color-warning: #e0a542; --color-warning-bg: #2c2110; --color-danger: #ef6a63; --color-danger-bg: #2c1414; --focus-ring: 0 0 0 3px var(--color-primary-100); }