/* ════════════════════════════════════════════════════════════════ theme-apple.css — Apple-style global re-skin (Zadanie 1: fundament) -------------------------------------------------------------------- Ładowany JAKO OSTATNI w index.html (po t182.css), więc wygrywa kaskadę. Cały re-skin działa przez REDEFINICJĘ tokenów + bazowe prymitywy. NIE edytujemy styles.css ani t*.css. Zasada: nie hardkodujemy kolorów tam, gdzie istnieje token. Komponenty, które używają var(--bg/--accent/--border/...), automatycznie dostają wygląd Apple. Twarde kolory z !important czyścimy w theme-apple-fixes.css. ════════════════════════════════════════════════════════════════ */ /* ── Typografia: systemowy stack SF (zamiast Inter) ─────────────── */ :root { --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif; --mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace; /* Promienie — łagodniejsze, "miękkie" jak iOS */ --r-xs: 8px; --r-sm: 10px; --r: 12px; --r-lg: 16px; --r-xl: 22px; --r-full: 999px; /* Ruch — spokojny, Apple-owski easing */ --ease: cubic-bezier(.25, .1, .25, 1); --dur: .25s; /* Frosted glass */ --glass-blur: blur(20px) saturate(180%); } /* ═══════════════════════════════════════════════════════════════ LIGHT THEME ═══════════════════════════════════════════════════════════════ */ :root, :root[data-theme="light"] { --bg: #f5f5f7; --bg-2: #ffffff; --surface: #ffffff; --surface-2: #ffffff; --surface-3: #f5f5f7; --surface-hover: #f0f0f3; --border: rgba(0,0,0,.10); --border-2: rgba(0,0,0,.16); --border-strong: rgba(0,0,0,.24); --text: #1d1d1f; --text-2: #424245; --muted: #6e6e73; --muted-2: #86868b; --accent: #0071e3; --accent-2: #0066cc; --accent-soft: rgba(0,113,227,.10); --accent-soft-2: rgba(0,113,227,.16); --accent-glow: rgba(0,113,227,.25); --green: #34c759; --green-soft: rgba(52,199,89,.12); --red: #ff3b30; --red-soft: rgba(255,59,48,.10); --amber: #ff9500; --amber-soft: rgba(255,149,0,.12); --shadow-xs: 0 1px 2px rgba(0,0,0,.04); --shadow-sm: 0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.03); --shadow: 0 4px 16px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04); --shadow-lg: 0 20px 48px rgba(0,0,0,.12), 0 6px 16px rgba(0,0,0,.06); --ring: 0 0 0 4px var(--accent-glow); --glass-bg: rgba(255,255,255,.72); /* Drugi słownik (blok "redesign" w styles.css ~9866) — re-skin na Apple */ --brand-50: rgba(0,113,227,.08); --brand-100: rgba(0,113,227,.14); --brand-500: #0071e3; --brand-600: #0066cc; --brand-700: #0059b3; --ink-900: #1d1d1f; --ink-700: #424245; --ink-500: #6e6e73; --ink-300: #c7c7cc; --ink-100: #f0f0f3; --ink-50: #f5f5f7; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 16px; --shadow-md: 0 4px 16px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04); } /* ═══════════════════════════════════════════════════════════════ DARK THEME ═══════════════════════════════════════════════════════════════ */ :root[data-theme="dark"] { --bg: #000000; --bg-2: #1c1c1e; --surface: #1c1c1e; --surface-2: #2c2c2e; --surface-3: #2c2c2e; --surface-hover: #3a3a3c; --border: rgba(255,255,255,.12); --border-2: rgba(255,255,255,.18); --border-strong: rgba(255,255,255,.28); --text: #f5f5f7; --text-2: #d1d1d6; --muted: #98989d; --muted-2: #8e8e93; --accent: #0a84ff; --accent-2: #409cff; --accent-soft: rgba(10,132,255,.16); --accent-soft-2: rgba(10,132,255,.24); --accent-glow: rgba(10,132,255,.35); --green: #30d158; --green-soft: rgba(48,209,88,.16); --red: #ff453a; --red-soft: rgba(255,69,58,.16); --amber: #ff9f0a; --amber-soft: rgba(255,159,10,.16); --shadow-xs: 0 1px 2px rgba(0,0,0,.40); --shadow-sm: 0 1px 3px rgba(0,0,0,.44), 0 1px 2px rgba(0,0,0,.30); --shadow: 0 4px 16px rgba(0,0,0,.50), 0 1px 3px rgba(0,0,0,.30); --shadow-lg: 0 20px 48px rgba(0,0,0,.60), 0 6px 16px rgba(0,0,0,.40); --ring: 0 0 0 4px var(--accent-glow); --glass-bg: rgba(28,28,30,.72); /* Drugi słownik — wariant DARK (oryginał nie miał, stąd pękał dark mode) */ --brand-50: rgba(10,132,255,.16); --brand-100: rgba(10,132,255,.24); --brand-500: #0a84ff; --brand-600: #409cff; --brand-700: #0071e3; --ink-900: #f5f5f7; --ink-700: #d1d1d6; --ink-500: #98989d; --ink-300: #636366; --ink-100: #2c2c2e; --ink-50: #1c1c1e; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 16px; --shadow-md: 0 4px 16px rgba(0,0,0,.50), 0 1px 3px rgba(0,0,0,.30); } /* ═══════════════════════════════════════════════════════════════ PRYMITYWY GLOBALNE (oszczędnie) ═══════════════════════════════════════════════════════════════ */ /* Tło/tekst body — !important bije zakodowane jasne gradienty z t133/t135/t136, które łamały dark mode. Płaskie tło Apple sterowane tokenem. */ html, body { background: var(--bg) !important; color: var(--text); } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -.01em; font-feature-settings: normal; } /* Nagłówki — większe, ciaśniejsze, Apple-display feel */ h1, h2, h3 { letter-spacing: -.022em; font-weight: 600; } h1 { letter-spacing: -.03em; font-weight: 700; } /* Spokojne przejścia na elementach interaktywnych */ a, button, .btn, [class*="btn"], input, select, textarea, [role="button"], [role="tab"] { transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), opacity var(--dur) var(--ease); } /* Spójny focus-ring Apple */ :focus-visible { outline: none; box-shadow: var(--ring); } /* Subtelny, cieńszy scrollbar w stylu macOS */ * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-full); border: 3px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: content-box; }