/* ============================================================================ Lalin Tasarım Sistemi — tokens.css Tek kaynak: .kiro/steering/design-system.md Ortak: guzellik / klinik (estetik) / veteriner ---------------------------------------------------------------------------- Bu dosya YALNIZCA CSS custom property (token) tanımlar; hiçbir elemanı doğrudan biçimlendirmez. Mevcut (legacy) stillerle çakışmamak için tüm token'lar `.lds` (Lalin Design System) kök kapsamı altında tanımlanır. Yeni / yeniden tasarlanmış sayfalar `class="lds"` ile opt-in yapar. Tema algılama (üç ürünün farklı dark mekanizmaları desteklenir): - [data-theme="dark"] (guzellik, ) - [data-bs-theme="dark"] (guzellik / veteriner, Bootstrap) - [data-theme-version="dark"] (veteriner, ) Ürün vurgusu ile gelir. ============================================================================ */ .lds{ /* ---- Ham nötr palet (sıcak nötr) ---- */ --warm-0:#FBFAF8; --warm-50:#F5F3EF; --warm-100:#ECE9E3; --warm-200:#DDD9D1; --warm-300:#C7C2B8; --warm-400:#A8A294; --warm-500:#857F70; --warm-600:#655F52; --warm-700:#48433A; --warm-800:#2E2A24; --warm-900:#1C1A16; --warm-950:#121009; /* ---- Durum hue'ları (ürünler arası sabit) ---- */ --green-600:#2F7D55; --green-500:#3E9B6B; --green-100:#E3F2EA; --amber-600:#B5731A; --amber-500:#D6912E; --amber-100:#FBEFD9; --red-600:#C0392B; --red-500:#E05546; --red-100:#FBE6E3; --blue-600:#2563A8; --blue-500:#3E83CF; --blue-100:#E4EEF8; /* ---- Semantik renk — LIGHT (varsayılan) ---- */ --bg:var(--warm-0); --surface:#FFFFFF; --surface-sunken:var(--warm-50); --surface-raised:#FFFFFF; --overlay:rgba(28,26,22,.45); --text:var(--warm-900); --text-secondary:var(--warm-600); --text-muted:var(--warm-500); --border:var(--warm-200); --border-strong:var(--warm-300); --ring:color-mix(in oklab, var(--accent) 55%, transparent); --success:var(--green-600); --success-bg:var(--green-100); --warning:var(--amber-600); --warning-bg:var(--amber-100); --danger:var(--red-600); --danger-bg:var(--red-100); --info:var(--blue-600); --info-bg:var(--blue-100); /* ---- Varsayılan vurgu (ürün ataması yoksa nötr-koyu) ---- */ --accent:var(--warm-800); --accent-hover:var(--warm-900); --accent-soft:var(--warm-100); --accent-contrast:#FFFFFF; --accent-dark:var(--warm-100); --accent-hover-dark:#FFFFFF; --accent-contrast-dark:#15110A; /* ---- Tipografi ---- */ --font-display:"Fraunces", Georgia, "Times New Roman", serif; --font-sans:"Hanken Grotesk", -apple-system, "Segoe UI", system-ui, sans-serif; --font-mono:"JetBrains Mono", ui-monospace, "SF Mono", monospace; --text-xs:.75rem; --text-sm:.875rem; --text-base:1rem; --text-md:1.125rem; --text-lg:1.333rem; --text-xl:1.602rem; --text-2xl:1.953rem; --text-3xl:clamp(2.25rem, 1.6rem + 2.8vw, 3.052rem); --text-4xl:clamp(2.75rem, 1.8rem + 4.2vw, 4rem); --leading-tight:1.15; --leading-snug:1.3; --leading-normal:1.6; --leading-loose:1.75; --tracking-tight:-0.02em; --tracking-normal:0; --tracking-wide:.04em; --weight-regular:400; --weight-medium:520; --weight-semibold:620; --weight-bold:720; /* ---- Spacing (4px tabanlı) ---- */ --space-0:0; --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem; --space-6:2rem; --space-8:3rem; --space-10:4rem; --space-12:6rem; --space-16:8rem; --gutter:clamp(1rem, .5rem + 2vw, 2rem); /* ---- Radius ---- */ --radius-xs:4px; --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-xl:20px; --radius-pill:999px; --radius-circle:50%; /* ---- Gölge (çok katmanlı, yumuşak) ---- */ --shadow-xs:0 1px 2px rgba(28,26,22,.06); --shadow-sm:0 1px 2px rgba(28,26,22,.06), 0 2px 6px rgba(28,26,22,.05); --shadow-md:0 2px 4px rgba(28,26,22,.06), 0 8px 20px rgba(28,26,22,.08); --shadow-lg:0 4px 8px rgba(28,26,22,.07), 0 16px 40px rgba(28,26,22,.12); --shadow-focus:0 0 0 3px var(--ring); /* ---- Z-index düzeni ---- */ --z-base:0; --z-sticky:100; --z-sidebar:200; --z-dropdown:300; --z-overlay:400; --z-modal:500; --z-toast:600; --z-tooltip:700; /* ---- Motion ---- */ --ease-standard:cubic-bezier(.2,0,0,1); --ease-emphasized:cubic-bezier(.2,0,0,1); --ease-out:cubic-bezier(0,0,.2,1); --dur-instant:80ms; --dur-fast:140ms; --dur-base:220ms; --dur-slow:360ms; /* ---- Grafik paleti ---- */ --chart-1:var(--accent); --chart-2:var(--blue-500); --chart-3:var(--green-500); --chart-4:var(--amber-500); --chart-5:#8E6FB0; --chart-6:var(--warm-400); --chart-grid:var(--border); --chart-axis:var(--text-muted); --chart-tooltip-bg:var(--surface-raised); color-scheme:light; } /* ============================================================================ DARK — tema attribute'ü .lds'in herhangi bir atası üzerindeyse devreye girer (üç ürünün farklı mekanizmaları), ayrıca .lds üzerine doğrudan da set edilebilir. ============================================================================ */ [data-theme="dark"] .lds, [data-bs-theme="dark"] .lds, [data-theme-version="dark"] .lds, .lds[data-theme="dark"]{ --bg:var(--warm-950); --surface:var(--warm-900); --surface-sunken:#16140F; --surface-raised:var(--warm-800); --overlay:rgba(0,0,0,.6); --text:var(--warm-50); --text-secondary:var(--warm-300); --text-muted:var(--warm-400); --border:color-mix(in oklab, var(--warm-50) 12%, transparent); --border-strong:color-mix(in oklab, var(--warm-50) 22%, transparent); --success:var(--green-500); --success-bg:color-mix(in oklab, var(--green-500) 22%, var(--bg)); --warning:var(--amber-500); --warning-bg:color-mix(in oklab, var(--amber-500) 22%, var(--bg)); --danger:var(--red-500); --danger-bg:color-mix(in oklab, var(--red-500) 22%, var(--bg)); --info:var(--blue-500); --info-bg:color-mix(in oklab, var(--blue-500) 22%, var(--bg)); /* Ürün vurgusunun dark adayı (her ürün bloğunda tanımlı) devreye alınır */ --accent:var(--accent-dark); --accent-hover:var(--accent-hover-dark); --accent-contrast:var(--accent-contrast-dark); --accent-soft:color-mix(in oklab, var(--accent-dark) 18%, var(--bg)); --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 2px 4px rgba(0,0,0,.4), 0 8px 20px rgba(0,0,0,.45); --shadow-lg:0 4px 10px rgba(0,0,0,.5), 0 16px 48px rgba(0,0,0,.55); color-scheme:dark; } /* ============================================================================ ÜRÜN VURGULARI — data-product atası .lds için yeterli (aynı eleman şartı yok) Her blok hem light hem dark-aday (`*-dark`) değerlerini tanımlar. ============================================================================ */ [data-product="guzellik"] .lds, .lds[data-product="guzellik"]{ --accent:#B23A5B; --accent-hover:#9A2F4D; --accent-soft:#FBE9EE; --accent-contrast:#FFFFFF; --accent-dark:#E98AA3; --accent-hover-dark:#F0A0B5; --accent-contrast-dark:#2A0E16; } [data-product="klinik"] .lds, .lds[data-product="klinik"]{ --accent:#0E7C86; --accent-hover:#0A636B; --accent-soft:#E0F4F5; --accent-contrast:#FFFFFF; --accent-dark:#4CC9D4; --accent-hover-dark:#6AD6DF; --accent-contrast-dark:#062226; } [data-product="veteriner"] .lds, .lds[data-product="veteriner"]{ --accent:#B5731A; --accent-hover:#995F12; --accent-soft:#FBEFD9; --accent-contrast:#15110A; --accent-dark:#E0A040; --accent-hover-dark:#E8B05A; --accent-contrast-dark:#1C1304; }