/* ================================================================= UNITAS PANEL — Design Tokens Sakin mavi + Open Sans · açık + koyu mod ---------------------------------------------------------------- Felsefe: sakin, doygun-olmayan, soğuk-nötr okunabilir yüzeyler. Veri yoğun tablolar net; aksiyon noktaları MAVİ ile vurgulanır. Saf siyah/parlak renk YOK, jenerik görünüm YOK. NOT: Değişken İSİMLERİ ve mekanizma (iki katmanlı yüzey + .dark flip) korunur; tüm template'ler ve charcoal-amber.css bunlara bağlı. Tek accent --amber'dir (artık MAVİ değer taşır). .dark sınıfı 'e eklenince koyu moda geçer. ================================================================= */ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap"); :root { color-scheme: light; /* ============ YÜZEY — iki katmanlı (AÇIK) ===================== --paper = chrome (sidebar/topbar/body) — soğuk nötr --card = içerik yüzeyi (kart/tablo/panel gövdesi) --card-2 = çok hafif vurgulu içerik --elevated = menü/dialog/dropdown (yükseltilmiş) */ --paper: #e9ebef; /* app chrome — soğuk nötr */ --paper-2: #e2e5ea; /* chrome vurgu (sticky thead, kart başlık) */ --card: #f6f7f9; /* içerik yüzeyi */ --card-2: #eef0f3; /* hafif vurgulu kart */ --elevated: #fcfcfd; /* yükseltilmiş yüzey (popup) */ --ink-50: #eef0f3; --ink-100: #e6e8ec; /* hover/secondary fill (açık) */ /* ============ METİN — soğuk slate (AÇIK) ===================== */ --ink: #333842; /* primary text */ --ink-700: #474d57; /* sekonder metin */ --ink-500: #727983; /* muted / ikincil meta */ --ink-400: #969ca6; /* hint, placeholder */ --ink-300: #b2b7c0; /* disabled */ --ink-200: #d6d9df; /* soft rule / scrollbar */ /* ============ KENARLIK — soğuk rule (AÇIK) ============== */ --rule: #d8dbe1; /* default border/divider */ --rule-strong: #c6cad1; --rule-soft: #e1e3e8; /* ============ ACCENT — MAVİ (tek aksesuar, AÇIK) ============= Sakin, doygun-olmayan mavi: aksiyon/link/seçili. */ --amber: #3a66cf; /* primary accent — sakin mavi */ --amber-hover: #2f57b5; --amber-strong: #264897; /* solid action darker / text-on-light */ --amber-soft: #e2e9f6; /* soft fill (chip, today/selected) */ --amber-soft-2: #d0dcf1; /* mid fill */ --amber-tint: rgba(58, 102, 207, 0.06); --amber-line: rgba(58, 102, 207, 0.24); /* ============ MODE-AWARE WASH / OVERLAY (AÇIK) ================ */ --hover-wash: rgba(50, 70, 110, 0.045); --hover-wash-soft: rgba(50, 70, 110, 0.028); --backdrop: rgba(24, 27, 33, 0.45); --on-accent: #ffffff; /* mavi zemin üstü metin */ /* ============ SEMANTIC (AÇIK) ================================ */ --success: #348056; --success-bg: #dde8e1; --warning: #a9701f; --warning-bg: #efe7d6; --danger: #b8413a; --danger-bg: #f1dcd9; --info: #3a66cf; --info-bg: #e2e9f6; /* ============ DURUM RENKLERİ (proje chip'leri, AÇIK) ========== ahmet/kurumda = nötr, beklemede = warning, iptal = soluk nötr, tamamlandi = success, acil = danger. Token'a bağlı (auto-flip). */ --durum-kurumda-bg: var(--ink-100); --durum-kurumda-fg: var(--ink-700); --durum-beklemede-bg: var(--warning-bg); --durum-beklemede-fg: var(--warning); --durum-tamamlandi-bg: var(--success-bg); --durum-tamamlandi-fg: var(--success); --durum-iptal-bg: var(--ink-50); --durum-iptal-fg: var(--ink-400); --durum-acil-bg: var(--danger-bg); --durum-acil-fg: var(--danger); --durum-ahmet-bg: var(--ink-100); --durum-ahmet-fg: var(--ink-700); /* ============ TYPOGRAPHY — Open Sans + IBM Plex Mono ========== */ --font-display: "Open Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-sans: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-mono: "IBM Plex Mono", "SF Mono", Menlo, monospace; /* Boyut ölçeği — okunabilirlik öncelikli (gövde 14px tabanı) */ --fs-3xs: 10px; --fs-2xs: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 18px; --fs-2xl: 22px; --fs-3xl: 28px; --fs-4xl: 36px; --fs-5xl: 48px; --fs-6xl: 64px; /* Satır yükseklikleri */ --lh-tight: 1.12; --lh-snug: 1.25; --lh-base: 1.5; --lh-loose: 1.7; /* Letter spacing */ --ls-display: -0.012em; --ls-tight: -0.008em; --ls-base: 0em; --ls-eyebrow: 0.14em; --ls-caps: 0.06em; /* ============ SPACING ========================================= */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; /* ============ RADIUS ========================================== */ --r-xs: 3px; --r-sm: 6px; --r-md: 8px; /* input, küçük buton */ --r-lg: 12px; /* kart, modal */ --r-xl: 16px; /* hero kartlar */ --r-pill: 999px; /* ============ SHADOW — soğuk tinted, çok hafif (sade) ========== Felsefe: derinlik ince kenarlıkla; gölge sadece yüzen katmanlarda. */ --shadow-xs: 0 1px 0 rgba(24, 27, 33, 0.04); --shadow-sm: 0 1px 2px rgba(24, 27, 33, 0.06); --shadow-md: 0 1px 2px rgba(24, 27, 33, 0.06), 0 2px 6px rgba(24, 27, 33, 0.05); --shadow-lg: 0 2px 8px rgba(24, 27, 33, 0.08), 0 6px 20px rgba(24, 27, 33, 0.06); --shadow-popup: var(--shadow-lg); --shadow-inset: none; /* ============ MOTION ========================================== */ --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 280ms; --ease-out: cubic-bezier(0.32, 0.72, 0.32, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.32, 0.64, 1); /* ============ Z-INDEX ========================================= */ --z-sticky: 100; --z-dropdown: 1000; --z-popover: 1500; --z-modal: 2000; --z-toast: 3000; --z-tooltip: 4000; } /* ================================================================= KOYU MOD — .dark sınıfı 'e eklenir (manuel toggle + persist) Sakin, hafif mavi alt-tonlu koyu. İçerik en koyu, chrome bir ton açık. Saf siyah YOK. Accent: yumuşak mavi (koyu zemine kontrast). ================================================================= */ .dark { color-scheme: dark; /* Yüzey — içerik chrome'dan biraz açık, popup en açık */ --paper: #181b21; /* app chrome */ --paper-2: #14171c; /* chrome vurgu */ --card: #1c2027; /* içerik yüzeyi */ --card-2: #21262f; /* hafif vurgulu kart */ --elevated: #272d37; /* yükseltilmiş yüzey (popup/menü) */ --ink-50: #1c2027; --ink-100: #282d36; /* hover/secondary fill (koyu) */ /* Metin — soğuk kırık beyaz */ --ink: #dfe3e9; /* primary text */ --ink-700: #c0c6cf; /* sekonder */ --ink-500: #8b929d; /* muted */ --ink-400: #6f7682; /* hint */ --ink-300: #565d68; /* disabled */ --ink-200: #2c313a; /* soft rule / scrollbar */ /* Kenarlık — soğuk koyu rule */ --rule: #2c313a; --rule-strong: #393f49; --rule-soft: #23272f; /* Accent — yumuşak mavi (koyu zemine uygun) */ --amber: #6fa0f5; --amber-hover: #88b2f7; --amber-strong: #a3c4f9; --amber-soft: #1d2c45; /* selected / today (koyu mavi dolgu) */ --amber-soft-2: #26395a; --amber-tint: rgba(111, 160, 245, 0.14); --amber-line: rgba(111, 160, 245, 0.40); /* Wash / overlay — koyuda soğuk açık wash */ --hover-wash: rgba(150, 180, 235, 0.05); --hover-wash-soft: rgba(150, 180, 235, 0.035); --backdrop: rgba(0, 0, 0, 0.6); --on-accent: #0e1219; /* mavi zemin üstü koyu metin */ /* Semantic — koyu mod */ --success: #67b08a; --success-bg: #1c3026; --warning: #d7a458; --warning-bg: #2d2716; --danger: #e08a7c; --danger-bg: #382320; --info: #6fa0f5; --info-bg: #1d2c45; /* Durum chip'leri — token'a bağlı (light ile aynı semantik, auto-flip) */ --durum-kurumda-bg: var(--ink-100); --durum-kurumda-fg: var(--ink-700); --durum-beklemede-bg: var(--warning-bg); --durum-beklemede-fg: var(--warning); --durum-tamamlandi-bg: var(--success-bg); --durum-tamamlandi-fg: var(--success); --durum-iptal-bg: var(--ink-50); --durum-iptal-fg: var(--ink-400); --durum-acil-bg: var(--danger-bg); --durum-acil-fg: var(--danger); --durum-ahmet-bg: var(--ink-100); --durum-ahmet-fg: var(--ink-700); /* Shadow — koyuda daha derin */ --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4); --shadow-lg: 0 2px 8px rgba(0, 0, 0, 0.55), 0 6px 20px rgba(0, 0, 0, 0.45); --shadow-inset: none; } /* ================================================================= BASE — body, root tipografi, seçim, scroll ================================================================= */ html, body { background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: var(--fs-md); line-height: var(--lh-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Tema/mod geçişi yumuşak (toggle + HTMX swap) — yalnızca yüzey/chrome katmanları; tüm elemanlara binmesin (performans). */ html, body, .app-shell, aside, header, main, .rounded-xl, .rounded-2xl, .rounded-lg { transition: background-color 150ms var(--ease-in-out), border-color 150ms var(--ease-in-out), color 150ms var(--ease-in-out); } /* TEMA GEÇİŞ KASILMASINI ÖNLE — flip anında TÜM transition'lar kapatılır, renkler anlık değişir, sonra geri açılır (unitasToggleTheme yönetir). */ html.theme-switching, html.theme-switching * { transition: none !important; } ::selection { background: var(--amber-soft-2); color: var(--ink); } /* ================================================================= TYPOGRAPHY — semantic class'lar (Open Sans) ================================================================= */ .display, h1, h2, h3, .h-display { font-family: var(--font-display); font-weight: 600; letter-spacing: var(--ls-display); color: var(--ink); } .h-hero { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-5xl); line-height: var(--lh-tight); letter-spacing: var(--ls-display); } .h-page { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-3xl); line-height: var(--lh-tight); letter-spacing: var(--ls-display); } .h-section { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-2xl); line-height: var(--lh-snug); letter-spacing: var(--ls-display); } .h-card { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-md); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--ink); } .eyebrow { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-3xs); line-height: 1; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ink-500); } .lede { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-xl); line-height: var(--lh-snug); letter-spacing: -0.008em; color: var(--ink-700); } .body, p { font-family: var(--font-sans); font-size: var(--fs-md); line-height: var(--lh-base); color: var(--ink-700); } .meta, .caption { font-family: var(--font-sans); font-size: var(--fs-xs); line-height: var(--lh-snug); color: var(--ink-500); } .num-tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } .num-display { font-family: var(--font-sans); font-feature-settings: "tnum", "lnum"; font-variant-numeric: tabular-nums lining-nums; font-weight: 600; letter-spacing: -0.006em; } code, .code { font-family: var(--font-mono); font-size: 0.9em; color: var(--ink-700); background: var(--ink-100); padding: 1px 6px; border-radius: var(--r-xs); } /* ================================================================= UTILITY — token kullanım sınıfları ================================================================= */ .u-paper { background: var(--paper); } .u-card { background: var(--card); } .u-card-2 { background: var(--card-2); } .u-ink { color: var(--ink); } .u-ink-muted { color: var(--ink-500); } .u-ink-soft { color: var(--ink-400); } .u-amber { color: var(--amber); } .u-rule { border-color: var(--rule); } /* ================================================================= FOCUS RING — accent (mavi) ================================================================= */ :focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: var(--r-sm); } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--amber) !important; box-shadow: 0 0 0 3px var(--amber-tint) !important; } /* ================================================================= SCROLLBAR ================================================================= */ * { scrollbar-width: thin; scrollbar-color: var(--ink-200) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--ink-200); background-clip: content-box; border: 2px solid transparent; border-radius: var(--r-pill); } *::-webkit-scrollbar-thumb:hover { background: var(--rule-strong); background-clip: content-box; border: 2px solid transparent; } /* ================================================================= GERİYE UYUMLULUK — eski token alias'ları ================================================================= */ :root, .dark { --surface-input: var(--card); --surface-elevated: var(--elevated); --surface-overlay: var(--elevated); --hover-medium: var(--ink-100); --text: var(--ink); --text-secondary: var(--ink-700); --text-muted: var(--ink-500); --text-on-accent: var(--on-accent); --border: var(--rule); --border-soft: var(--rule-soft); --accent: var(--amber); --accent-hover: var(--amber-hover); --accent-soft-bg: var(--amber-soft); --radius-sm: var(--r-sm); --radius-md: var(--r-md); --radius-lg: var(--r-lg); }