/* ========================================================================== Azimuth Tokens — Additive CSS Foundation Layer UnterhaltsPlan Design System · TASK-022 STATUS: additive foundation layer. NOT a migration. -------------------------------------------------------------------------- - This file ONLY declares CSS Custom Properties on :root. - It contains NO element styles, NO body styles, NO button styles, NO layout styles and overrides NO existing class. - It is therefore SAFE even if it is ever loaded on any page: it changes nothing visually until a rule explicitly opts in via var(--az-*). - It is currently linked ONLY by /azimuth/ and /azimuth/admin/. It is intentionally NOT auto-included on any product page. - All custom properties are namespaced `--az-` to avoid colliding with product tokens (inventory Risk #2: --color-*, --bg, --accent, --space-* mean different things per context). VALUE SOURCES (real code, not invented): - Brand palette / radius / shadow / status .... azimuth/styles.css :root (derived from real code in TASK-019/020 from the dominant brand system) - Spacing scale ............................... css/style.css (only explicit scale) - Focus ring .................................. css/a11y.css - Legacy blue (documented only) ............... css/style.css (B2C/calculator) Where a token is a recommended harmonisation step that is NOT literally present in the code, it is marked `[recommended]`. MIGRATION RULE: no Big-Bang migration. Existing product pages are NOT migrated. See docs/azimuth-styleguide.md (TASK-022 section) and the "Migration Notes" block at the bottom of this file. ========================================================================== */ :root { /* ====================================================================== 1 · COLOR TOKENS ====================================================================== */ /* --- Backgrounds / surfaces (real: dominant brand) --- */ --az-bg: #F7F4EF; /* real: --bg (warm off-white) */ --az-surface: #FFFFFF; /* real: --card */ --az-paper: #FDFCF8; /* real: FK / app paper */ --az-paper-warm: #F0EDE8; /* real: --hover-bg (warm paper tint) */ --az-hover: #F0EDE8; /* real: --hover-bg */ /* --- Forest green (real: brand accent ramp) --- */ --az-forest-950: #152A09; /* real: az-btn-primary :hover */ --az-forest-900: #1E3A0F; /* real: --accent */ --az-forest-800: #2D5016; /* real: --accent-mid */ --az-forest-700: #3A6B1C; /* [recommended] mid step */ --az-forest-600: #4C7A28; /* [recommended] mid step */ --az-forest-100: #E8F0DF; /* real: --accent-light */ --az-green-soft: #A8C5A0; /* real: --accent-green */ --az-forest-soft: #A8C5A0; /* alias of --az-green-soft (legacy) */ --az-sage: #C5DDB5; /* real: border-strong / info border */ /* --- Text --- */ --az-text: #1A1A18; /* real: --ink */ --az-text-secondary: #4A4A42; /* [recommended] between ink & muted */ --az-text-muted: #6B6B60; /* real: --muted */ --az-muted: #6B6B60; /* alias of --az-text-muted (legacy) */ /* --- Borders --- */ --az-border: #E5E2DA; /* real: --border */ --az-border-strong: #C5DDB5; /* real: forms / featured border */ /* --- Status (single key colour) --- */ --az-success: #2E7D32; /* real: status success ink */ --az-success-soft: #E8F5E9; /* real: status success bg */ --az-warning: #F5D26A; /* real: disclaimer / warning border */ --az-warning-soft: #FFFBEB; /* real: --color-disclaimer-bg / warn */ --az-danger: #DC2626; /* real: --color-error / danger */ --az-danger-soft: #FEF2F2; /* real: warning-banner bg / danger bg */ --az-info: #2D5016; /* real: brand info ink (forest-mid) */ --az-info-soft: #E8F0DF; /* real: brand info bg (forest-100) */ /* --- Status (full triplet — used by azimuth/styles.css, keep stable) --- */ --az-success-bg: #E8F5E9; --az-success-ink: #2E7D32; --az-success-bd: #A5D6A7; --az-info-bg: #E8F0DF; --az-info-ink: #2D5016; --az-info-bd: #C5DDB5; --az-warning-bg: #FFFBEB; --az-warning-ink: #78580A; --az-warning-bd: #F5D26A; --az-danger-bg: #FEF2F2; --az-danger-ink: #B42318; --az-danger-bd: #DC2626; --az-neutral-bg: #F3F3F0; --az-neutral-ink: #6B6B60; --az-neutral-bd: #E5E2DA; --az-future-bg: #F9F9F6; --az-future-ink: #9B9B90; --az-future-bd: #E5E2DA; /* --- State / lifecycle markers --- */ --az-noindex: #9B9B90; /* real: noindex/future badge family */ --az-future: #9B9B90; /* real: future badge ink */ --az-local-only: #854D0E; /* real: local-only badge text */ --az-local-only-bg: #FEF9C3; /* real: local-only badge bg */ /* --- Legacy blue (B2C / calculator — DOCUMENTED ONLY, do NOT migrate) --- */ --az-legacy-blue: #1A56DB; /* real: css/style.css --color-primary */ --az-legacy-blue-dark: #1440A8; /* real: css/style.css --color-primary-dark */ --az-legacy-green: #0E9F6E; /* real: css/style.css --color-secondary */ /* ====================================================================== 2 · TYPOGRAPHY TOKENS ====================================================================== */ /* Reality: external Google Fonts were removed project-wide (TASK-015), so real rendering is the system fallback. Serif evokes the former display serif via system serif stack. */ --az-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --az-font-serif: Georgia, "Times New Roman", "Iowan Old Style", serif; --az-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Type scale — harmonised from real sizes found across the code (body 16px; small .8/.875rem; h-levels 17–32px). */ --az-text-xs: 12px; /* real: badges / kickers / labels */ --az-text-sm: 13px; /* real: ~.8rem secondary / table text */ --az-text-base: 16px; /* real: body / inputs (>=16px: no iOS zoom) */ --az-text-lg: 17px; /* real: az-section h3 / lead */ --az-text-xl: 20px; /* real: topbar logo / calculator h2 */ --az-text-2xl: 24px; /* real: logo / result-amount strong */ --az-text-3xl: 26px; /* real: az-section h2 */ --az-text-4xl: 32px; /* real: teaser-price strong (2rem) */ --az-line-tight: 1.1; /* real: KPI / display headings */ --az-line-normal: 1.4; /* real: badges / compact UI */ --az-line-relaxed: 1.6; /* real: body line-height */ --az-weight-normal: 400; --az-weight-medium: 500; /* real: labels */ --az-weight-semibold: 600; /* real: buttons / legends */ --az-weight-bold: 700; /* real: logo / headings */ /* ====================================================================== 3 · SPACING TOKENS Real explicit scale = css/style.css: 4 8 12 16 24 32 48. 5/10/16/20 are [recommended] additive in-between/extension steps. ====================================================================== */ --az-space-1: 4px; /* real */ --az-space-2: 8px; /* real */ --az-space-3: 12px; /* real */ --az-space-4: 16px; /* real */ --az-space-5: 20px; /* [recommended] */ --az-space-6: 24px; /* real */ --az-space-8: 32px; /* real */ --az-space-10: 40px; /* [recommended] */ --az-space-12: 48px; /* real */ --az-space-16: 64px; /* [recommended] */ --az-space-20: 80px; /* [recommended] */ /* ====================================================================== 4 · RADIUS TOKENS Real variants in code span 6–24px; recommended base = apps scale. ====================================================================== */ --az-radius-sm: 6px; /* real: apps / a11y skip-link */ --az-radius-md: 10px; /* real: apps base */ --az-radius-lg: 16px; /* real: cards / sections */ --az-radius-xl: 24px; /* real: largest variant in code */ --az-radius-2xl: 32px; /* [recommended] extra-large surfaces */ --az-radius-pill: 999px; /* real: badges / toggles */ /* ====================================================================== 5 · SHADOW TOKENS (real: apps + marketing card) ====================================================================== */ --az-shadow-soft: 0 1px 3px rgba(0,0,0,0.08); /* real: apps sm */ --az-shadow-card: 0 2px 12px rgba(0,0,0,0.05); /* real: card */ --az-shadow-elevated: 0 6px 28px rgba(0,0,0,0.10); /* real: hover/md */ --az-shadow-modal: 0 20px 60px rgba(0,0,0,0.18); /* [recommended] */ /* Aliases used by azimuth/styles.css — keep stable */ --az-shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --az-shadow-md: 0 6px 28px rgba(0,0,0,0.10); /* ====================================================================== 6 · BORDER TOKENS ====================================================================== */ --az-border-width: 1px; /* real default */ --az-border-subtle: 1px solid #E5E2DA; /* real: --border */ --az-border-default: 1.5px solid #E5E2DA; /* real: forms */ /* ====================================================================== 7 · FOCUS TOKENS (real: css/a11y.css) ====================================================================== */ --az-focus-ring: 3px solid #1E3A0F; /* real: a11y outline */ --az-focus-offset: 2px; /* real: a11y outline-offset */ --az-focus: 3px solid #1E3A0F; /* alias used by styles.css */ /* ====================================================================== 8 · STATUS / SEMANTIC ALERT TOKENS (single-purpose semantic surfaces, derived from real status palette) ====================================================================== */ --az-alert-info-bg: #E8F0DF; /* real: info bg */ --az-alert-info-text: #2D5016; /* real: info ink */ --az-alert-warning-bg: #FFFBEB; /* real: warning/disclaimer bg */ --az-alert-warning-text:#78580A; /* real: warning ink */ --az-alert-danger-bg: #FEF2F2; /* real: danger bg */ --az-alert-danger-text: #B42318; /* real: danger ink */ /* ====================================================================== 9 · COMPONENT SEMANTIC TOKENS (map raw tokens to component intent — derived from azimuth/styles.css) ====================================================================== */ --az-button-primary-bg: #1E3A0F; /* real: az-btn-primary bg */ --az-button-primary-text: #FFFFFF; /* real: az-btn-primary text */ --az-card-bg: #FFFFFF; /* real: az-card bg */ --az-card-border: #E5E2DA; /* real: az-card border */ --az-badge-success-bg: #E8F5E9; /* real: success badge bg */ --az-badge-success-text: #2E7D32; /* real: success badge text */ --az-badge-warning-bg: #FFFBEB; /* real: warning badge bg */ --az-badge-warning-text: #78580A; /* real: warning badge text */ /* ====================================================================== 10 · APP / ADMIN / B2C SEMANTIC HINTS (comments only — no values) ---------------------------------------------------------------------- - B2C marketing & Unterhaltsrechner (css/style.css) currently use the LEGACY BLUE system (--az-legacy-blue #1A56DB). It is documented here only and is intentionally NOT migrated in this task. - Apps (app/familienkalender, app/kindesunterhalt-brief) follow the FOREST brand system that these --az-* tokens harmonise. - /azimuth/admin/ future patterns mirror these values under the --aza-* namespace; new admin work should consume Azimuth tokens. - Azimuth canonical brand = forest-green system above. ====================================================================== */ /* ====================================================================== 11 · BREAKPOINT NOTES (comments only — CSS custom properties cannot be used inside @media queries; documented here for consistency) ---------------------------------------------------------------------- --az-bp-sm : 480px (real: css/style.css min-width 480) --az-bp-md : 640px (real: azimuth max-width 640) --az-bp-lg : 960px (real: azimuth shell collapse) --az-bp-xl : 1280px (real: azimuth max content width) QA targets: desktop 1280px, mobile 390px — no horizontal overflow. ====================================================================== */ /* ====================================================================== 12 · Z-INDEX NOTES (comments only — keep a single documented scale) ---------------------------------------------------------------------- base/content .... 0 sticky topbar ... 50 (real: azimuth .az-topbar) skip-link ....... 9999 (real: css/a11y.css .skip-link) Recommended future scale: dropdown 1000, drawer 1100, modal 1200, toast 1300, skip-link stays highest. ====================================================================== */ /* ====================================================================== 13 · DARK SURFACE TOKENS (TASK-029 — additive, namespaced) ---------------------------------------------------------------------- Real dark areas in the product today (NOT migrated by this task): - homepage .hero ............. background var(--accent) #1E3A0F - homepage footer ............ background #141412 (near-black) - #bottom-cta bands .......... background var(--accent) #1E3A0F (werkzeuge / ratgeber / kindesunterhalt-brief / ueber-uns) Standard --az tokens already cover the forest surface (--az-forest-900) and the soft accent (--az-green-soft), but NOT the near-black footer, the muted-white text, the translucent white borders/overlays, nor a focus ring that is visible on dark (the a11y ring is forest #1E3A0F → invisible on a dark ground). These dark tokens fill exactly that gap so the .az-*--dark / .az-*-on-dark component variants stay var(--az-*)- driven. Additive & safe: :root custom properties only; overrides nothing; changes nothing until a rule opts in via var(--az-dark-*). ====================================================================== */ --az-dark-bg: #1E3A0F; /* real: --accent (hero / #bottom-cta) */ --az-dark-bg-deep: #141412; /* real: homepage footer (near-black) */ --az-dark-surface: rgba(255,255,255,0.06); /* [recommended] raised card on dark */ --az-dark-text: #FFFFFF; /* real: hero / cta / footer-logo text */ --az-dark-text-muted: rgba(255,255,255,0.72); /* [recommended] harmonised 0.55–0.78 */ --az-dark-accent: #A8C5A0; /* real: --accent-green (= --az-green-soft)*/ --az-dark-border: rgba(255,255,255,0.22); /* [recommended] harmonised 0.2–0.3 */ --az-dark-border-soft: rgba(255,255,255,0.12); /* real: .trust-bar border-top */ --az-dark-overlay: rgba(255,255,255,0.10); /* real: hero-ghost / hero-badge bg */ --az-dark-overlay-hover: rgba(255,255,255,0.18); /* real: hero-ghost / cta-outline :hover */ --az-dark-link: rgba(255,255,255,0.72); /* real: footer link (muted) */ --az-dark-link-hover: #FFFFFF; /* real: footer link :hover (white) */ --az-dark-button-bg: #FFFFFF; /* real: .btn-hero-primary / .btn-cta bg */ --az-dark-button-text: #1E3A0F; /* real: those buttons color var(--accent) */ --az-dark-button-bg-hover: #F0EDE8; /* real: those buttons :hover #f0ede8 */ --az-dark-focus: 3px solid #FFFFFF; /* needed: forest a11y ring invisible dark */ /* ====================================================================== 14 · MIGRATION NOTES (comments only) ---------------------------------------------------------------------- - This token layer is ADDITIVE. It does not migrate any product page. - New pages MAY consume --az-* (colors, spacing, radius, shadow, focus). - Existing pages are NOT auto-migrated; migrate only per explicit task, additive & namespaced, page by page (no Big-Bang). - Apps: do not change app logic, element IDs or JS selectors when later applying tokens (visual-only, separate task). - Unterhaltsrechner: especially protected — no form IDs / JS selector changes; visual migration only in a later separate task. - Admin future implementation should use Azimuth tokens from the start. - Legacy blue (--az-legacy-*) is documented, NOT a migration target here. - Dark tokens (--az-dark-*, §13, TASK-029) are additive only; the existing dark areas (homepage hero/footer, #bottom-cta) are NOT migrated in TASK-029 — only future-safe variants were prepared. See docs/azimuth-styleguide.md → "TASK-022 · Token Layer". ====================================================================== */ }