/* ============================================================ shinpo IT Design-Tokens v1.0 (2026-08-20) Projekt: Design-System Rollout (Vikunja P35, BookStack Book 1516) Quelle Farbwerte: shinpo/Projekte/website-design/shinpo-farbschemas.html (WCAG 2.1 verifiziert, Stand 18.08.2026). Werte NICHT veraendern, ohne die Farbschemas-Referenz neu zu verifizieren. Nutzung: Schema per Klasse ODER data-Attribut auf / oder einem Container setzen: oder Schemata: hell | dunkel | bunt | elegant Ohne Schema-Angabe gilt :root = Schema Hell (Default). ============================================================ */ /* ---------- 1. Rohe Markenfarben (unveraenderlich) ---------- */ :root { --brand-magenta: #BA3067; /* Valentine's Kiss */ --brand-jade: #6BAF9C; --brand-gold: #EBB03D; /* Yakitori */ --brand-schwarz: #000000; /* Abgeleitete, WCAG-verifizierte Toene (siehe Farbschemas) */ --tone-dunkeljade: #3A7765; /* Fir, Text auf Hell 5.2:1 */ --tone-kupferocker: #996515; /* Cobre, Text auf Hell 5.0:1 */ --tone-hellmagenta: #D9598C; /* Flirty Rose, Text auf Dunkel 5.3:1 */ --tone-hellmint: #8FCDBB; /* Beach Breeze, auf Dunkel 10.6:1 */ --tone-beere: #7C1F45; /* Burgundy Orchid, Weiss-Text 9.8:1 */ --tone-tannenjade: #2C5A4D; /* Old Money, Weiss-Text 7.9:1 */ --tone-bronze: #7A5510; /* Autumn Leaf Brown, Weiss-Text 6.7:1 */ --tone-bordeaux: #5B2A3D; /* Windsor Wine, Weiss-Text 9.6:1 */ --tone-tiefjade: #3C574E; /* Midnight Clover, Weiss-Text 6.7:1 */ --tone-antikgold: #A17C35; /* Arlington Bronze */ --tone-taupe: #8A7E6C; /* Patches */ } /* ---------- 2. Typo-Skala (rem, Ratio 1.2, Inter) ---------- */ :root { --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: ui-monospace, 'SF Mono', Consolas, monospace; /* Modulare Skala, Basis 1rem, Ratio 1.2 (Minor Third) */ --text-xs: 0.694rem; /* 11.1px */ --text-sm: 0.833rem; /* 13.3px */ --text-base: 1rem; /* 16px */ --text-md: 1.2rem; /* 19.2px */ --text-lg: 1.44rem; /* 23px */ --text-xl: 1.728rem; /* 27.6px */ --text-2xl: 2.074rem; /* 33.2px */ --text-3xl: 2.488rem; /* 39.8px */ --text-4xl: 2.986rem; /* 47.8px */ --leading-tight: 1.15; /* Display/Headlines */ --leading-normal: 1.55; /* Fliesstext */ --tracking-display: -0.02em; /* ab --text-2xl aufwaerts (Audit P22) */ --tracking-caps: 0.06em; /* Uppercase-Labels */ } /* ---------- 3. Radii + Schatten-Rezept ---------- */ :root { --radius-sm: 6px; /* Badges, Inputs, kleine Chips */ --radius-md: 12px; /* Karten (verbindlicher Standard, Audit P18) */ --radius-lg: 16px; /* grosse Panels, Modals */ --radius-full: 9999px; /* Ein Schatten-Rezept fuer alle Auftritte: zweischichtig, weich */ --shadow-sm: 0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04); --shadow-md: 0 2px 6px rgba(0,0,0,.07), 0 6px 16px rgba(0,0,0,.06); --shadow-lg: 0 4px 12px rgba(0,0,0,.09), 0 12px 32px rgba(0,0,0,.10); } /* ---------- 4. Motion-Tokens ---------- */ :root { --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --dur-fast: 120ms; /* Hover-Farbe, kleine Zustandswechsel */ --dur-quick: 160ms; /* Press-Feedback, Fokus */ --dur-base: 200ms; /* Standard-Transitions, Crossfades */ --dur-slow: 250ms; /* Accordion, groessere Flaechen */ } /* ============================================================ 5. Semantische Tokens je Schema --color-primary Hauptakzent (Buttons, Links) --color-accent Sekundaerakzent --color-highlight Badges/Highlights (Gold-Familie) --color-ok/warn/fail Status (einheitlich fuer CFO+Ops, Audit P19) --surface-base/raised/border Flaechen --surface-hover-primary/-accent/-highlight Hover-/Infoflaechen --text-strong/muted/on-primary/on-accent Text ============================================================ */ /* ----- Schema 1: HELL (Default, Webseiten, helle Flaechen) ----- */ :root, .scheme-hell, [data-scheme="hell"] { --color-primary: #BA3067; /* auf Weiss 5.7:1 */ --color-accent: #3A7765; /* Dunkeljade, Text-tauglich 5.2:1 */ --color-highlight: #996515; /* Kupferocker, Hinweise/Zahlen 5.0:1 */ --color-ok: #3A7765; /* 5.2:1 auf Weiss */ --color-warn: #996515; /* 5.0:1 auf Weiss */ --color-fail: #BA3067; /* 5.7:1 auf Weiss */ --surface-base: #FFFFFF; --surface-alt: #F7F5F1; /* Alabaster: Karten, Sektionen */ --surface-raised: #F7F5F1; --surface-border: #E8E5DF; --surface-badge-jade: #6BAF9C; /* Flaeche mit dunkler Schrift 7.0:1 */ --surface-badge-gold: #EBB03D; /* Badge mit dunkler Schrift 9.2:1 */ --surface-hover-primary: #F9E7EF; /* Rose */ --surface-hover-accent: #ECF5F1; /* Mintweiss */ --surface-hover-highlight: #FDF4E3; /* Vanille */ --text-strong: #17181A; /* 17.8:1 */ --text-muted: #5C5F66; --text-on-primary: #FFFFFF; --text-on-accent: #FFFFFF; --text-on-badge: #17181A; /* auf Jade-/Gold-Original-Flaechen */ --selection-bg: #F9E7EF; --selection-text: #17181A; --focus-ring: #BA3067; } /* ----- Schema 2: DUNKEL (Dashboards, dunkle Flaechen) ----- */ .scheme-dunkel, [data-scheme="dunkel"] { --color-primary: #D9598C; /* Hellmagenta, auf Nachtschwarz 5.3:1 */ --color-accent: #6BAF9C; /* Jade Original, 7.5:1 */ --color-highlight: #EBB03D; /* Gold Original, 9.9:1 */ --color-ok: #6BAF9C; /* 7.5:1 */ --color-warn: #EBB03D; /* 9.9:1 */ --color-fail: #D9598C; /* 5.3:1 */ --surface-base: #0E0F12; /* Nachtschwarz */ --surface-alt: #1B1D22; /* Graphit: Karten, Panels */ --surface-raised: #1B1D22; --surface-border: #2A2D34; /* Schiefer */ --surface-badge-jade: #6BAF9C; --surface-badge-gold: #EBB03D; --surface-hover-primary: #2A2D34; --surface-hover-accent: #8FCDBB; /* Hellmint, 10.6:1 */ --surface-hover-highlight: #2A2D34; --text-strong: #F2EFE9; /* Porzellan, 16.7:1 */ --text-muted: #A8ACB3; /* Silbergrau, 8.4:1 */ --text-on-primary: #0E0F12; /* Akzent-Buttons: dunkle Schrift */ --text-on-accent: #0E0F12; --text-on-badge: #17181A; --selection-bg: #2A2D34; --selection-text: #F2EFE9; --focus-ring: #D9598C; } /* ----- Schema 3: BUNT-ANKER (fremde/kraeftige Untergruende) ----- */ .scheme-bunt, [data-scheme="bunt"] { --color-primary: #FFFFFF; /* auf dunklen bunten Flaechen */ --color-accent: #FFF6E9; /* Creme, warme Alternative */ --color-highlight: #FFF6E9; --color-ok: #2C5A4D; /* Tannenjade-Panel, Weiss-Text 7.9:1 */ --color-warn: #7A5510; /* Bronze-Panel, Weiss-Text 6.7:1 */ --color-fail: #7C1F45; /* Beere-Panel, Weiss-Text 9.8:1 */ --surface-base: transparent; /* Untergrund ist fremd */ --surface-alt: #7C1F45; /* Beere: Panels, Overlays */ --surface-raised: #2C5A4D; /* Tannenjade: Panels, Overlays */ --surface-border: rgba(255,255,255,.28); --surface-badge-jade: #2C5A4D; --surface-badge-gold: #7A5510; --surface-hover-primary: rgba(255,255,255,.12); --surface-hover-accent: rgba(255,255,255,.12); --surface-hover-highlight: rgba(255,255,255,.12); --text-strong: #FFFFFF; /* auf dunklen bunten Flaechen */ --text-muted: #FFF6E9; --text-on-primary: #000000; /* Schwarz auf hellen bunten Flaechen */ --text-on-accent: #000000; --text-on-badge: #FFFFFF; --selection-bg: rgba(255,255,255,.25); --selection-text: #FFFFFF; --focus-ring: #FFF6E9; } /* ----- Schema 4: ELEGANT (Print, Leder, Stoff, edle Dark-UI) ----- */ .scheme-elegant, [data-scheme="elegant"] { --color-primary: #A17C35; /* Antikgold: Praegung, Akzente */ --color-accent: #3C574E; /* Tiefjade */ --color-highlight: #A17C35; --color-ok: #3C574E; /* Tiefjade, Weiss-Text 6.7:1 */ --color-warn: #A17C35; /* Antikgold */ --color-fail: #5B2A3D; /* Bordeaux, Weiss-Text 9.6:1 */ --surface-base: #1E1A17; /* Espresso */ --surface-alt: #5B2A3D; /* Bordeaux: Panels */ --surface-raised: #3C574E; /* Tiefjade: Panels */ --surface-border: #3C574E; --surface-badge-jade: #3C574E; --surface-badge-gold: #A17C35; --surface-hover-primary: #5B2A3D; --surface-hover-accent: #3C574E; --surface-hover-highlight: #8A7E6C; /* Taupe: Details */ --text-strong: #F3EBDD; /* Elfenbein, 14.6:1 auf Espresso */ --text-muted: #8A7E6C; /* Taupe */ --text-on-primary: #FFFFFF; --text-on-accent: #FFFFFF; --text-on-badge: #FFFFFF; --selection-bg: #5B2A3D; --selection-text: #F3EBDD; --focus-ring: #A17C35; } /* ============================================================ 6. Basisstile (Audit P20: focus-visible + Selection ueberall) Bewusst minimal: nur Browser-Flaechen, keine Komponenten. ============================================================ */ ::selection { background: var(--selection-bg); color: var(--selection-text); } :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-sm); } /* Reduced Motion: globale Notbremse (Audit P1). Seiten duerfen gezielt feiner gaten; das hier ist das Sicherheitsnetz. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* FB2 Punkt 10 (2026-08-21): dezente Fuji-Silhouette (aus dem shinpo-Logo abgeleitet, flacher Gipfel, konkave Flanken) als subtiler Footer-Hintergrund auf allen Seiten. Max 6% Opacity, rechts unten angeschnitten, rein dekorativ. */ footer{position:relative;overflow:hidden} footer::after{ content:""; position:absolute; right:-7rem; bottom:-1.5rem; width:36rem; height:11rem; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 200'%3E%3Cpath fill='%23F2EFE9' d='M280 34 L360 34 Q470 110 640 200 L0 200 Q170 110 280 34 Z'/%3E%3C/svg%3E") no-repeat right bottom/contain; opacity:.06; pointer-events:none; }