/* * Zeno design tokens, v2: the Citium Software brand. * Source of truth: https://git.citiumsoftware.com/Citium/citium-brand-kit (README.md). Copy this file verbatim into * a product; do not edit a copy. Change the kit and re-copy instead. * * Brand: Citium Software design system, tokens.json v2 (pine, sage, stone, * charcoal, clay, forest). Values marked "derived" are not in the brand * tokens; they fill roles the brand leaves open (hover states, dark surfaces, * status colours) and are checked for contrast in README.md. * * The SEMANTIC names (--zt-bg, --zt-text, --zt-primary ...) are unchanged * from v1, so products that consume them pick up the new look by swapping * this file. Components consume semantic tokens only, never the raw palette. * * Theming: light by default; dark follows prefers-color-scheme unless the * page sets or . * A `.dark` / `.light` class on works the same as data-theme. */ :root { /* ---------- Raw palette: Citium Software ---------- */ --citium-pine: #0f6b57; /* primary: brand symbol, actions, key highlights */ --citium-sage: #a7c7b7; /* accent: supporting surfaces, actions on dark */ --citium-stone: #edede8; /* background */ --citium-charcoal: #1b1b1b; /* text */ --citium-clay: #c9b8a7; /* neutral accents; never text, never pine on clay */ --citium-forest: #092723; /* dark ground: shells, sign-in, dark mode */ --citium-white: #ffffff; --citium-pine-tint: #dce8e1; /* supporting surfaces, selected rows */ --citium-ink-muted: #3a3a37; /* secondary body text */ --citium-ink-subtle:#52524d; /* captions, labels, metadata */ --citium-rule: #c9c9c2; /* dividers only, never a control border */ /* Derived */ --citium-pine-700: #0b5545; /* pine hover */ --citium-pine-800: #08443a; /* pine active */ --citium-stone-50: #f6f6f2; /* zebra rows, hover on white */ --citium-stone-200: #e2e2dc; /* wells, inline code */ --citium-control: #85857e; /* control borders: 3.8:1 on white, 3.2:1 on stone */ --citium-clay-tint: #f3ede6; /* neutral status chips */ --citium-sage-300: #c4d8cd; /* secondary text on forest (brand text-muted, dark) */ --citium-forest-2: #0e302b; /* dark surface */ --citium-forest-3: #133a34; /* dark raised surface */ --citium-forest-line:#24493f;/* dark dividers */ --citium-forest-control:#4f7d70; /* dark control borders, 3.3:1 on forest */ --citium-warning: #8a4b0f; --citium-danger: #b42318; --citium-danger-tint:#fbe9e7; /* ---------- Semantic tokens: LIGHT (default) ---------- */ --zt-bg: var(--citium-stone); --zt-bg-subtle: var(--citium-stone-50); --zt-bg-muted: var(--citium-stone-200); --zt-bg-inverse: var(--citium-forest); --zt-surface: var(--citium-white); --zt-surface-raised: var(--citium-white); --zt-border: var(--citium-rule); --zt-border-strong: var(--citium-control); --zt-text: var(--citium-charcoal); --zt-text-secondary: var(--citium-ink-subtle); --zt-text-inverse: var(--citium-stone); --zt-text-link: var(--citium-pine); --zt-primary: var(--citium-pine); --zt-primary-hover: var(--citium-pine-700); --zt-primary-active: var(--citium-pine-800); --zt-on-primary: var(--citium-white); --zt-primary-soft: var(--citium-pine-tint); --zt-on-primary-soft: var(--citium-pine-700); --zt-accent: var(--citium-sage); --zt-accent-text: var(--citium-pine); --zt-on-accent: var(--citium-charcoal); --zt-success: var(--citium-pine); --zt-success-soft: var(--citium-pine-tint); --zt-warning: var(--citium-warning); --zt-warning-soft: var(--citium-clay-tint); --zt-danger: var(--citium-danger); --zt-danger-soft: var(--citium-danger-tint); --zt-on-danger: var(--citium-white); --zt-info: var(--citium-ink-muted); --zt-info-soft: var(--citium-stone-200); /* The app shell (sidebar, top bar, sign-in ground) is forest in both themes. */ --zt-shell-bg: var(--citium-forest); --zt-shell-text: var(--citium-stone); --zt-shell-text-muted:var(--citium-sage-300); --zt-shell-hover: rgba(237, 237, 232, 0.08); --zt-shell-line: rgba(237, 237, 232, 0.10); --zt-shell-accent: var(--citium-sage); /* The flat mark colour on the current ground (see .zeno-mark). */ --zt-mark: var(--citium-pine); --zt-code-bg: var(--citium-forest); --zt-code-text: var(--citium-stone); --zt-code-comment: #8aa89a; --zt-code-keyword: var(--citium-sage); --zt-code-string: var(--citium-clay); --zt-code-number: #e3cf9a; --zt-inline-code-bg: var(--citium-stone-200); --zt-focus-ring: 0 0 0 3px rgba(15, 107, 87, 0.35); /* ---------- Typography: Inter everywhere ---------- */ --zt-font-display: "Inter Variable", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --zt-font-text: "Inter Variable", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --zt-font-mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Brand hierarchy: display 56/60, h1 40/44, h2 32/40, h3 20/28, body-large 18/30, body 15/24, caption 13/20, navigation 15 medium. */ --zt-text-xs: 0.75rem; /* 12 eyebrow */ --zt-text-sm: 0.8125rem; /* 13 caption */ --zt-text-base: 0.9375rem; /* 15 body */ --zt-text-lg: 1.125rem; /* 18 body large */ --zt-text-xl: 1.25rem; /* 20 heading 3 */ --zt-text-2xl: 1.5rem; /* 24 app page title */ --zt-text-3xl: 2rem; /* 32 heading 2 */ --zt-text-4xl: 2.5rem; /* 40 heading 1 */ --zt-text-5xl: 3.5rem; /* 56 display */ --zt-text-6xl: 3.5rem; --zt-text-display: clamp(2.5rem, 1.8rem + 2.6vw, 3.5rem); --zt-leading-tight: 1.1; --zt-leading-snug: 1.3; --zt-leading-body: 1.6; --zt-tracking-display: -0.025em; --zt-tracking-heading: -0.015em; --zt-tracking-eyebrow: 0.2em; --zt-tracking-descriptor: 0.4em; --zt-weight-light: 300; --zt-weight-regular: 400; --zt-weight-medium: 500; --zt-weight-semibold: 600; --zt-weight-bold: 700; --zt-weight-extrabold:800; /* ---------- Spacing (4px base; brand steps 8/16/24/40/72/96) ---------- */ --zt-space-0: 0; --zt-space-1: 0.25rem; /* 4 */ --zt-space-2: 0.5rem; /* 8 */ --zt-space-3: 0.75rem; /* 12 */ --zt-space-4: 1rem; /* 16 */ --zt-space-5: 1.5rem; /* 24 */ --zt-space-6: 2rem; /* 32 */ --zt-space-7: 2.5rem; /* 40 */ --zt-space-8: 4.5rem; /* 72 */ --zt-space-9: 6rem; /* 96 */ --zt-space-10: 8rem; /* 128 */ --zt-container: 72rem; --zt-container-text: 42rem; --zt-gutter: 1rem; /* ---------- Radius: corners stay small ---------- */ --zt-radius-sm: 2px; /* badges, chips, image blocks */ --zt-radius-md: 4px; /* buttons, inputs, cards, callouts */ --zt-radius-lg: 6px; /* dialogs, large frames */ --zt-radius-xl: 6px; --zt-radius-pill: 999px; /* switches and avatars only */ /* ---------- Depth: interfaces stay flat ---------- */ --zt-shadow-none: none; --zt-shadow-sm: none; --zt-shadow-md: none; --zt-shadow-lg: none; --zt-overlay: rgba(9, 39, 35, 0.6); /* ---------- Motion: subtle and functional ---------- */ --zt-ease: cubic-bezier(0.2, 0.7, 0.2, 1); --zt-duration-fast: 120ms; --zt-duration: 200ms; /* ---------- Icons ---------- */ --zt-icon-stroke: 1.5; --zt-icon-sm: 16px; --zt-icon-md: 20px; --zt-icon-lg: 24px; color-scheme: light; } /* ---------- Semantic tokens: DARK ---------- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not(.light) { --zt-bg: var(--citium-forest); --zt-bg-subtle: #0c2c27; --zt-bg-muted: var(--citium-forest-3); --zt-bg-inverse: var(--citium-stone); --zt-surface: var(--citium-forest-2); --zt-surface-raised: var(--citium-forest-3); --zt-border: var(--citium-forest-line); --zt-border-strong: var(--citium-forest-control); --zt-text: var(--citium-stone); --zt-text-secondary: var(--citium-sage-300); --zt-text-inverse: var(--citium-charcoal); --zt-text-link: var(--citium-sage); --zt-primary: var(--citium-sage); --zt-primary-hover: #bcd6c8; --zt-primary-active: #cfe2d8; --zt-on-primary: var(--citium-charcoal); --zt-primary-soft: rgba(167, 199, 183, 0.14); --zt-on-primary-soft: #cfe2d8; --zt-accent: var(--citium-sage); --zt-accent-text: var(--citium-sage); --zt-on-accent: var(--citium-charcoal); --zt-success: var(--citium-sage); --zt-success-soft: rgba(167, 199, 183, 0.12); --zt-warning: #e3b77a; --zt-warning-soft: rgba(227, 183, 122, 0.12); --zt-danger: #f0a39b; --zt-danger-soft: rgba(240, 163, 155, 0.12); --zt-on-danger: var(--citium-charcoal); --zt-info: var(--citium-sage-300); --zt-info-soft: rgba(196, 216, 205, 0.10); --zt-shell-bg: #061c19; --zt-mark: var(--citium-stone); --zt-code-bg: #061c19; --zt-inline-code-bg: var(--citium-forest-3); --zt-focus-ring: 0 0 0 3px rgba(167, 199, 183, 0.5); --zt-overlay: rgba(0, 0, 0, 0.6); color-scheme: dark; } } :root[data-theme="dark"], :root.dark { --zt-bg: var(--citium-forest); --zt-bg-subtle: #0c2c27; --zt-bg-muted: var(--citium-forest-3); --zt-bg-inverse: var(--citium-stone); --zt-surface: var(--citium-forest-2); --zt-surface-raised: var(--citium-forest-3); --zt-border: var(--citium-forest-line); --zt-border-strong: var(--citium-forest-control); --zt-text: var(--citium-stone); --zt-text-secondary: var(--citium-sage-300); --zt-text-inverse: var(--citium-charcoal); --zt-text-link: var(--citium-sage); --zt-primary: var(--citium-sage); --zt-primary-hover: #bcd6c8; --zt-primary-active: #cfe2d8; --zt-on-primary: var(--citium-charcoal); --zt-primary-soft: rgba(167, 199, 183, 0.14); --zt-on-primary-soft: #cfe2d8; --zt-accent: var(--citium-sage); --zt-accent-text: var(--citium-sage); --zt-on-accent: var(--citium-charcoal); --zt-success: var(--citium-sage); --zt-success-soft: rgba(167, 199, 183, 0.12); --zt-warning: #e3b77a; --zt-warning-soft: rgba(227, 183, 122, 0.12); --zt-danger: #f0a39b; --zt-danger-soft: rgba(240, 163, 155, 0.12); --zt-on-danger: var(--citium-charcoal); --zt-info: var(--citium-sage-300); --zt-info-soft: rgba(196, 216, 205, 0.10); --zt-shell-bg: #061c19; --zt-mark: var(--citium-stone); --zt-code-bg: #061c19; --zt-inline-code-bg: var(--citium-forest-3); --zt-focus-ring: 0 0 0 3px rgba(167, 199, 183, 0.5); --zt-overlay: rgba(0, 0, 0, 0.6); color-scheme: dark; } /* ---------- Forced light ---------- * Surfaces that stay light whatever the theme (the sign-in card) re-declare * the light semantic set, so nested fills, badges and alerts stay light too. */ .zt-force-light, .zeno-auth-card { --zt-bg: var(--citium-stone); --zt-bg-subtle: var(--citium-stone-50); --zt-bg-muted: var(--citium-stone-200); --zt-bg-inverse: var(--citium-forest); --zt-surface: var(--citium-white); --zt-surface-raised: var(--citium-white); --zt-border: var(--citium-rule); --zt-border-strong: var(--citium-control); --zt-text: var(--citium-charcoal); --zt-text-secondary: var(--citium-ink-subtle); --zt-text-inverse: var(--citium-stone); --zt-text-link: var(--citium-pine); --zt-primary: var(--citium-pine); --zt-primary-hover: var(--citium-pine-700); --zt-primary-active: var(--citium-pine-800); --zt-on-primary: var(--citium-white); --zt-primary-soft: var(--citium-pine-tint); --zt-on-primary-soft: var(--citium-pine-700); --zt-accent: var(--citium-sage); --zt-accent-text: var(--citium-pine); --zt-on-accent: var(--citium-charcoal); --zt-success: var(--citium-pine); --zt-success-soft: var(--citium-pine-tint); --zt-warning: var(--citium-warning); --zt-warning-soft: var(--citium-clay-tint); --zt-danger: var(--citium-danger); --zt-danger-soft: var(--citium-danger-tint); --zt-on-danger: var(--citium-white); --zt-info: var(--citium-ink-muted); --zt-info-soft: var(--citium-stone-200); /* The app shell (sidebar, top bar, sign-in ground) is forest in both themes. */ --zt-shell-bg: var(--citium-forest); --zt-shell-text: var(--citium-stone); --zt-shell-text-muted:var(--citium-sage-300); --zt-shell-hover: rgba(237, 237, 232, 0.08); --zt-shell-line: rgba(237, 237, 232, 0.10); --zt-shell-accent: var(--citium-sage); --zt-on-danger: var(--citium-white); --zt-mark: var(--citium-pine); --zt-inline-code-bg: var(--citium-stone-200); --zt-focus-ring: 0 0 0 3px rgba(15, 107, 87, 0.35); color-scheme: light; }