/* MemoHQ Design Tokens — SKY edition Helles, frisches Sky-Blue · Apple-Premium · Koralle als Akzent Keine Gradients, kein Glassmorphism. */ @import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800&family=Newsreader:ital,opsz,wght@0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,500;1,6..72,600&family=JetBrains+Mono:wght@400;500;600&display=swap'); :root { /* ═══════════ SURFACE — luftig, viel Weißraum ═══════════ */ --cream-50: #F6FAFD; /* page bg — hauchzart sky tint */ --cream-100: #FFFFFF; /* card / raised — reines Weiß */ --cream-200: #EAF2F9; /* sanfter sky-accent bg */ --cream-300: #D5E3EF; /* border auf card */ --cream-400: #B5CADD; /* ═══════════ INK — tiefes navy für Text ═══════════ */ --ink-900: #0A1A2E; /* primary text */ --ink-700: #24385A; /* secondary text */ --ink-500: #5A6E8A; /* tertiary / hints */ --ink-300: #95A6BD; /* disabled / placeholder */ --ink-200: #D0DBEA; /* subtle border */ --ink-100: #E8EEF6; /* hairline */ /* ═══════════ EMBER (Primary) — Korallen-Orange ═══════════ */ /* Name bleibt --ember für Kompatibilität, Hue wechselt zu coral */ --ember-50: #FFF1EC; --ember-100: #FFDDD1; --ember-300: #FFA588; --ember-500: #FF6B47; /* PRIMARY — warme Koralle */ --ember-600: #E8532F; --ember-700: #B83B1C; /* ═══════════ SKY (Brand Blue) — frisch & hell ═══════════ */ --sky-50: #EAF4FB; --sky-100: #D5E9F7; --sky-300: #7EBCE6; --sky-500: #3593D1; /* brand blue */ --sky-600: #1E76B3; --sky-700: #0F5788; /* ═══════════ Support ═══════════ */ --moss-500: #1F9D74; /* success / mastered */ --moss-300: #7CD0B2; --moss-100: #DBF2E8; --plum-500: #7B4FB8; /* rare accent */ --plum-300: #B59EDC; --plum-100: #ECE3F7; --amber-500: #E89B1F; /* warning */ --amber-100: #FCEBC4; /* ═══════════ Mastery ═══════════ */ --mastery-low: #FF6B47; /* ember/coral */ --mastery-mid: #E89B1F; /* amber */ --mastery-high: #1F9D74; /* moss */ /* ═══════════ Radii ═══════════ */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-2xl: 36px; --r-pill: 9999px; /* ═══════════ Shadows — cool navy, subtil ═══════════ */ --shadow-xs: 0 1px 2px rgba(10,26,46,0.05); --shadow-sm: 0 1px 3px rgba(10,26,46,0.06), 0 2px 8px rgba(10,26,46,0.04); --shadow-md: 0 2px 6px rgba(10,26,46,0.06), 0 10px 24px rgba(10,26,46,0.08); --shadow-lg: 0 4px 10px rgba(10,26,46,0.08), 0 24px 48px rgba(10,26,46,0.12); --shadow-ember: 0 2px 6px rgba(255,107,71,0.25), 0 8px 20px rgba(255,107,71,0.20); --shadow-ember-sm: 0 1px 3px rgba(255,107,71,0.20), 0 3px 8px rgba(255,107,71,0.18); --shadow-ink: 0 2px 6px rgba(10,26,46,0.22), 0 8px 20px rgba(10,26,46,0.24); --shadow-ink-sm: 0 1px 3px rgba(10,26,46,0.20), 0 3px 8px rgba(10,26,46,0.22); /* ═══════════ Type ═══════════ */ /* Display: Newsreader (ruhiger, minimaler als Fraunces) UI: Inter Tight (moderne, präzise Sans für Apple-Feel) */ --font-display: 'Newsreader', 'Times New Roman', serif; --font-ui: 'Inter Tight', -apple-system, system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* ═══════════ Motion ═══════════ */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); } /* ═══════════════════════════════════════════════════════════ DARK MODE — Midnight Navy Canvas Toggle via ═══════════════════════════════════════════════════════════ */ [data-theme="dark"] { --cream-50: #0B1624; /* page bg — deep navy */ --cream-100: #142235; /* card / raised */ --cream-200: #1C2F47; /* sky-accent surface */ --cream-300: #2A4262; --cream-400: #3D5A82; --ink-900: #F2F6FC; /* primary text light */ --ink-700: #C5D1E4; --ink-500: #8298B8; --ink-300: #556C8C; --ink-200: #2B425F; --ink-100: #1E3148; --ember-50: #3D1F15; --ember-100: #5C2E1F; --ember-300: #FF8A68; --ember-500: #FF7A55; /* bleibt Koralle, leicht heller für Kontrast */ --ember-600: #E85F38; --ember-700: #B03A1A; --sky-50: #0F2438; --sky-100: #17375A; --sky-300: #6DB8DE; --sky-500: #56B4E8; /* brand blue — heller im dark mode */ --sky-600: #3593D1; --sky-700: #1E76B3; --moss-500: #3FD29D; --moss-300: #7CE0BA; --moss-100: #143A2E; --plum-500: #B598E5; --plum-300: #C9B2EE; --plum-100: #2B2148; --amber-500: #F5B945; --amber-100: #3D2E10; --mastery-low: #FF7A55; --mastery-mid: #F5B945; --mastery-high: #3FD29D; --shadow-xs: 0 1px 2px rgba(0,0,0,0.3); --shadow-sm: 0 1px 3px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.3); --shadow-md: 0 2px 6px rgba(0,0,0,0.4), 0 10px 24px rgba(0,0,0,0.35); --shadow-lg: 0 4px 10px rgba(0,0,0,0.5), 0 24px 48px rgba(0,0,0,0.45); --shadow-ember: 0 2px 6px rgba(255,122,85,0.30), 0 8px 20px rgba(255,122,85,0.22); --shadow-ember-sm: 0 1px 3px rgba(255,122,85,0.25), 0 3px 8px rgba(255,122,85,0.20); --shadow-ink: 0 2px 6px rgba(0,0,0,0.45), 0 8px 20px rgba(0,0,0,0.50); --shadow-ink-sm: 0 1px 3px rgba(0,0,0,0.40), 0 3px 8px rgba(0,0,0,0.45); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: var(--font-ui); font-size: 15px; line-height: 1.4; color: var(--ink-900); background: var(--cream-50); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv11"; } button { font-family: inherit; border: none; cursor: pointer; background: none; color: inherit; } input, textarea, select { font-family: inherit; color: inherit; } /* ─── Type presets ─── */ .display-xl { font-family: var(--font-display); font-weight: 700; font-size: 64px; line-height: 1.05; letter-spacing: -0.035em; } .display-lg { font-family: var(--font-display); font-weight: 700; font-size: 44px; line-height: 1.02; letter-spacing: -0.03em; } .display-md { font-family: var(--font-display); font-weight: 600; font-size: 32px; line-height: 1.08; letter-spacing: -0.025em; } .display-sm { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.15; letter-spacing: -0.02em; } .heading { font-family: var(--font-ui); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; } .body { font-family: var(--font-ui); font-size: 15px; line-height: 1.5; } .caption { font-family: var(--font-ui); font-size: 12px; font-weight: 500; letter-spacing: 0.01em; color: var(--ink-500); } .mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1, "zero" 1; } .overline { font-family: var(--font-ui); font-weight: 600; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500); } /* ─── Scrollbar ─── */ .scroll::-webkit-scrollbar { width: 4px; height: 4px; } .scroll::-webkit-scrollbar-thumb { background: var(--ink-200); border-radius: 2px; } .scroll::-webkit-scrollbar-track { background: transparent; } .noscroll { scrollbar-width: none; } .noscroll::-webkit-scrollbar { display: none; }