/* ============================================================================ NARU Design Tokens Alle Werte zentral — keine Hardcodes in Komponenten. ============================================================================ */ :root { /* ----- Farbe: Basis ----- */ --color-bg: #FAF8F4; /* Off-White, warmer Unterton */ --color-bg-elevated: #F4F0E8; /* Sand für Karten */ --color-bg-deep: #EFE9DB; /* dritte, dunklere Sandstufe (Landingpage) */ --color-ink: #2A2A2E; /* Gedämpftes Anthrazit */ --color-ink-soft: #5A5A60; --color-ink-muted: #8A8A90; --color-line: #E8E2D5; /* Trennlinien, gebrochener Ton */ /* ----- Farbe: Akzent (sparsam!) ----- */ --color-accent: #8FA68E; /* Gedämpftes Salbeigrün */ --color-accent-soft: #B8C5B6; --color-accent-deep: #6B8169; --color-accent-ink: #2F3D2E; /* ----- Farbe: Domains (gedämpft, erdverbunden) ----- */ --color-health: #8FA68E; /* Salbeigrün */ --color-wealth: #A89B7F; /* Warmes Sand */ --color-relations: #8A8FA6; /* Gedämpftes Schiefer */ /* ----- Farbe: Domain-Tonstufen (Tag-Chips, Badges) ----- Übernommen aus journal/ beim Design-System-Merge (Juli 2026); -bg sind Alpha-Overlays und passen sich automatisch an Light/Dark an. */ --color-accent-bg: rgba(143, 166, 142, 0.10); --color-health-bg: rgba(143, 166, 142, 0.10); --color-health-deep: #6B8169; --color-wealth-bg: rgba(168, 155, 127, 0.10); --color-wealth-deep: #7A6E57; --color-relations-bg: rgba(138, 143, 166, 0.10); --color-relations-deep:#5F647A; /* ----- Farbe: Status ----- */ --color-error: #8B4040; --color-error-bg: rgba(139, 64, 64, 0.06); --color-error-border: rgba(139, 64, 64, 0.20); /* ----- Typografie ----- */ --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --text-xs: 0.8125rem; /* 13px — Hilfslabels */ --text-sm: 0.9375rem; /* 15px — UI default */ --text-base: 1.0625rem; /* 17px — Reading default */ --text-lg: 1.25rem; /* 20px */ --text-xl: 1.5rem; /* 24px */ --text-2xl: 2rem; /* 32px */ --text-3xl: 2.75rem; /* 44px */ --text-4xl: 3.5rem; /* 56px — große Editorial-Headlines (Journal-Artikel) */ --text-display:4.75rem; /* 76px — Hero-Headline (Landingpage) */ --leading-tight: 1.25; --leading-snug: 1.3; /* mehrzeilige Card-/Artikel-Titel */ --leading-normal: 1.5; --leading-relaxed: 1.7; --leading-loose: 1.8; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; /* ----- Spacing-Skala (strikt: 4/8/16/24/40/64/96/128) ----- */ --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; --space-5: 40px; --space-6: 64px; --space-7: 96px; --space-8: 128px; /* große Editorial-Abstände (Journal) */ /* ----- Radien ----- */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; /* große Bild-/Hero-Container (Journal) */ --radius-pill: 999px; /* ----- Schatten (diffus, tonal, niemals hart) ----- */ --shadow-soft: 0 1px 2px rgba(42, 42, 46, 0.04), 0 8px 24px rgba(42, 42, 46, 0.04); --shadow-lift: 0 2px 4px rgba(42, 42, 46, 0.05), 0 16px 40px rgba(42, 42, 46, 0.06); /* ----- Textur ----- Sehr feines, prozedurales Rauschen (SVG feTurbulence, kein Bild-Asset) auf --color-bg, gegen die rein flache Farbfläche im gesamten CSS — siehe BRAND_CHARACTER.md Punkt 4. Alpha steckt schon in der SVG selbst (feFuncA slope), damit hier ein einziger Wert die Intensität steuert; zum Zurückbauen reicht das Entfernen der drei background-image-Zeilen, die diesen Token referenzieren. */ --grain-overlay: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'200'%20height%3D'200'%3E%3Cfilter%20id%3D'n'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.85'%20numOctaves%3D'3'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20type%3D'saturate'%20values%3D'0'%2F%3E%3CfeComponentTransfer%3E%3CfeFuncA%20type%3D'linear'%20slope%3D'0.05'%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D'100%25'%20height%3D'100%25'%20filter%3D'url%28%23n%29'%2F%3E%3C%2Fsvg%3E"); /* ----- Bewegung ----- */ --ease-zen: cubic-bezier(0.22, 1, 0.36, 1); --ease-breath: cubic-bezier(0.45, 0, 0.55, 1); /* symmetrische S-Kurve, atmet */ --duration-quick: 220ms; --duration-calm: 480ms; --duration-breath: 700ms; --duration-long: 1200ms; /* langsame Fortschritts-/Fill-Übergänge (Landingpage) */ --duration-loader: 3600ms; /* Draw-in-Loop des Signature-Motivs, siehe .naru-loader in styles.css */ /* ----- Layout ----- */ --reading-width: 640px; --content-width: 1120px; } /* ============================================================================ DUNKLER MODUS ============================================================================ */ @media (prefers-color-scheme: dark) { :root { --color-bg: #1B1B1F; --color-bg-elevated: #232328; --color-ink: #ECE8E0; --color-ink-soft: #B8B4AC; --color-ink-muted: #807C75; --color-line: #2E2E33; --color-accent: #A8BFA6; --color-accent-soft: #4A5C49; --color-accent-deep: #C8DAC6; --color-accent-ink: #1B1B1F; --color-error: #C07878; --color-error-bg: rgba(192, 120, 120, 0.08); --color-error-border: rgba(192, 120, 120, 0.22); } } /* ============================================================================ MANUELLER THEME-OVERRIDE Ergänzt die automatische @media-Erkennung um ein erzwingbares data-theme- Attribut (z.B. für das Design-System-Vorschau-Toggle). Ändert nichts am bestehenden Verhalten, solange kein data-theme gesetzt wird. ============================================================================ */ :root[data-theme="dark"] { --color-bg: #1B1B1F; --color-bg-elevated: #232328; --color-ink: #ECE8E0; --color-ink-soft: #B8B4AC; --color-ink-muted: #807C75; --color-line: #2E2E33; --color-accent: #A8BFA6; --color-accent-soft: #4A5C49; --color-accent-deep: #C8DAC6; --color-accent-ink: #1B1B1F; --color-error: #C07878; --color-error-bg: rgba(192, 120, 120, 0.08); --color-error-border: rgba(192, 120, 120, 0.22); } :root[data-theme="light"] { --color-bg: #FAF8F4; --color-bg-elevated: #F4F0E8; --color-ink: #2A2A2E; --color-ink-soft: #5A5A60; --color-ink-muted: #8A8A90; --color-line: #E8E2D5; --color-accent: #8FA68E; --color-accent-soft: #B8C5B6; --color-accent-deep: #6B8169; --color-accent-ink: #2F3D2E; --color-error: #8B4040; --color-error-bg: rgba(139, 64, 64, 0.06); --color-error-border: rgba(139, 64, 64, 0.20); }