/* ============================================================ Design Tokens — Apple-HIG-nahes System Dark/Light/Auto via [data-theme] Attribut auf ============================================================ */ :root { /* ---------- Typography ---------- */ --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 18px; --text-xl: 22px; --text-2xl: 28px; --text-3xl: 34px; --leading-tight: 1.2; --leading-normal: 1.5; --leading-relaxed: 1.7; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ---------- Spacing (4px-System) ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ---------- Radius ---------- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 9999px; /* ---------- Motion ---------- */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-decelerate: cubic-bezier(0, 0, 0.2, 1); --duration-fast: 150ms; --duration-base: 220ms; --duration-slow: 320ms; /* ---------- Touch ---------- */ --touch-target: 44px; } /* ============================================================ Light Theme (default) ============================================================ */ :root, :root[data-theme="light"] { color-scheme: light; --color-bg: #ffffff; --color-bg-elevated: #f5f5f7; --color-bg-grouped: #f2f2f7; --color-surface: #ffffff; --color-surface-hover: #f5f5f7; --color-surface-active: #e8e8ed; --color-text-primary: #1d1d1f; --color-text-secondary: #424245; --color-text-tertiary: #6e6e73; --color-text-inverse: #ffffff; --color-border: rgba(0, 0, 0, 0.1); --color-border-strong: rgba(0, 0, 0, 0.2); --color-divider: rgba(0, 0, 0, 0.08); --color-accent: #0071e3; --color-accent-hover: #0077ed; --color-accent-active: #006edb; --color-success: #34c759; --color-warning: #ff9500; --color-danger: #ff3b30; --color-info: #5ac8fa; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12); --shadow-focus: 0 0 0 4px rgba(0, 113, 227, 0.25); } /* ============================================================ Dark Theme ============================================================ */ :root[data-theme="dark"] { color-scheme: dark; --color-bg: #000000; --color-bg-elevated: #1c1c1e; --color-bg-grouped: #1c1c1e; --color-surface: #1c1c1e; --color-surface-hover: #2c2c2e; --color-surface-active: #3a3a3c; --color-text-primary: #ffffff; --color-text-secondary: #ebebf5; --color-text-tertiary: #8e8e93; --color-text-inverse: #000000; --color-border: rgba(255, 255, 255, 0.15); --color-border-strong: rgba(255, 255, 255, 0.3); --color-divider: rgba(255, 255, 255, 0.1); --color-accent: #0a84ff; --color-accent-hover: #409cff; --color-accent-active: #0066cc; --color-success: #30d158; --color-warning: #ff9f0a; --color-danger: #ff453a; --color-info: #64d2ff; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5); --shadow-focus: 0 0 0 4px rgba(10, 132, 255, 0.35); } /* ============================================================ Auto Theme — folgt System ============================================================ */ @media (prefers-color-scheme: dark) { :root[data-theme="auto"] { color-scheme: dark; --color-bg: #000000; --color-bg-elevated: #1c1c1e; --color-bg-grouped: #1c1c1e; --color-surface: #1c1c1e; --color-surface-hover: #2c2c2e; --color-surface-active: #3a3a3c; --color-text-primary: #ffffff; --color-text-secondary: #ebebf5; --color-text-tertiary: #8e8e93; --color-text-inverse: #000000; --color-border: rgba(255, 255, 255, 0.15); --color-border-strong: rgba(255, 255, 255, 0.3); --color-divider: rgba(255, 255, 255, 0.1); --color-accent: #0a84ff; --color-accent-hover: #409cff; --color-accent-active: #0066cc; --color-success: #30d158; --color-warning: #ff9f0a; --color-danger: #ff453a; --color-info: #64d2ff; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5); --shadow-focus: 0 0 0 4px rgba(10, 132, 255, 0.35); } } /* ============================================================ Base Reset & Defaults ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--color-text-primary); background-color: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100svh; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); overscroll-behavior-y: none; } input, textarea, select { font: inherit; font-size: max(16px, var(--text-base)); } button { font: inherit; min-height: var(--touch-target); min-width: var(--touch-target); cursor: pointer; } :focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }