diff --git a/launcher/src/styles.css b/launcher/src/styles.css index f1ee4be..34f28e9 100644 --- a/launcher/src/styles.css +++ b/launcher/src/styles.css @@ -1,32 +1,33 @@ :root { - /* Dark base — gleichgezogen mit dossier.kgva.ch */ - --bg: #0e1413; - --surface: #161d1c; - --surface2: #1b2422; - --dark: #0a100f; + /* Paper-Theme — warm-weisser Hintergrund, schwarze Schrift, Petrol-Akzent */ + --bg: #f4f0e6; /* warmes Papier */ + --surface: #ffffff; /* Cards */ + --surface2: #faf6ec; /* leichter Hover / zweite Ebene */ + --dark: #ebe5d4; /* "vertieft" — Inputs, Code, dropdowns */ --accent: #5fa896; --accent-soft: #4a8a7c; --accent-deep: #2f5d54; - --text: #e6e8e6; - --text2: #b4bcb8; - --text3: #828a86; - --text4: #5a625e; + --text: #1a1a1a; /* fast schwarz, Lesefluss */ + --text2: #404040; /* sekundaer */ + --text3: #6e6a62; /* tertiaer / meta */ + --text4: #a09a8e; /* Hint / Placeholder */ - --border: #232b29; - --border2: #2e3633; + --border: #d8d0bc; /* warme Papier-Linie */ + --border2: #b9b09a; /* staerker fuer Hover */ - --danger: #c87050; + --danger: #b54e30; --font-display: Krungthep, 'Archivo Black', sans-serif; --font-serif: 'Playfair Display', Georgia, serif; --font-mono: 'DM Mono', 'Menlo', monospace; --font-ui: 'DM Mono', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; - --sh-sm: 0 2px 8px rgba(0,0,0,0.32), 0 1px 3px rgba(0,0,0,0.22); - --sh-md: 0 10px 32px rgba(0,0,0,0.40), 0 2px 8px rgba(0,0,0,0.28); - --sh-lg: 0 24px 64px rgba(0,0,0,0.50), 0 8px 24px rgba(0,0,0,0.32); + /* Sanftere Schatten auf hellem Grund — warm-braeunlicher Ton statt schwarz */ + --sh-sm: 0 1px 3px rgba(70,55,30,0.08), 0 1px 2px rgba(70,55,30,0.04); + --sh-md: 0 6px 16px rgba(70,55,30,0.10), 0 2px 4px rgba(70,55,30,0.06); + --sh-lg: 0 16px 40px rgba(70,55,30,0.14), 0 4px 12px rgba(70,55,30,0.08); } * { box-sizing: border-box; } @@ -69,18 +70,18 @@ button:disabled { opacity: 0.4; cursor: not-allowed; } button.primary { background: var(--accent); border-color: var(--accent); - color: #0a1715; + color: #ffffff; font-weight: 500; - box-shadow: 0 4px 14px rgba(95,168,150,0.18); + box-shadow: 0 2px 8px rgba(47,93,84,0.18); display: inline-flex; align-items: center; gap: 7px; } button.primary:hover:not(:disabled) { - background: #6db5a4; - border-color: #6db5a4; - color: #0a1715; - box-shadow: 0 6px 20px rgba(95,168,150,0.26); + background: var(--accent-soft); + border-color: var(--accent-soft); + color: #ffffff; + box-shadow: 0 4px 12px rgba(47,93,84,0.26); } /* Pill-Variante — voll abgerundet, etwas mehr Padding fuer Hierarchie */ @@ -128,8 +129,9 @@ input::placeholder { color: var(--text4); } display: flex; flex-direction: column; height: 100vh; + /* Subtiler Petrol-Schein oben — Papier mit leichtem Sonnen-Touch */ background: - radial-gradient(ellipse at top, rgba(95,168,150,0.05) 0%, transparent 50%), + radial-gradient(ellipse at top, rgba(95,168,150,0.08) 0%, transparent 55%), var(--bg); } @@ -943,8 +945,8 @@ input::placeholder { color: var(--text4); } /* --- Dialog ---------------------------------------------------------- */ .dialog-bg { position: fixed; inset: 0; - background: rgba(0, 0, 0, 0.6); - backdrop-filter: blur(6px); + background: rgba(40, 30, 15, 0.35); + backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 10; padding: 24px;