/* KOPIE von @sysinfra/design-system 1.4.0, v2/tokens.css (ADR-0061), Inhalt unveraendert (Stand 2026-10-15 gegen das Paket verglichen). Original: https://sysinfra.ch/brand/v1.4.0/v2/tokens.css Bleibt bewusst Kopie: Zammad setzt selbst die CSP "style-src 'self' 'unsafe-inline'; font-src 'self' data:" -- ein auf sysinfra.ch/brand wuerde geblockt. Neue Paketversion -> diese Datei ersetzen. */ /* * SYSINFRA V2 Design-Tokens (docs/v2/SPEC.md 3.1 bis 3.3, E-31). * * Einziger Ort mit Hex-Werten im V2-Code (D-10). Die Werte stehen hier selbst, * ohne Verweis auf Theme-Variablen von @sysinfra/design-system; Navy, Blau, * Hellblau und surface.dark.bg werden per Vitest gegen die Paket-Exporte * abgeglichen (tests/v2/unit/tokens-sync.test.ts), Kontraste in * tests/v2/unit/contrast.v2.test.ts. */ :root { /* Flaechen (D-11): genau 4 */ --ds-v2-surface-dark: #001155; --ds-v2-surface-dark-2: #0b1021; --ds-v2-surface-light: #ffffff; --ds-v2-surface-light-2: #f5f5f7; /* Text */ --ds-v2-ink: #1d1d1f; --ds-v2-ink-on-dark: #f5f5f7; /* Nachtrag 2026-10-13 (Redesign): #6e6e73 -> #515154 (7.91 auf Weiss, 7.26 auf #f5f5f7); Text ist ink, ink-2 nur fuer Metadaten */ --ds-v2-ink-2: #515154; --ds-v2-ink-2-on-dark: #a1a1a6; /* Akzent: Links und Primaer-Pill auf Hell; auf Dunkel weisse Pill */ --ds-v2-accent: #0445c8; --ds-v2-on-accent: #ffffff; --ds-v2-accent-on-dark: #6b8dff; --ds-v2-primary-on-dark: #ffffff; --ds-v2-primary-on-dark-ink: #001155; /* Raender, Status */ --ds-v2-border: #d2d2d7; --ds-v2-border-control: #86868b; --ds-v2-success: #1a7f37; /* Formularfehler (Kontaktseite, P5): Apple systemRed, hoher Kontrast; Magenta bleibt dem Logo */ --ds-v2-error: #d70015; /* Geraeterahmen (BILDSPRACHE.md 5, Nachtrag 2026-10-12): Graphit, ohne Logo */ --ds-v2-device-graphite: #2c2c2e; --ds-v2-device-graphite-2: #48484a; /* Magenta nur im Logo (D-11) */ --ds-v2-logo-magenta: #d41d56; /* Abstaende (D-09): nur diese Stufen */ --ds-v2-space-4: 4px; --ds-v2-space-8: 8px; --ds-v2-space-12: 12px; --ds-v2-space-14: 14px; --ds-v2-space-16: 16px; --ds-v2-space-22: 22px; --ds-v2-space-24: 24px; --ds-v2-space-32: 32px; --ds-v2-space-48: 48px; --ds-v2-space-64: 64px; --ds-v2-space-80: 80px; --ds-v2-space-112: 112px; --ds-v2-space-144: 144px; /* Raster und Breiten (D-06, D-07) */ --ds-v2-width-text: 980px; --ds-v2-width-tiles: 1200px; --ds-v2-measure: 680px; --ds-v2-measure-lead: 820px; --ds-v2-gutter: 22px; --ds-v2-gap: 24px; /* Nachtrag 2026-10-13: 112px Desktop, 64px mobil (vorher 144 / 80) */ --ds-v2-section-pad: clamp(var(--ds-v2-space-64), 8vw, var(--ds-v2-space-112)); --ds-v2-hero-pad-top-mobile: 48px; --ds-v2-radius-tile: var(--ds-v2-radius-card); /* Bild-Kachel im Hero (BILDSPRACHE.md R3, Nachtrag 2026-10-12) */ --ds-v2-radius-media: var(--ds-v2-radius-stage); /* Radien in drei Stufen (Nachtrag 2026-10-15, A bis Z): 12px Bedienelemente, Icon-Kacheln, Slots, Eingabefelder; 18px alle Karten; 24px Medien, Feature-Kacheln und Buehnen. radius-tile bleibt Alias von radius-card. */ --ds-v2-radius-control: 12px; --ds-v2-radius-card: 18px; --ds-v2-radius-stage: 24px; --ds-v2-radius-icon: 12px; --ds-v2-radius-pill: 980px; --ds-v2-nav-height: 48px; --ds-v2-localnav-height: 52px; --ds-v2-touch: 44px; /* Button-Hoehen (D-13 Nachtrag 2026-10-14): gross 50px (Hero, CtaBand), normal = --ds-v2-touch (44px), klein 28px sichtbar (Nav-Pill) */ --ds-v2-button-height-large: 50px; --ds-v2-button-height-small: 28px; /* Schrift (E-03): nur Inter; Mono nur in code/pre/kbd. --ds-v2-font-inter setzt next/font am (app/layout.tsx), also am selben Element wie :root; ohne die Variable greift die Systemschrift, nie ein zweites Inter. */ --ds-v2-font-sans: var(--ds-v2-font-inter, -apple-system), -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --ds-v2-font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Typo-Skala (D-01): genau 8 Stufen */ /* Nachtrag 2026-10-13 (REDESIGN-2026-10-12.md 3.1): Hero 88, Kachel 40, Lead 28, Karte 21 (mobil 19) */ --ds-v2-type-hero-size: clamp(40px, 6.4vw, 88px); --ds-v2-type-hero-lh: 1.04; --ds-v2-type-hero-track: -0.015em; --ds-v2-type-section-size: clamp(32px, 4vw, 56px); --ds-v2-type-section-lh: 1.07; --ds-v2-type-section-track: -0.015em; --ds-v2-type-tile-size: clamp(28px, 2.8vw, 40px); --ds-v2-type-tile-lh: 1.1; --ds-v2-type-tile-track: -0.015em; --ds-v2-type-lead-size: clamp(21px, 2vw, 28px); --ds-v2-type-lead-lh: 1.3; --ds-v2-type-card-size: 21px; --ds-v2-type-card-lh: 1.29; /* Karte mobil (unter 735px, type.css); D-01 zaehlt bei 1440px */ --ds-v2-type-card-size-mobile: 19px; --ds-v2-type-body-size: 17px; --ds-v2-type-body-lh: 1.47; --ds-v2-type-small-size: 14px; --ds-v2-type-small-lh: 1.43; --ds-v2-type-fine-size: 13px; --ds-v2-type-fine-lh: 1.38; --ds-v2-weight-regular: 400; --ds-v2-weight-nav: 500; --ds-v2-weight-strong: 600; /* Bewegung (E-12, Nachtrag Apple-Pass): Farbe mit ease; Erscheinen (opacity/transform) mit kritisch gedaempfter Feder als linear()-Kurve (Daempfung 1.0, 99,5 % nach 200ms); Druck-Feedback 100ms. */ --ds-v2-duration: 180ms; --ds-v2-ease: cubic-bezier(0.25, 0.1, 0.25, 1); --ds-v2-duration-motion: 200ms; --ds-v2-ease-spring: linear(0, 0.08, 0.239, 0.408, 0.557, 0.678, 0.77, 0.839, 0.89, 0.925, 0.95, 0.968, 0.98, 0.988, 0.994, 0.997, 1); --ds-v2-duration-press: 100ms; --ds-v2-press-scale: 0.97; --ds-v2-shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.12); /* Hover und Druck (Nachtrag 2026-10-15, A bis Z): keine Hebung, kein Schatten. Karten mit Bild: Bild 1.03; ohne Bild: 4 % ink in die Flaeche; Chevron 2px; Druck 0.985 Karte, 0.97 Pill. Schatten nur fuer Overlays. */ --ds-v2-hover-mix: 4%; --ds-v2-hover-scale-img: 1.03; --ds-v2-press-card: 0.985; --ds-v2-press-pill: 0.97; --ds-v2-chevron-shift: 2px; /* 3D-Moment (Reveal3D): Ebenen-Explosion und Staffelung */ --ds-v2-reveal-duration: 900ms; --ds-v2-reveal-stagger: 60ms; /* Sticky-Versatz unter GlobalNav und LocalNav */ --ds-v2-sticky-top: calc(var(--ds-v2-nav-height) + var(--ds-v2-localnav-height) + var(--ds-v2-space-24)); }