/* ============================================================ THLAB.studio — Design Tokens v1.0 Sprint 01 — Foundation ------------------------------------------------------------ Bu dosya, sitenin "tek kaynaklı gerçek"i olarak tasarlandı. Her renk, boşluk, yazı büyüklüğü, kenar yumuşaması burada tanımlanır. Bileşenler yalnızca bu token'ları kullanır. MIMARI PRENSIPLER: 1. Primitif katman → ham değerler (--teal-500) 2. Semantik katman → amaca bağlı (--brand, --surface-raised) 3. Bileşen katmanı → kullanım bazlı (--btn-primary-bg) Bileşenler her zaman semantik katmana bakar, asla primitife değil. Bu ilke sayesinde light-mode veya re-brand dakikalar içinde yapılır. ============================================================ */ @layer tokens { :root { color-scheme: dark; /* ======================================================== 1. PRİMİTİF — RENK PALETİ (oklch tabanlı) ======================================================== Tüm renkler oklch'de tanımlı: perceptual uniform, print-accurate, gelecek-uyumlu. Fallback hex'ler comment olarak verildi. Neden oklch? Aynı "L" değerine sahip iki renk insan gözüne aynı parlaklıkta görünür. RGB'de bu garanti edilmez. */ /* Nötr — Slate (hafif soğuk, teal ile rezonant) */ --slate-50: oklch(0.985 0.002 240); /* #f8fafc yakını */ --slate-100: oklch(0.960 0.004 240); --slate-200: oklch(0.910 0.006 240); --slate-300: oklch(0.820 0.010 240); --slate-400: oklch(0.680 0.014 240); --slate-500: oklch(0.540 0.018 240); --slate-600: oklch(0.420 0.020 240); --slate-700: oklch(0.320 0.020 240); --slate-800: oklch(0.220 0.018 240); --slate-900: oklch(0.160 0.015 240); --slate-950: oklch(0.110 0.012 240); /* #080b14 yakını */ --slate-1000: oklch(0.070 0.010 240); /* derin arka plan */ /* Marka — Teal (THLAB ana rengi) */ --teal-50: oklch(0.970 0.025 185); --teal-100: oklch(0.940 0.045 185); --teal-200: oklch(0.885 0.075 185); --teal-300: oklch(0.810 0.105 185); --teal-400: oklch(0.740 0.125 185); --teal-500: oklch(0.680 0.130 185); /* #14B8A6 — CORE brand */ --teal-600: oklch(0.580 0.115 185); --teal-700: oklch(0.470 0.095 185); --teal-800: oklch(0.360 0.070 185); --teal-900: oklch(0.250 0.050 185); /* Ürün hattı — AppSec (mavi) */ --appsec-500: oklch(0.620 0.140 235); /* #1B88C4 */ --appsec-400: oklch(0.720 0.130 235); --appsec-600: oklch(0.520 0.130 235); /* Ürün hattı — DataSec (mor) */ --datasec-500: oklch(0.720 0.120 295); /* #B59ADE */ --datasec-400: oklch(0.810 0.100 295); --datasec-600: oklch(0.620 0.130 295); /* Ürün hattı — NetSec (yeşil) */ --netsec-500: oklch(0.760 0.180 155); /* #00e87b */ --netsec-400: oklch(0.840 0.160 155); --netsec-600: oklch(0.640 0.170 155); /* Ürün hattı — OWASP (amber) */ --owasp-500: oklch(0.800 0.160 75); /* #ffb224 */ --owasp-400: oklch(0.870 0.140 75); --owasp-600: oklch(0.700 0.160 75); /* Ürün hattı — Live (kırmızı) */ --live-500: oklch(0.680 0.210 25); /* #ff3b4e */ --live-400: oklch(0.760 0.190 25); --live-600: oklch(0.580 0.200 25); /* Ürün hattı — OSINT (cyan) */ --osint-500: oklch(0.780 0.130 220); /* #00d4ff */ --osint-400: oklch(0.860 0.110 220); --osint-600: oklch(0.680 0.135 220); /* Semantik sinyaller */ --signal-danger: oklch(0.680 0.210 25); /* #ff3b4e */ --signal-warn: oklch(0.800 0.160 75); /* #ffb224 */ --signal-success: oklch(0.760 0.180 155); /* #00e87b */ --signal-info: oklch(0.780 0.130 220); /* #00d4ff */ /* ======================================================== 2. SEMANTİK KATMAN — bileşenler buna bakar ======================================================== */ /* Yüzeyler */ --surface-base: var(--slate-1000); /* body arka plan */ --surface-raised: color-mix(in oklab, var(--slate-900) 92%, transparent); --surface-overlay: color-mix(in oklab, var(--slate-950) 85%, transparent); --surface-glass: color-mix(in oklab, var(--slate-900) 55%, transparent); --surface-hover: color-mix(in oklab, var(--slate-50) 4%, transparent); --surface-active: color-mix(in oklab, var(--slate-50) 7%, transparent); /* Kenarlar */ --border-subtle: color-mix(in oklab, var(--slate-50) 6%, transparent); --border-default: color-mix(in oklab, var(--slate-50) 10%, transparent); --border-strong: color-mix(in oklab, var(--slate-50) 18%, transparent); --border-brand: color-mix(in oklab, var(--teal-500) 35%, transparent); /* Metin — WCAG AA hedefli kontrast seviyeleri */ --text-primary: color-mix(in oklab, var(--slate-50) 92%, transparent); /* ~16:1 */ --text-secondary: color-mix(in oklab, var(--slate-50) 68%, transparent); /* ~7:1 */ --text-tertiary: color-mix(in oklab, var(--slate-50) 54%, transparent); /* ~4.5:1 AA */ --text-quaternary: color-mix(in oklab, var(--slate-50) 40%, transparent); /* yalnız dekoratif */ --text-brand: var(--teal-400); --text-on-brand: var(--slate-1000); --text-danger: var(--signal-danger); --text-warn: var(--signal-warn); --text-success: var(--signal-success); /* Marka */ --brand: var(--teal-500); --brand-hover: var(--teal-400); --brand-muted: color-mix(in oklab, var(--teal-500) 14%, transparent); --brand-glow: color-mix(in oklab, var(--teal-500) 30%, transparent); /* Ürün renkleri */ --product-appsec: var(--appsec-500); --product-datasec: var(--datasec-500); /* Focus ring — erişilebilirlik için net 3px */ --focus-ring: 0 0 0 3px color-mix(in oklab, var(--teal-400) 55%, transparent); --focus-ring-offset: var(--surface-base); /* ======================================================== 3. TİPOGRAFİ — Modüler Scale (1.200 minor third) ======================================================== Referans: 16px base. Küçük arayıklı scale — technical/editorial sitelerde okunabilirlik için tercih edilir. 1.333 (perfect fourth) agresif gelir; 1.125 (major second) çok sıkışık olur. */ --font-sans: 'Geist', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-display: 'Space Grotesk', 'Geist', sans-serif; --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; /* Büyüklükler — clamp() ile viewport-responsive */ --fs-2xs: 0.6875rem; /* 11px */ --fs-xs: 0.75rem; /* 12px */ --fs-sm: 0.875rem; /* 14px */ --fs-md: 1rem; /* 16px */ --fs-lg: 1.125rem; /* 18px */ --fs-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); /* 20 → 24 */ --fs-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem); /* 24 → 32 */ --fs-3xl: clamp(2rem, 1.6rem + 2vw, 3rem); /* 32 → 48 */ --fs-4xl: clamp(2.75rem, 2rem + 3.75vw, 4.5rem); /* 44 → 72 */ --fs-5xl: clamp(3.5rem, 2.5rem + 5vw, 6rem); /* 56 → 96 */ /* Ağırlıklar */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Line-height — okunabilirlik için ayrı scale */ --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.65; /* Letter-spacing */ --tracking-tightest: -0.04em; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.08em; --tracking-widest: 0.15em; /* ======================================================== 4. ALAN — Spacing Scale (4px taban, exponential) ======================================================== 4 → 8 → 12 → 16 → 24 → 32 → 48 → 64 → 96 → 128 Tutarlı ritim, spacing debt'i önler. */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ --space-9: 6rem; /* 96px */ --space-10: 8rem; /* 128px */ /* Fluid bölüm padding'leri */ --section-y: clamp(3rem, 6vw, 6rem); --section-x: clamp(1rem, 3vw, 3rem); /* ======================================================== 5. KENAR YUMUŞAMASI — Radius Scale ======================================================== */ --radius-none: 0; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 14px; --radius-2xl: 20px; --radius-pill: 999px; --radius-circle: 50%; /* ======================================================== 6. ELEVASYON — Shadow Scale ======================================================== Dark mode için shadow değil, "glow + depth" kombinasyonu daha doğal durur. Her seviye iki-katmanlı. */ --elevation-1: 0 1px 2px rgb(0 0 0 / 0.25), 0 1px 1px rgb(0 0 0 / 0.15); --elevation-2: 0 4px 8px rgb(0 0 0 / 0.30), 0 2px 3px rgb(0 0 0 / 0.18); --elevation-3: 0 12px 24px rgb(0 0 0 / 0.35), 0 4px 8px rgb(0 0 0 / 0.22); --elevation-4: 0 24px 48px rgb(0 0 0 / 0.40), 0 8px 16px rgb(0 0 0 / 0.25); --glow-brand-sm: 0 0 12px color-mix(in oklab, var(--teal-500) 25%, transparent); --glow-brand-md: 0 0 24px color-mix(in oklab, var(--teal-500) 30%, transparent); --glow-brand-lg: 0 0 48px color-mix(in oklab, var(--teal-500) 25%, transparent); --glow-danger: 0 0 18px color-mix(in oklab, var(--signal-danger) 40%, transparent); --glow-warn: 0 0 18px color-mix(in oklab, var(--signal-warn) 40%, transparent); /* ======================================================== 7. HAREKET — Motion Tokens ======================================================== Süreler "perceived performance" eşiklerine göre: 100ms = direkt tepki (click feedback) 200ms = hover, küçük state değişimi 300ms = standart geçiş 500ms = büyük layout değişimi 800ms+ = dramatic, sadece giriş animasyonlarında */ --duration-instant: 100ms; --duration-fast: 200ms; --duration-base: 300ms; --duration-slow: 500ms; --duration-slower: 800ms; /* Easing — "spring-like" but CSS-safe */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* UI standard */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* symmetric */ --ease-emphasized: cubic-bezier(0.20, 0, 0, 1); /* Material 3 */ --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* playful */ /* ======================================================== 8. Z-INDEX — Katman Yönetimi ======================================================== Boşluklu (10'ar) — ara katman eklemek kolay. */ --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 1000; --z-modal: 2000; --z-toast: 3000; --z-tooltip: 4000; /* ======================================================== 9. LAYOUT — Container Sistemi ======================================================== */ --container-xs: 480px; --container-sm: 640px; --container-md: 768px; --container-lg: 1024px; --container-xl: 1200px; --container-2xl: 1440px; --container-prose: 68ch; /* okuma satırı optimum */ /* Bar yükseklikleri */ --nav-height: 52px; --nav-height-lg: 64px; } /* Kontrast tercihi */ @media (prefers-contrast: more) { :root { --text-tertiary: color-mix(in oklab, var(--slate-50) 72%, transparent); --text-quaternary: color-mix(in oklab, var(--slate-50) 58%, transparent); --border-default: color-mix(in oklab, var(--slate-50) 20%, transparent); } } /* Hareket tercihi */ @media (prefers-reduced-motion: reduce) { :root { --duration-instant: 0ms; --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; --duration-slower: 0ms; } } }