/* ========================================================================== Tenax Solutions — design tokens Derived from "Tenax Solutions _Lite Visual Identity" (Digital Mules, 2026; palette revised September 2026 to add Signal Deep). See brand-guide.md for the rules these tokens encode. Every token is prefixed --tenax- so this file can be dropped into an app that already has its own custom properties (the Wazuh dashboard, for one) without collisions. THEMING: dark is the default and applies unconditionally. Light is opt-in via . This deliberately does not follow prefers-color-scheme -- Tenax apps are dark surfaces, and a user's OS setting should not silently repaint a security console. Values are mirrored in tenax.tokens.json; tools/check-contrast.py asserts the two agree and that every documented contrast pair still passes. ========================================================================== */ :root { /* --------------------------------------------------------------------- Primitives — the five named brand colours, exactly as published. Signal Deep was added in the September 2026 revision as the accessibility variant of Signal Orange for light grounds. --------------------------------------------------------------------- */ --tenax-command-black: #0d1016; --tenax-sentinel-blue: #213d6b; --tenax-signal-orange: #f45a3c; --tenax-signal-deep: #b7442d; --tenax-secure-white: #f5f5f3; /* Tint ramps, sampled from the palette page's tint strips. Step 1 is the named colour; 2-5 are the printed tints, lightest last. */ --tenax-black-1: #0d1016; --tenax-black-2: #24272c; --tenax-black-3: #494b50; --tenax-black-4: #85878a; --tenax-black-5: #efeff0; --tenax-blue-1: #213d6b; --tenax-blue-2: #365076; --tenax-blue-3: #586d8d; --tenax-blue-4: #8f9db3; --tenax-blue-5: #c7ced9; --tenax-orange-1: #f45a3c; --tenax-orange-2: #f56a4f; --tenax-orange-3: #f6836c; --tenax-orange-4: #f9ac9d; --tenax-orange-5: #fcd5ce; --tenax-deep-1: #b7442d; --tenax-deep-2: #be5641; --tenax-deep-3: #c97261; --tenax-deep-4: #daa195; --tenax-deep-5: #ecd0ca; /* --------------------------------------------------------------------- Typography — Urbanist (display) + Sora (body), per the identity guide. The guide specifies no monospace face; the system stack is used for log and code output, which the SIEM needs. --------------------------------------------------------------------- */ --tenax-font-display: "Urbanist", system-ui, -apple-system, "Segoe UI", sans-serif; --tenax-font-body: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif; --tenax-font-mono: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace; --tenax-text-xs: 0.75rem; --tenax-text-sm: 0.875rem; --tenax-text-base: 1rem; --tenax-text-lg: 1.125rem; --tenax-text-xl: 1.25rem; --tenax-text-2xl: 1.5rem; --tenax-text-3xl: 2rem; --tenax-text-4xl: 2.5rem; --tenax-text-5xl: 3.25rem; --tenax-leading-tight: 1.15; --tenax-leading-snug: 1.35; --tenax-leading-normal: 1.6; /* The wordmark sets SOLUTIONS with wide tracking. The homepage design does NOT carry that into UI text — buttons, eyebrow chips and labels are all sentence case. Reserve wide tracking for dense-data table headers, where it earns its place, and never for body copy or buttons. */ --tenax-tracking-wide: 0.18em; --tenax-tracking-tight: -0.01em; --tenax-weight-regular: 400; --tenax-weight-medium: 500; --tenax-weight-semibold: 600; --tenax-weight-bold: 700; /* --------------------------------------------------------------------- Space, radius, elevation, motion — not covered by the "Lite" identity; defined here so apps stop inventing their own. --------------------------------------------------------------------- */ --tenax-space-1: 0.25rem; --tenax-space-2: 0.5rem; --tenax-space-3: 0.75rem; --tenax-space-4: 1rem; --tenax-space-5: 1.5rem; --tenax-space-6: 2rem; --tenax-space-7: 3rem; --tenax-space-8: 4rem; --tenax-radius-sm: 3px; --tenax-radius-md: 6px; --tenax-radius-lg: 10px; --tenax-radius-xl: 16px; /* cards and panels, per the homepage design */ --tenax-radius-full: 999px; /* buttons, chips and eyebrows are pills */ --tenax-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.35); --tenax-shadow-md: 0 4px 12px rgb(0 0 0 / 0.4); --tenax-shadow-lg: 0 12px 32px rgb(0 0 0 / 0.45); --tenax-transition: 140ms ease; /* --------------------------------------------------------------------- Semantic — DARK (default) --------------------------------------------------------------------- */ /* Sampled from the approved homepage design: page #0D1015, card fill #171A20, input fill #23262B. The card elevation is subtler than a straight jump to black-2; inputs and nested boxes sit at roughly black-2. */ --tenax-bg: #0d1016; --tenax-surface: #171a20; --tenax-surface-raised: #23262b; /* Two border weights: a hairline that separates without drawing attention, and a strong one for deliberate dividers. */ --tenax-border: #2f3237; --tenax-border-strong: #494b50; --tenax-text: #f5f5f3; --tenax-text-muted: #959799; /* interpolated black-4 -> black-5 so it clears 4.5:1 on --tenax-surface, not just on --tenax-bg */ --tenax-text-subtle: #85878a; /* black-4; large text and non-essential UI only */ /* Signal Orange is the brand accent. It is a TEXT/ICON/RULE colour, never a large fill, and never carries alert meaning — see brand-guide.md. */ --tenax-accent: #f45a3c; --tenax-accent-text: #f45a3c; --tenax-accent-hover: #f56a4f; --tenax-accent-quiet: #f6836c; --tenax-on-accent: #0d1016; /* dark text on an orange fill; white fails at 3.02:1 */ /* ACTION ORANGE -- Signal Orange darkened so it can be a fill. Not in the identity PDF, and not a rounding error: it appears independently in two design variants, as the solid button fill in V1 (#C34830) and as the gradient end stop in V3 (#C24830). One unit apart, arrived at through two different button treatments. It exists so a white label stays legible. White on --tenax-action is 4.90:1; white on --tenax-accent is 3.29:1 and fails AA. The one variant that used Signal Orange as a button fill (V2) has inaccessible buttons because of it. Do NOT "correct" this to --tenax-accent. tools/check-contrast.py will catch it, but the point is that the darkening is the whole reason it works. */ --tenax-action: #c24830; --tenax-on-action: #ffffff; /* Primary actions are a horizontal gradient pill, from Sentinel Blue to the action orange. Measured off the design at full resolution and cross-checked on three buttons of different widths, which agreed: 90deg, zero vertical variation. A white label clears AA across the entire ramp (worst 4.93:1). */ --tenax-accent-gradient-start: #213d6b; --tenax-accent-gradient-end: var(--tenax-action); --tenax-accent-gradient: linear-gradient( 90deg, var(--tenax-accent-gradient-start), var(--tenax-accent-gradient-end) ); --tenax-on-accent-gradient: #ffffff; --tenax-focus: #f45a3c; --tenax-focus-width: 2px; --tenax-focus-offset: 2px; --tenax-link: #f45a3c; /* Sentinel Blue is a SURFACE on dark, never a foreground: blue-on-black is 1.76:1. Use it as a filled field with --tenax-on-blue text. */ --tenax-blue-surface: #213d6b; --tenax-blue-surface-hover: #365076; --tenax-on-blue: #f5f5f3; /* Status — fills, borders, icons and validation text. Never used for brand emphasis, and brand orange never appears inside alerting UI. */ --tenax-success: #3fb950; --tenax-info: #58a6ff; --tenax-warning: #e3b341; --tenax-error: #ff6b63; --tenax-on-status: #0d1016; } /* ========================================================================== Semantic — LIGHT (opt-in: ) For printed reports, PDF exports and light-background documentation. ========================================================================== */ [data-theme="light"] { --tenax-bg: #f5f5f3; --tenax-surface: #ffffff; --tenax-surface-raised: #ffffff; --tenax-border: #dcdcd7; --tenax-border-strong: #b8b8b3; --tenax-text: #0d1016; --tenax-text-muted: #494b50; /* black-3; black-4 is only 3.3:1 here */ --tenax-text-subtle: #494b50; /* Signal Orange is only 3.02:1 on Secure White. The identity guide approves it on light grounds for bold headings 24px and up (AA large) and for fills and major accents -- so --tenax-accent stays the true brand colour. Smaller text, links, small icons and borders use Signal Deep (4.96:1), which the guide adds for exactly this job. */ --tenax-accent: #f45a3c; --tenax-accent-text: #b7442d; /* Signal Deep's lighter tints fail as text here (deep-2 is 4.18:1), so hover keeps the colour and is signalled with an underline instead. */ --tenax-accent-hover: #b7442d; --tenax-accent-quiet: #f6836c; --tenax-on-accent: #0d1016; /* V1's light sections use the same action orange as a solid button fill. */ --tenax-action: #c24830; --tenax-on-action: #ffffff; --tenax-accent-gradient-start: #213d6b; --tenax-accent-gradient-end: var(--tenax-action); --tenax-accent-gradient: linear-gradient( 90deg, var(--tenax-accent-gradient-start), var(--tenax-accent-gradient-end) ); --tenax-on-accent-gradient: #ffffff; --tenax-focus: #b7442d; --tenax-link: #b7442d; --tenax-blue-surface: #213d6b; --tenax-blue-surface-hover: #365076; --tenax-on-blue: #f5f5f3; /* Darkened so they pass on a white card as text, not just as fills. */ --tenax-success: #1a7f37; --tenax-info: #0a5aa8; --tenax-warning: #8a6300; --tenax-error: #c1290b; --tenax-on-status: #f5f5f3; --tenax-shadow-sm: 0 1px 2px rgb(13 16 22 / 0.08); --tenax-shadow-md: 0 4px 12px rgb(13 16 22 / 0.1); --tenax-shadow-lg: 0 12px 32px rgb(13 16 22 / 0.12); } /* ========================================================================== Minimal base layer. Opt in by adding class="tenax" to ; apps that only want the variables can ignore everything below. ========================================================================== */ .tenax { background: var(--tenax-bg); color: var(--tenax-text); font-family: var(--tenax-font-body); font-size: var(--tenax-text-base); line-height: var(--tenax-leading-normal); -webkit-font-smoothing: antialiased; } .tenax h1, .tenax h2, .tenax h3, .tenax h4 { font-family: var(--tenax-font-display); font-weight: var(--tenax-weight-bold); line-height: var(--tenax-leading-tight); letter-spacing: var(--tenax-tracking-tight); color: var(--tenax-text); margin: 0 0 var(--tenax-space-3); } .tenax :focus-visible { outline: var(--tenax-focus-width) solid var(--tenax-focus); outline-offset: var(--tenax-focus-offset); border-radius: var(--tenax-radius-sm); } @media (prefers-reduced-motion: reduce) { .tenax * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }