/* ========================================================================= WALLY.AI — TELEMETRY DESIGN TOKENS Direction: Telemetry (cool slate + electric blue). Dark-first, with light. Color space: oklch() — widely supported in modern browsers/RN-web. Approximate sRGB hex is noted in comments for tooling that needs it. Usage: - Dark is the DEFAULT (:root). - Light applies via [data-theme="light"] OR prefers-color-scheme: light. - Set / "dark" to force a mode and override the system preference. ========================================================================= */ :root { /* ---- Type ---------------------------------------------------------- */ --font-ui: 'Space Grotesk', system-ui, sans-serif; /* headings, UI, body */ --font-mono: 'IBM Plex Mono', ui-monospace, monospace; /* numbers, labels, time */ /* Type scale (px). Numerals are ALWAYS --font-mono, tabular. */ --fs-display: 34px; /* page / company title */ --fs-stat: 34px; /* big stat numerals */ --fs-h3: 18px; /* section headings (Modules) */ --fs-title: 16px; /* card / module title */ --fs-body: 14px; /* interface body */ --fs-sm: 13px; /* dense rows, buttons */ --fs-meta: 12px; /* timestamps, urls */ --fs-label: 11px; /* mono labels */ --fs-eyebrow: 10px; /* mono UPPERCASE eyebrows */ --tracking-eyebrow: 0.12em; /* mono uppercase labels */ --tracking-tight: -0.02em; /* large numerals/headings */ /* ---- Spacing (4px grid) -------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; /* ---- Radius -------------------------------------------------------- */ --radius-sm: 6px; /* inputs, small chips */ --radius-control: 8px; /* buttons */ --radius-inset: 9px; /* inset stat boxes */ --radius-stat: 13px; /* stat cards */ --radius-card: 14px; /* module cards */ --radius-panel: 16px; /* window frame / large panels */ --radius-pill: 999px; /* status pills, badges */ /* ---- Motion -------------------------------------------------------- */ --ease: cubic-bezier(0.2, 0, 0, 1); --dur: 160ms; /* ===================================================================== DARK THEME (default) ===================================================================== */ /* Elevation — four tiers. Depth carries hierarchy, not borders alone. */ --canvas: oklch(0.165 0.013 256); /* #14161b — app background */ --sidebar: oklch(0.145 0.012 256); /* #101218 — sidebar, recedes */ --surface-1: oklch(0.205 0.015 256); /* #1c1f26 — cards */ --surface-2: oklch(0.245 0.017 256); /* #24272f — raised / select */ --inset: oklch(0.165 0.013 256); /* #14161b — inset boxes in cards */ --border: oklch(0.300 0.020 256); /* #393d47 — primary border */ --hairline: oklch(0.260 0.016 256); /* #2a2e36 — quiet dividers */ /* Text */ --text-hi: oklch(0.970 0.006 256); /* #f3f5f8 — numerals, titles */ --text: oklch(0.800 0.012 256); /* #c3c8d0 — body */ --text-muted: oklch(0.620 0.014 256); /* #8b909b — labels, meta */ --text-faint: oklch(0.500 0.014 256); /* #6b707b — disabled / zeros */ /* Brand accent — electric blue. Interactive + brand only. */ --accent: oklch(0.640 0.160 256); /* #4d7cf0 */ --accent-hover: oklch(0.690 0.150 256); --accent-contrast: oklch(0.990 0.010 256); /* text on accent (near white)*/ --accent-text: oklch(0.740 0.140 256); /* accent as text/icon on dark*/ --accent-tint: oklch(0.640 0.160 256 / 0.14); /* pill / chip bg */ --accent-tint-bd: oklch(0.640 0.160 256 / 0.40); /* tinted chip border */ /* Status set — each color has ONE job. */ --status-active: oklch(0.800 0.150 156); /* green text on dark */ --status-active-dot: oklch(0.740 0.150 156); --status-active-tint: oklch(0.740 0.150 156 / 0.14); --status-queued-bg: oklch(0.300 0.014 256); /* neutral, no color */ --status-queued-text: oklch(0.740 0.012 256); --status-approval: oklch(0.840 0.120 78); /* amber text */ --status-approval-tint: oklch(0.800 0.130 78 / 0.15); --status-idle-text: oklch(0.580 0.014 256); /* outline pill */ --status-idle-border: oklch(0.360 0.016 256); --status-danger: oklch(0.640 0.200 25); /* destructive */ --status-danger-text: oklch(0.700 0.180 25); --status-danger-tint: oklch(0.640 0.200 25 / 0.14); /* Shadow — used sparingly (window frame, raised popovers). */ --shadow-window: 0 24px 70px -34px oklch(0.100 0.020 256 / 0.70); --shadow-card: none; /* dark cards lean on elevation, not shadow */ } /* ======================================================================= LIGHT THEME — the reading / reviewing surface. Dark stays the default. Accent darkens one step for AA contrast on white. ======================================================================= */ :root[data-theme="light"] { --canvas: oklch(0.985 0.003 256); /* #f7f8fa */ --sidebar: oklch(0.965 0.004 256); /* #eef0f3 */ --surface-1: oklch(1.000 0.000 0); /* #ffffff */ --surface-2: oklch(0.965 0.004 256); /* #eef0f3 */ --inset: oklch(0.970 0.004 256); /* #f0f1f4 */ --border: oklch(0.900 0.006 256); /* #dcdee3 */ --hairline: oklch(0.930 0.005 256); /* #e6e8ec */ --text-hi: oklch(0.250 0.020 256); /* #2b2f38 */ --text: oklch(0.420 0.016 256); /* #565b66 */ --text-muted: oklch(0.560 0.015 256); /* #777c87 */ --text-faint: oklch(0.660 0.014 256); /* #9398a2 */ --accent: oklch(0.550 0.170 256); /* #2f63e0 */ --accent-hover: oklch(0.500 0.170 256); --accent-contrast: oklch(1.000 0.000 0); /* white text on accent */ --accent-text: oklch(0.550 0.170 256); --accent-tint: oklch(0.550 0.170 256 / 0.12); --accent-tint-bd: oklch(0.550 0.170 256 / 0.35); --status-active: oklch(0.480 0.130 156); --status-active-dot: oklch(0.580 0.140 156); --status-active-tint: oklch(0.580 0.140 156 / 0.14); --status-queued-bg: oklch(0.930 0.005 256); --status-queued-text: oklch(0.450 0.015 256); --status-approval: oklch(0.550 0.130 65); --status-approval-tint: oklch(0.700 0.140 70 / 0.18); --status-idle-text: oklch(0.560 0.015 256); --status-idle-border: oklch(0.860 0.006 256); --status-danger: oklch(0.580 0.200 25); --status-danger-text: oklch(0.560 0.190 25); --status-danger-tint: oklch(0.580 0.200 25 / 0.12); --shadow-window: 0 24px 70px -34px oklch(0.700 0.020 256 / 0.30); --shadow-card: 0 1px 2px oklch(0.700 0.020 256 / 0.04); } /* Follow the OS preference when no explicit data-theme is set. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --canvas: oklch(0.985 0.003 256); --sidebar: oklch(0.965 0.004 256); --surface-1: oklch(1.000 0.000 0); --surface-2: oklch(0.965 0.004 256); --inset: oklch(0.970 0.004 256); --border: oklch(0.900 0.006 256); --hairline: oklch(0.930 0.005 256); --text-hi: oklch(0.250 0.020 256); --text: oklch(0.420 0.016 256); --text-muted: oklch(0.560 0.015 256); --text-faint: oklch(0.660 0.014 256); --accent: oklch(0.550 0.170 256); --accent-hover: oklch(0.500 0.170 256); --accent-contrast: oklch(1.000 0.000 0); --accent-text: oklch(0.550 0.170 256); --accent-tint: oklch(0.550 0.170 256 / 0.12); --accent-tint-bd: oklch(0.550 0.170 256 / 0.35); --status-active: oklch(0.480 0.130 156); --status-active-dot: oklch(0.580 0.140 156); --status-active-tint: oklch(0.580 0.140 156 / 0.14); --status-queued-bg: oklch(0.930 0.005 256); --status-queued-text: oklch(0.450 0.015 256); --status-approval: oklch(0.550 0.130 65); --status-approval-tint: oklch(0.700 0.140 70 / 0.18); --status-idle-text: oklch(0.560 0.015 256); --status-idle-border: oklch(0.860 0.006 256); --status-danger: oklch(0.580 0.200 25); --status-danger-text: oklch(0.560 0.190 25); --status-danger-tint: oklch(0.580 0.200 25 / 0.12); --shadow-window: 0 24px 70px -34px oklch(0.700 0.020 256 / 0.30); --shadow-card: 0 1px 2px oklch(0.700 0.020 256 / 0.04); } } /* ======================================================================= OPTIONAL — reference component classes built from the tokens above. These mirror the prototype exactly; adapt to your framework's patterns. ======================================================================= */ .w-eyebrow { font-family: var(--font-mono); font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted); } .w-stat-value { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-stat); letter-spacing: var(--tracking-tight); color: var(--text-hi); } .w-card { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); } /* Status pill — base + modifiers */ .w-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } .w-pill--active { background: var(--status-active-tint); color: var(--status-active); } .w-pill--queued { background: var(--status-queued-bg); color: var(--status-queued-text); } .w-pill--approval { background: var(--status-approval-tint); color: var(--status-approval); } .w-pill--idle { background: transparent; color: var(--status-idle-text); border: 1px solid var(--status-idle-border); } .w-pill__dot { width: 6px; height: 6px; border-radius: var(--radius-pill); background: currentColor; } .w-pill--live .w-pill__dot { animation: w-pulse 1.8s ease-in-out infinite; } @keyframes w-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.32; } } /* Buttons */ .w-btn { font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-sm); padding: 9px 17px; border-radius: var(--radius-control); border: none; cursor: pointer; transition: background var(--dur) var(--ease); } .w-btn--primary { background: var(--accent); color: var(--accent-contrast); } .w-btn--primary:hover { background: var(--accent-hover); } .w-btn--secondary { background: var(--surface-2); color: var(--text-hi); border: 1px solid var(--border); } .w-btn--ghost { background: transparent; color: var(--text-muted); }