/* ============================================================ * inventis Design System — Design Tokens * iOS-inspired: clean, restrained palette, soft shadows, generous spacing * * Kullanım: * * * * * Dark mode otomatik (prefers-color-scheme), opsiyonel zorlama: * veya * ============================================================ */ :root { /* ============ TYPOGRAPHY ============ */ /* Inter — SF Pro'ya en yakın free alternatif. Self-host edilebilir (assets/fonts) */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, Consolas, monospace; /* Type scale (iOS HIG benzeri) */ --text-2xs: 0.6875rem; /* 11px - caption */ --text-xs: 0.75rem; /* 12px - footnote */ --text-sm: 0.8125rem; /* 13px - subhead */ --text-base: 0.9375rem; /* 15px - body */ --text-lg: 1.0625rem; /* 17px - body large */ --text-xl: 1.25rem; /* 20px - title3 */ --text-2xl: 1.375rem; /* 22px - title2 */ --text-3xl: 1.75rem; /* 28px - title1 */ --text-4xl: 2.125rem; /* 34px - large title */ --text-5xl: 2.5rem; /* 40px - hero */ /* Font weights (Inter range) */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Line heights */ --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.5; --leading-relaxed: 1.65; /* Letter spacing (iOS uses tight letter-spacing for large titles) */ --tracking-tight: -0.02em; --tracking-normal: -0.01em; --tracking-wide: 0; /* ============ SPACING (4px scale) ============ */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ --space-20: 5rem; /* 80 */ /* ============ BORDER RADIUS (iOS-vibe) ============ */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; /* default card radius */ --radius-xl: 18px; --radius-2xl: 24px; --radius-3xl: 32px; --radius-full: 9999px; /* ============ SHADOW (very soft, iOS-style) ============ */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04); --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04); --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.06); --shadow-2xl: 0 32px 64px rgba(0, 0, 0, 0.16); /* Focus ring (iOS blue glow) */ --shadow-focus: 0 0 0 4px rgba(0, 122, 255, 0.20); --shadow-focus-danger: 0 0 0 4px rgba(255, 59, 48, 0.18); /* ============ COLORS — LIGHT MODE ============ */ /* iOS system colors */ --color-blue: #007AFF; --color-blue-dark: #0062CC; --color-blue-light: #4DA3FF; --color-indigo: #5856D6; --color-purple: #AF52DE; --color-pink: #FF2D55; --color-red: #FF3B30; --color-orange: #FF9500; --color-yellow: #FFCC00; --color-green: #34C759; --color-mint: #00C7BE; --color-teal: #30B0C7; --color-cyan: #32ADE6; /* Neutral palette (iOS gray scale) */ --gray-50: #F9FAFB; --gray-100: #F2F2F7; /* iOS systemGroupedBackground */ --gray-150: #E8E8ED; --gray-200: #D1D1D6; --gray-300: #C7C7CC; --gray-400: #AEAEB2; --gray-500: #8E8E93; /* iOS systemGray */ --gray-600: #636366; --gray-700: #48484A; --gray-800: #2C2C2E; --gray-900: #1C1C1E; --gray-950: #0A0A0C; /* Semantic — light */ --bg: #FFFFFF; --bg-elevated: #FFFFFF; --bg-subtle: var(--gray-50); --bg-muted: var(--gray-100); --bg-overlay: rgba(0, 0, 0, 0.4); --bg-frosted: rgba(255, 255, 255, 0.72); --fg: var(--gray-900); --fg-secondary: var(--gray-600); --fg-tertiary: var(--gray-500); --fg-muted: var(--gray-400); --fg-inverse: #FFFFFF; --border-subtle: var(--gray-150); --border-default: var(--gray-200); --border-strong: var(--gray-300); --accent: var(--color-blue); --accent-fg: #FFFFFF; --accent-bg-soft: #E5F0FF; --accent-border: #B3D4FF; --success: var(--color-green); --success-bg-soft: #DDF5E2; --warning: var(--color-orange); --warning-bg-soft: #FFEED0; --danger: var(--color-red); --danger-bg-soft: #FFDCD9; --info: var(--color-cyan); --info-bg-soft: #DCF1FA; /* ============ MOTION ============ */ --ease-out: cubic-bezier(0.2, 0, 0, 1); --ease-spring: cubic-bezier(0.5, 1.6, 0.4, 0.9); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --duration-fast: 120ms; --duration-base: 180ms; --duration-slow: 280ms; /* ============ LAYOUT ============ */ --topbar-height: 56px; --sidebar-width: 248px; --sidebar-collapsed: 64px; --content-max-width: 1280px; --z-dropdown: 100; --z-sticky: 200; --z-sidebar: 300; --z-topbar: 400; --z-sheet: 500; --z-modal: 600; --z-toast: 700; --z-tooltip: 800; } /* ============ DARK MODE ============ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #000000; --bg-elevated: #1C1C1E; --bg-subtle: #0A0A0C; --bg-muted: #1C1C1E; --bg-overlay: rgba(0, 0, 0, 0.6); --bg-frosted: rgba(28, 28, 30, 0.72); --fg: #FFFFFF; --fg-secondary: rgba(235, 235, 245, 0.65); --fg-tertiary: rgba(235, 235, 245, 0.4); --fg-muted: rgba(235, 235, 245, 0.25); --fg-inverse: var(--gray-900); --border-subtle: rgba(255, 255, 255, 0.08); --border-default: rgba(255, 255, 255, 0.12); --border-strong: rgba(255, 255, 255, 0.18); --color-blue: #0A84FF; --color-green: #30D158; --color-orange: #FF9F0A; --color-red: #FF453A; --color-yellow: #FFD60A; --color-purple: #BF5AF2; --color-cyan: #64D2FF; --color-indigo: #5E5CE6; --accent: var(--color-blue); --accent-bg-soft: rgba(10, 132, 255, 0.16); --accent-border: rgba(10, 132, 255, 0.32); --success-bg-soft: rgba(48, 209, 88, 0.14); --warning-bg-soft: rgba(255, 159, 10, 0.14); --danger-bg-soft: rgba(255, 69, 58, 0.14); --info-bg-soft: rgba(100, 210, 255, 0.14); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.6); --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.7); } } /* Manuel dark mode (data-theme override) */ [data-theme="dark"] { --bg: #000000; --bg-elevated: #1C1C1E; --bg-subtle: #0A0A0C; --bg-muted: #1C1C1E; --bg-frosted: rgba(28, 28, 30, 0.72); --fg: #FFFFFF; --fg-secondary: rgba(235, 235, 245, 0.65); --fg-tertiary: rgba(235, 235, 245, 0.4); --fg-muted: rgba(235, 235, 245, 0.25); --fg-inverse: var(--gray-900); --border-subtle: rgba(255, 255, 255, 0.08); --border-default: rgba(255, 255, 255, 0.12); --border-strong: rgba(255, 255, 255, 0.18); --color-blue: #0A84FF; --accent: var(--color-blue); --accent-bg-soft: rgba(10, 132, 255, 0.16); --accent-border: rgba(10, 132, 255, 0.32); --success-bg-soft: rgba(48, 209, 88, 0.14); --warning-bg-soft: rgba(255, 159, 10, 0.14); --danger-bg-soft: rgba(255, 69, 58, 0.14); --info-bg-soft: rgba(100, 210, 255, 0.14); } /* Reduce motion — accessibility */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; } }