:root { /* ── Ink (text / foreground) ─────────────────────────── x.ai-inspired: pure white on pure black, with soft neutral greys for secondary copy. */ --color-ink: #ffffff; --color-ink-subtle: #a3a3a3; --color-ink-muted: #737373; --color-ink-inverted: #000000; /* ── Canvas (surfaces) ───────────────────────────────── Near-pure black stack — #000 ground, barely lifted alt/elevated panels so chrome stays quiet. */ --color-canvas: #000000; --color-canvas-translucent: color-mix(in srgb, var(--color-canvas) 88%, transparent); --color-canvas-alt: #0a0a0a; --color-canvas-elevated: #141414; /* Bento fill: cool charcoal with a slight blue. Hero, features, analytics. */ --hero-bento-surface: #111113; --bento-edge: color-mix(in srgb, var(--color-ink) 7%, transparent); --bento-edge-hover: color-mix(in srgb, var(--color-ink) 14%, transparent); --bento-lift: 0 1px 0 color-mix(in srgb, var(--color-ink) 4%, transparent) inset, 0 20px 40px -28px color-mix(in srgb, #000 70%, transparent); --bento-lift-hover: 0 1px 0 color-mix(in srgb, var(--color-ink) 6%, transparent) inset, 0 28px 48px -22px color-mix(in srgb, #000 78%, transparent); /* ── Borders ─────────────────────────────────────────── */ --color-border: #1a1a1a; --color-border-subtle: #262626; --color-border-emphasis: #404040; /* ── Brand accent (marketing CTAs, highlights, glows) ── x.ai primary is white fill / black type. Status colors below stay independent so success can remain green. */ --color-accent: #ffffff; --color-accent-hover: #e5e5e5; --color-accent-glow: color-mix(in srgb, var(--color-accent) 28%, transparent); --color-accent-tint: color-mix(in srgb, var(--color-accent) 10%, transparent); --color-accent-muted: color-mix(in srgb, var(--color-accent) 14%, transparent); --color-accent-border: color-mix(in srgb, var(--color-accent) 28%, var(--color-border)); --color-accent-border-soft: color-mix(in srgb, var(--color-accent) 35%, transparent); --color-accent-soft: color-mix(in srgb, var(--color-accent) 6%, transparent); --color-accent-softer: color-mix(in srgb, var(--color-accent) 3%, transparent); /* ── Product highlight (secondary product demos, e.g. scanner) ── Cool steel, not neon — stays readable on pure black. */ --color-highlight: #94a3b8; --color-highlight-soft: color-mix(in srgb, var(--color-highlight) 18%, transparent); --color-highlight-glow: color-mix(in srgb, var(--color-highlight) 55%, transparent); /* ── Emphasis spectrum (chromatic accent family) ───────── The rainbow stripe / pulse. Use sparingly next to solid white --color-accent: CTAs, hero underline, link hover. One source of truth for all spectrum surfaces. */ --color-emphasis-from: #38bdf8; --color-emphasis-via: #c084fc; --color-emphasis-mid: #f472b6; --color-emphasis-warm: #fb923c; --color-emphasis-to: #fbbf24; --color-emphasis-gradient: linear-gradient( 90deg, var(--color-emphasis-from) 0%, var(--color-emphasis-via) 32%, var(--color-emphasis-mid) 58%, var(--color-emphasis-warm) 78%, var(--color-emphasis-to) 100% ); /* Soft multi-stop wash for button halos / ambient glows */ --color-emphasis-glow: color-mix(in srgb, var(--color-emphasis-via) 55%, transparent); --color-emphasis-glow-from: color-mix(in srgb, var(--color-emphasis-from) 45%, transparent); --color-emphasis-glow-mid: color-mix(in srgb, var(--color-emphasis-mid) 40%, transparent); --color-emphasis-glow-to: color-mix(in srgb, var(--color-emphasis-to) 40%, transparent); /* Drift / pulse timing (shared by stripe, button halo, link hover) */ --emphasis-size: 200% 100%; --emphasis-drift-duration: 5.5s; /* ── Links ───────────────────────────────────────────── Monochrome scan pattern: pure white links on muted body copy, with a visible decoration (not a same-as-text hairline). Hover brightens the underline — never dims the label. */ --color-link: #ffffff; --color-link-hover: #ffffff; --color-link-decoration: color-mix(in srgb, var(--color-ink) 45%, transparent); --color-link-decoration-hover: var(--color-ink); /* Shared hairline for prose + base links (hover must match — no fattening) */ --link-underline-thickness: 1px; --color-link-tint: color-mix(in srgb, var(--color-ink) 18%, transparent); /* ── Status (UI feedback — not brand) ────────────────── */ --color-positive: #4ade80; --color-info: #93c5fd; --color-negative: #f87171; /* Status tints for badges / tags */ --color-positive-tint: color-mix(in srgb, var(--color-positive) 12%, transparent); --color-positive-border: color-mix(in srgb, var(--color-positive) 45%, transparent); --color-info-tint: color-mix(in srgb, var(--color-info) 12%, transparent); --color-info-border: color-mix(in srgb, var(--color-info) 45%, transparent); /* ── Scrims & glass (overlays on media / dark chrome) ── */ --color-scrim-strong: color-mix(in srgb, #000 82%, transparent); --color-scrim-medium: color-mix(in srgb, #000 62%, transparent); --color-scrim-soft: color-mix(in srgb, #000 32%, transparent); --color-scrim-text: color-mix(in srgb, #000 50%, transparent); --color-glass-faint: color-mix(in srgb, var(--color-ink) 4%, transparent); --color-glass-soft: color-mix(in srgb, var(--color-ink) 6%, transparent); --color-glass-medium: color-mix(in srgb, var(--color-ink) 10%, transparent); --color-glass-border: color-mix(in srgb, var(--color-ink) 12%, transparent); --color-glass-border-soft: color-mix(in srgb, var(--color-ink) 8%, transparent); --color-glass-solid: color-mix(in srgb, var(--color-ink) 96%, transparent); /* Header chrome: dark frost on the black canvas, not a cream/white bar */ --header-glass-fill: color-mix(in srgb, var(--color-canvas-elevated) 62%, transparent); --header-glass-sheet: color-mix(in srgb, var(--color-canvas-elevated) 88%, transparent); --header-glass-indicator: color-mix(in srgb, var(--color-ink) 15%, transparent); --header-glass-highlight: color-mix(in srgb, var(--color-ink) 18%, transparent); --header-glass-shadow: 0 12px 40px color-mix(in srgb, #000 40%, transparent), inset 0 1px 0 var(--header-glass-highlight); --header-sheet-shadow: 0 28px 70px color-mix(in srgb, #000 55%, transparent), inset 0 1px 0 var(--header-glass-highlight); /* Device / product shell gradients (scanner mock, etc.) */ --color-device-top: #171717; --color-device-bottom: #000000; }