/* ═══════════════════════════════════════════════════════════════════ ParselX — tasarım tokenları Logodan türetilen palet: lacivert katmanlar (ana, orta, açık ton) ve turuncu konum pini. Marka renkleri yönetim panelinden gelir ( içindeki --brand-* değişkenleri); burada yalnızca yedek değerler var. ═══════════════════════════════════════════════════════════════════ */ :root { /* ── marka (panelden) ── */ --navy: var(--brand-primary, #14305A); --navy-2: var(--brand-secondary, #4D6A96); --tint: var(--brand-tint, #A9B8D0); --orange: var(--brand-accent, #F08A3C); --night: var(--brand-dark-bg, #0D1D38); --paper: var(--brand-light-bg, #F5F7FB); /* ── ham palet ── */ --ink-900: #0f1d33; --ink-800: #1b2a42; --ink-600: #3d4b63; --ink-500: #5a6882; --ink-400: #7a879d; --ink-300: #a6b0c2; --ink-200: #cfd6e2; --pastel-orange: #f4a261; --pastel-green: #52b788; --pastel-purple: #9b87e8; --pastel-rose: #ec7f95; --pastel-sky: #5ea9e6; /* ── tipografi ── */ --font: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --display: 'Sora', 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif; --script: 'Caveat', 'Segoe Script', cursive; --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --fs-xs: 11px; --fs-sm: 12.5px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 24px; /* ── biçim ── */ --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 20px; --r-xl: 26px; --r-pill: 999px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --panel-w: 392px; --gap: 16px; --ease: cubic-bezier(.2, .8, .2, 1); --dur: .18s; /* ── anlamsal: açık tema ── */ color-scheme: light; --bg: var(--paper); --surface: #ffffff; --surface-2: color-mix(in srgb, var(--tint) 12%, #ffffff); --surface-3: color-mix(in srgb, var(--tint) 24%, #ffffff); --glass: rgba(255, 255, 255, .86); --glass-strong:rgba(255, 255, 255, .95); --line: color-mix(in srgb, var(--navy) 9%, transparent); --line-2: color-mix(in srgb, var(--navy) 16%, transparent); --text: var(--ink-900); --text-2: var(--ink-600); --text-3: var(--ink-400); --accent: var(--navy); --accent-hover: color-mix(in srgb, var(--navy) 86%, #000); --accent-press: color-mix(in srgb, var(--navy) 74%, #000); --accent-soft: color-mix(in srgb, var(--navy-2) 9%, #ffffff); --accent-soft-2: color-mix(in srgb, var(--navy-2) 18%, #ffffff); --accent-text: var(--navy-2); --on-accent: #ffffff; /* turuncu vurgu (pin): seçili parsel, çağrı düğmeleri, el yazısı */ --hot: var(--orange); --hot-hover: color-mix(in srgb, var(--orange) 88%, #000); --hot-soft: color-mix(in srgb, var(--orange) 13%, #ffffff); --hot-text: color-mix(in srgb, var(--orange) 78%, #5a1f00); --on-hot: #ffffff; --success: #16865a; --success-soft: #e2f4ec; --warning: #b86e0e; --warning-soft: #fcf0de; --danger: #c9404b; --danger-soft: #fce8ea; --info: var(--navy-2); --info-soft: var(--accent-soft); --focus: 0 0 0 3px color-mix(in srgb, var(--navy-2) 35%, transparent); --shadow-xs: 0 1px 2px rgba(15, 29, 51, .05); --shadow-sm: 0 1px 2px rgba(15, 29, 51, .04), 0 4px 12px -4px rgba(15, 29, 51, .09); --shadow-md: 0 1px 3px rgba(15, 29, 51, .04), 0 12px 28px -8px rgba(15, 29, 51, .16); --shadow-lg: 0 2px 6px rgba(15, 29, 51, .05), 0 28px 56px -16px rgba(15, 29, 51, .26); --skeleton-a: color-mix(in srgb, var(--tint) 18%, #ffffff); --skeleton-b: color-mix(in srgb, var(--tint) 6%, #ffffff); --logo-light: block; --logo-dark: none; } /* ── koyu tema ── */ :root[data-theme="dark"] { color-scheme: dark; --bg: var(--night); --surface: color-mix(in srgb, var(--night) 88%, #ffffff); --surface-2: color-mix(in srgb, var(--night) 82%, #ffffff); --surface-3: color-mix(in srgb, var(--night) 74%, #ffffff); --glass: color-mix(in srgb, var(--night) 86%, transparent); --glass-strong:color-mix(in srgb, var(--night) 95%, #1a2b4a); --line: rgba(214, 224, 240, .09); --line-2: rgba(214, 224, 240, .16); --text: #e8eef8; --text-2: #aebbd0; --text-3: #7c8ba5; --accent: color-mix(in srgb, var(--tint) 82%, #ffffff); --accent-hover: #ffffff; --accent-press: var(--tint); --accent-soft: color-mix(in srgb, var(--tint) 12%, transparent); --accent-soft-2: color-mix(in srgb, var(--tint) 22%, transparent); --accent-text: color-mix(in srgb, var(--tint) 88%, #ffffff); --on-accent: var(--night); --hot-soft: color-mix(in srgb, var(--orange) 16%, transparent); --hot-text: color-mix(in srgb, var(--orange) 90%, #ffffff); --success: #4cc98f; --success-soft: rgba(76, 201, 143, .13); --warning: #f0b153; --warning-soft: rgba(240, 177, 83, .13); --danger: #f07482; --danger-soft: rgba(240, 116, 130, .13); --info: var(--tint); --info-soft: var(--accent-soft); --focus: 0 0 0 3px color-mix(in srgb, var(--tint) 40%, transparent); --shadow-xs: 0 1px 2px rgba(0, 0, 0, .3); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 16px -6px rgba(0, 0, 0, .45); --shadow-md: 0 1px 3px rgba(0, 0, 0, .3), 0 14px 32px -10px rgba(0, 0, 0, .6); --shadow-lg: 0 2px 8px rgba(0, 0, 0, .35), 0 30px 60px -18px rgba(0, 0, 0, .75); --skeleton-a: color-mix(in srgb, var(--night) 84%, #ffffff); --skeleton-b: color-mix(in srgb, var(--night) 78%, #ffffff); --logo-light: none; --logo-dark: block; } @media (prefers-reduced-motion: reduce) { :root { --dur: 0s; } }