/* Design-System Theme — kanonische Quelle (aus apps/web/globals.css extrahiert). 14 Varianten + Hell/Dunkel + Font-/Größen-/Editor-Präferenzen. */ /* -------------------------------------------------------------------------- Design tokens -------------------------------------------------------------------------- */ :root { /* Surfaces — page → panel → overlay. Panels are visibly tinted against * the canvas so the editor (bg-primary) reads as the active sheet of * paper, not just another column. */ --bg-primary: #ffffff; --bg-secondary: #f6f6f8; --bg-tertiary: #ececef; --surface-overlay: #ffffff; /* Text */ --text-primary: #18181b; --text-secondary: #52525b; --text-muted: #9b9ba3; /* Brand + states */ --accent: #2563eb; --accent-hover: #1d4ed8; --accent-soft: rgba(37, 99, 235, 0.10); --accent-fg: #ffffff; --danger: #dc2626; --danger-soft: rgba(220, 38, 38, 0.10); --danger-fg: #b91c1c; --success: #16a34a; --success-soft: rgba(22, 163, 74, 0.10); /* Lines */ --border: #e4e4e9; --border-soft: #ededf1; --border-strong: #d4d4d8; /* Focus */ --focus-ring: rgba(37, 99, 235, 0.40); /* Shadows — layered for depth without heaviness */ --shadow-sm: 0 1px 2px rgba(15, 17, 21, 0.05); --shadow-md: 0 4px 12px rgba(15, 17, 21, 0.06), 0 2px 4px rgba(15, 17, 21, 0.04); --shadow-lg: 0 16px 40px rgba(15, 17, 21, 0.12), 0 4px 16px rgba(15, 17, 21, 0.06); /* Type scale — tight discrete steps, prefer these over arbitrary px. */ --text-2xs: 10.5px; --text-xs: 11.5px; --text-sm: 13px; --text-md: 14px; --text-base: 15px; --text-lg: 17px; --text-xl: 20px; /* Motion — three speeds, one easing curve. */ --motion-fast: 120ms; --motion-base: 180ms; --motion-emphatic: 240ms; --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); /* Radii */ --radius: 8px; --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; } .dark { --bg-primary: #0a0a0b; --bg-secondary: #111114; --bg-tertiary: #1a1a1e; --surface-overlay: #16161a; --text-primary: #fafafa; --text-secondary: #a1a1aa; --text-muted: #71717a; --accent: #3b82f6; --accent-hover: #60a5fa; --accent-soft: rgba(59, 130, 246, 0.16); --accent-fg: #ffffff; --danger: #f87171; --danger-soft: rgba(248, 113, 113, 0.18); --danger-fg: #fca5a5; --success: #4ade80; --success-soft: rgba(74, 222, 128, 0.14); --border: #27272a; --border-soft: #1f1f23; --border-strong: #3f3f46; --focus-ring: rgba(96, 165, 250, 0.55); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.30); --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.65), 0 6px 16px rgba(0, 0, 0, 0.40); } /* -------------------------------------------------------------------------- Theme variants — driven by `data-theme` on . Each variant defines its own surface ramp, text scale, accent and border tokens for *both* light and dark modes. The default Atlas theme lives in :root / .dark above; selectors here override that whole token set when the user picks a different theme. Shadows, motion, type scale and the danger/success semantic colors are intentionally NOT overridden — they stay consistent across themes so the product personality is signaled by chroma, not by swapping every cue at once. -------------------------------------------------------------------------- */ /* ─── Nordic — calm cool slate, deep sky-blue accent ─────────────────────── */ html[data-theme="nordic"] { --bg-primary: #fdfdfe; --bg-secondary: #f1f4f8; --bg-tertiary: #e3e8ee; --surface-overlay: #ffffff; --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #94a3b8; --accent: #0c4a6e; --accent-hover: #082f49; --accent-soft: rgba(12, 74, 110, 0.10); --border: #dde3eb; --border-soft: #e8edf3; --border-strong: #c8d0db; --focus-ring: rgba(12, 74, 110, 0.40); } html.dark[data-theme="nordic"] { --bg-primary: #0b1118; --bg-secondary: #121a23; --bg-tertiary: #1a242f; --surface-overlay: #161f29; --text-primary: #e2e8f0; --text-secondary: #94a3b8; --text-muted: #64748b; --accent: #38bdf8; --accent-hover: #7dd3fc; --accent-soft: rgba(56, 189, 248, 0.18); --border: #1f2c3a; --border-soft: #182532; --border-strong: #334155; --focus-ring: rgba(56, 189, 248, 0.55); } /* ─── Papier — warm cream + sepia accent (editorial) ─────────────────────── */ html[data-theme="papier"] { --bg-primary: #fbf7ee; --bg-secondary: #f2ecdd; --bg-tertiary: #e8dec8; --surface-overlay: #fdfaf3; --text-primary: #1f1a13; --text-secondary: #5c5040; --text-muted: #9b8c72; --accent: #92400e; --accent-hover: #78350f; --accent-soft: rgba(146, 64, 14, 0.10); --border: #e0d4ba; --border-soft: #ebe1c9; --border-strong: #ccbb9c; --focus-ring: rgba(146, 64, 14, 0.40); } html.dark[data-theme="papier"] { --bg-primary: #1a1611; --bg-secondary: #221c15; --bg-tertiary: #2c241a; --surface-overlay: #261f17; --text-primary: #f4ecd9; --text-secondary: #c2b699; --text-muted: #8a7c62; --accent: #d97706; --accent-hover: #f59e0b; --accent-soft: rgba(217, 119, 6, 0.18); --border: #3a2f1f; --border-soft: #2e2519; --border-strong: #4a3d28; --focus-ring: rgba(217, 119, 6, 0.55); } /* ─── Graphit — achromatic minimal (no chroma) ───────────────────────────── */ html[data-theme="graphit"] { --bg-primary: #ffffff; --bg-secondary: #f5f5f5; --bg-tertiary: #e9e9e9; --surface-overlay: #ffffff; --text-primary: #171717; --text-secondary: #525252; --text-muted: #a3a3a3; --accent: #404040; --accent-hover: #262626; --accent-soft: rgba(64, 64, 64, 0.10); --border: #e5e5e5; --border-soft: #ededed; --border-strong: #d4d4d4; --focus-ring: rgba(64, 64, 64, 0.45); } html.dark[data-theme="graphit"] { --bg-primary: #0a0a0a; --bg-secondary: #171717; --bg-tertiary: #1f1f1f; --surface-overlay: #1c1c1c; --text-primary: #fafafa; --text-secondary: #a3a3a3; --text-muted: #737373; --accent: #d4d4d4; --accent-hover: #f5f5f5; --accent-soft: rgba(212, 212, 212, 0.15); --border: #262626; --border-soft: #1f1f1f; --border-strong: #3f3f3f; --focus-ring: rgba(212, 212, 212, 0.50); } /* ─── Wald — muted sage + deep forest green ─────────────────────────────── */ html[data-theme="wald"] { --bg-primary: #fafaf5; --bg-secondary: #eef1e6; --bg-tertiary: #dfe5d2; --surface-overlay: #ffffff; --text-primary: #1c2519; --text-secondary: #4a5a42; --text-muted: #8a9a80; --accent: #166534; --accent-hover: #14532d; --accent-soft: rgba(22, 101, 52, 0.10); --border: #dde3d0; --border-soft: #e7ecd9; --border-strong: #c4cdb2; --focus-ring: rgba(22, 101, 52, 0.40); } html.dark[data-theme="wald"] { --bg-primary: #0d1310; --bg-secondary: #131a13; --bg-tertiary: #1b2418; --surface-overlay: #182018; --text-primary: #e6efe3; --text-secondary: #9bb094; --text-muted: #687d60; --accent: #4ade80; --accent-hover: #86efac; --accent-soft: rgba(74, 222, 128, 0.16); --border: #1f2c1c; --border-soft: #182316; --border-strong: #2d3d28; --focus-ring: rgba(74, 222, 128, 0.55); } /* ─── Mocha — warm latte + copper ─────────────────────────────────────────── */ html[data-theme="mocha"] { --bg-primary: #fbf6ee; --bg-secondary: #f1e7d6; --bg-tertiary: #e2d4ba; --surface-overlay: #fdf9f1; --text-primary: #2b1f15; --text-secondary: #6a4f38; --text-muted: #a18a6c; --accent: #9a3412; --accent-hover: #7c2d12; --accent-soft: rgba(154, 52, 18, 0.10); --border: #dfd0b3; --border-soft: #e9dcc1; --border-strong: #c9b894; --focus-ring: rgba(154, 52, 18, 0.40); } html.dark[data-theme="mocha"] { --bg-primary: #1a130d; --bg-secondary: #221911; --bg-tertiary: #2a2017; --surface-overlay: #251c13; --text-primary: #f0e5d5; --text-secondary: #b6a48a; --text-muted: #8b7656; --accent: #ea580c; --accent-hover: #f97316; --accent-soft: rgba(234, 88, 12, 0.18); --border: #3a2c1d; --border-soft: #2d2217; --border-strong: #4b3a25; --focus-ring: rgba(234, 88, 12, 0.55); } /* ─── Indigo — deep navy + violet ─────────────────────────────────────────── */ html[data-theme="indigo"] { --bg-primary: #fdfdff; --bg-secondary: #f2f3fa; --bg-tertiary: #e3e5f1; --surface-overlay: #ffffff; --text-primary: #1e1f3a; --text-secondary: #4a4e6e; --text-muted: #8589a8; --accent: #4f46e5; --accent-hover: #4338ca; --accent-soft: rgba(79, 70, 229, 0.10); --border: #dcdfee; --border-soft: #e8ebf3; --border-strong: #c2c7dc; --focus-ring: rgba(79, 70, 229, 0.40); } html.dark[data-theme="indigo"] { --bg-primary: #0b0c1c; --bg-secondary: #111328; --bg-tertiary: #1a1d3a; --surface-overlay: #161830; --text-primary: #e0e2f0; --text-secondary: #a4a8c4; --text-muted: #6c7095; --accent: #818cf8; --accent-hover: #a5b4fc; --accent-soft: rgba(129, 140, 248, 0.18); --border: #232852; --border-soft: #1a1f3e; --border-strong: #353a6a; --focus-ring: rgba(129, 140, 248, 0.55); } /* ─── Porzellan — pure crisp whites, ink-black accent (most subtle) ──────── */ html[data-theme="porzellan"] { --bg-primary: #ffffff; --bg-secondary: #f8f8fa; --bg-tertiary: #efeff2; --surface-overlay: #ffffff; --text-primary: #0c0c10; --text-secondary: #4a4a52; --text-muted: #9a9aa3; --accent: #1f2937; --accent-hover: #0f172a; --accent-soft: rgba(31, 41, 55, 0.10); --border: #e8e8ec; --border-soft: #f0f0f3; --border-strong: #d4d4d9; --focus-ring: rgba(31, 41, 55, 0.40); } html.dark[data-theme="porzellan"] { --bg-primary: #0c0c10; --bg-secondary: #14141a; --bg-tertiary: #1e1e26; --surface-overlay: #18181f; --text-primary: #f8f8fa; --text-secondary: #a8a8b0; --text-muted: #6e6e76; --accent: #e5e5ec; --accent-hover: #ffffff; --accent-soft: rgba(229, 229, 236, 0.12); --border: #25252d; --border-soft: #1b1b22; --border-strong: #3a3a45; --focus-ring: rgba(229, 229, 236, 0.50); } /* ─── Leinen — warm off-white linen, restrained cocoa ────────────────────── */ html[data-theme="leinen"] { --bg-primary: #f9f6f0; --bg-secondary: #f0ebe1; --bg-tertiary: #e3dccf; --surface-overlay: #fbf9f4; --text-primary: #2a2620; --text-secondary: #6b6356; --text-muted: #a59c8c; --accent: #6f4e37; --accent-hover: #5a3f2c; --accent-soft: rgba(111, 78, 55, 0.10); --border: #e2dccd; --border-soft: #ebe6da; --border-strong: #c8c0ae; --focus-ring: rgba(111, 78, 55, 0.40); } html.dark[data-theme="leinen"] { --bg-primary: #1a1714; --bg-secondary: #221d18; --bg-tertiary: #2a241e; --surface-overlay: #24201a; --text-primary: #ede5d6; --text-secondary: #b8ad97; --text-muted: #847b67; --accent: #c9a07a; --accent-hover: #e0bb95; --accent-soft: rgba(201, 160, 122, 0.18); --border: #36302a; --border-soft: #2b2620; --border-strong: #4a4238; --focus-ring: rgba(201, 160, 122, 0.55); } /* ─── Nebel — pale grey-blue mist, very low chroma ───────────────────────── */ html[data-theme="nebel"] { --bg-primary: #fafbfc; --bg-secondary: #eef1f4; --bg-tertiary: #dfe4e9; --surface-overlay: #ffffff; --text-primary: #1c2128; --text-secondary: #525c66; --text-muted: #9aa3ad; --accent: #475569; --accent-hover: #334155; --accent-soft: rgba(71, 85, 105, 0.10); --border: #e0e5ea; --border-soft: #e9edf1; --border-strong: #c5ccd4; --focus-ring: rgba(71, 85, 105, 0.40); } html.dark[data-theme="nebel"] { --bg-primary: #0e1116; --bg-secondary: #161b21; --bg-tertiary: #1f262e; --surface-overlay: #1a2027; --text-primary: #e6ebf1; --text-secondary: #98a4b0; --text-muted: #6a7480; --accent: #94a3b8; --accent-hover: #cbd5e1; --accent-soft: rgba(148, 163, 184, 0.16); --border: #232a33; --border-soft: #1b2128; --border-strong: #364250; --focus-ring: rgba(148, 163, 184, 0.55); } /* ─── Stein — warm stone neutrals, soft taupe accent ─────────────────────── */ html[data-theme="stein"] { --bg-primary: #fafaf9; --bg-secondary: #f5f5f4; --bg-tertiary: #e7e5e4; --surface-overlay: #fefefd; --text-primary: #1c1917; --text-secondary: #57534e; --text-muted: #a8a29e; --accent: #57534e; --accent-hover: #44403c; --accent-soft: rgba(87, 83, 78, 0.10); --border: #e7e5e4; --border-soft: #efedeb; --border-strong: #d6d3d1; --focus-ring: rgba(87, 83, 78, 0.40); } html.dark[data-theme="stein"] { --bg-primary: #0c0a09; --bg-secondary: #1c1917; --bg-tertiary: #292524; --surface-overlay: #1e1c1a; --text-primary: #fafaf9; --text-secondary: #a8a29e; --text-muted: #78716c; --accent: #d6d3d1; --accent-hover: #e7e5e4; --accent-soft: rgba(214, 211, 209, 0.15); --border: #292524; --border-soft: #1c1917; --border-strong: #44403c; --focus-ring: rgba(214, 211, 209, 0.50); } /* ─── Schiefer — cool slate gray, achromatic-cool accent ─────────────────── */ html[data-theme="schiefer"] { --bg-primary: #ffffff; --bg-secondary: #f1f5f9; --bg-tertiary: #e2e8f0; --surface-overlay: #ffffff; --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #94a3b8; --accent: #334155; --accent-hover: #1e293b; --accent-soft: rgba(51, 65, 85, 0.10); --border: #e2e8f0; --border-soft: #edf1f5; --border-strong: #cbd5e1; --focus-ring: rgba(51, 65, 85, 0.40); } html.dark[data-theme="schiefer"] { --bg-primary: #0f172a; --bg-secondary: #1e293b; --bg-tertiary: #283346; --surface-overlay: #1e2538; --text-primary: #f1f5f9; --text-secondary: #94a3b8; --text-muted: #64748b; --accent: #cbd5e1; --accent-hover: #e2e8f0; --accent-soft: rgba(203, 213, 225, 0.18); --border: #334155; --border-soft: #283346; --border-strong: #475569; --focus-ring: rgba(203, 213, 225, 0.55); } /* ─── Sand — desert tan + deep olive ─────────────────────────────────────── */ html[data-theme="sand"] { --bg-primary: #faf8f3; --bg-secondary: #efe9dc; --bg-tertiary: #e2d9c5; --surface-overlay: #fbf9f3; --text-primary: #1f1c12; --text-secondary: #5a5240; --text-muted: #96896d; --accent: #3f6212; --accent-hover: #365314; --accent-soft: rgba(63, 98, 18, 0.10); --border: #ddd3bd; --border-soft: #e7decb; --border-strong: #c5b896; --focus-ring: rgba(63, 98, 18, 0.40); } html.dark[data-theme="sand"] { --bg-primary: #161310; --bg-secondary: #1e1a14; --bg-tertiary: #28221a; --surface-overlay: #221d17; --text-primary: #ede6cf; --text-secondary: #b0a584; --text-muted: #7d735a; --accent: #84cc16; --accent-hover: #a3e635; --accent-soft: rgba(132, 204, 22, 0.16); --border: #2f281e; --border-soft: #251f16; --border-strong: #43392a; --focus-ring: rgba(132, 204, 22, 0.55); } /* ─── Pflaume — soft mauve + deep aubergine ──────────────────────────────── */ html[data-theme="pflaume"] { --bg-primary: #fdfafd; --bg-secondary: #f5eef3; --bg-tertiary: #e9dce5; --surface-overlay: #fefcfd; --text-primary: #2a1828; --text-secondary: #5a3a55; --text-muted: #9c7d92; --accent: #581c87; --accent-hover: #3b0764; --accent-soft: rgba(88, 28, 135, 0.10); --border: #e6d5e0; --border-soft: #efe1ea; --border-strong: #d0b6c5; --focus-ring: rgba(88, 28, 135, 0.40); } html.dark[data-theme="pflaume"] { --bg-primary: #150f17; --bg-secondary: #1d1620; --bg-tertiary: #271f2c; --surface-overlay: #221a26; --text-primary: #f0e4ed; --text-secondary: #b59cab; --text-muted: #7d6477; --accent: #c084fc; --accent-hover: #d8b4fe; --accent-soft: rgba(192, 132, 252, 0.18); --border: #2e2535; --border-soft: #251c2b; --border-strong: #443951; --focus-ring: rgba(192, 132, 252, 0.55); } /* -------------------------------------------------------------------------- Base reset & typography -------------------------------------------------------------------------- */ * { box-sizing: border-box; margin: 0; padding: 0; } html, body, #root { height: 100%; width: 100%; } body { font-family: var(--font-body, 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif); font-feature-settings: 'cv11', 'ss01', 'ss03'; background-color: var(--bg-primary); color: var(--text-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; transition: background-color var(--motion-base) var(--ease-out), color var(--motion-base) var(--ease-out); } /* User preference: font family applies to the body, editor falls back to it. */ html[data-font-family="sans"] { --font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } html[data-font-family="serif"] { --font-body: 'Newsreader', Georgia, 'Times New Roman', serif; } html[data-font-family="mono"] { --font-body: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; } /* User preference: editor body font-size. Heading sizes scale relative. */ html[data-font-size="small"] { --editor-body-size: 13px; --editor-body-lh: 1.6; } html[data-font-size="normal"] { --editor-body-size: 15px; --editor-body-lh: 1.65; } html[data-font-size="large"] { --editor-body-size: 17px; --editor-body-lh: 1.7; } /* User preference: editor max content width */ html[data-editor-width="narrow"] { --editor-max-width: 40rem; } html[data-editor-width="normal"] { --editor-max-width: 48rem; } html[data-editor-width="wide"] { --editor-max-width: 60rem; }