/* ================================================================ ByteSide.io — Design Tokens Single source of truth. Every other CSS file reads from these. Naming convention: ALL tokens are prefixed `--byte-*` to avoid collisions with any existing CSS in the codebase. ================================================================ */ :root { /* ============================================================ 1. PRIMITIVES — raw color values, never used directly in components. Components reference the SEMANTIC tokens below. ============================================================ */ /* Brand */ --byte-orange-500: #FD7D00; /* signature */ --byte-orange-400: #ff9933; /* hover (lighter) */ --byte-orange-600: #B35A00; /* darker shade — gradients */ --byte-orange-100: rgba(253, 125, 0, 0.12); --byte-orange-50: rgba(253, 125, 0, 0.30); --byte-teal-500: #015351; /* ByteSide brand-canonical Dark-Teal */ --byte-teal-100: rgba(1, 83, 81, 0.20); /* Greyscale (cool / dark) */ --byte-ink-950: #030a0d; --byte-ink-900: #050d11; --byte-ink-850: #06171e; --byte-ink-800: #0f1f26; --byte-ink-700: #14262e; --byte-ink-600: #1a2f38; --byte-ink-500: #2a3d46; --byte-fog-100: #e8eef1; --byte-fog-300: #9aa8ae; --byte-fog-500: #5a6e75; /* Status */ --byte-green-500: #27ca40; --byte-yellow-500: #febc2e; --byte-yellow-warm: #FFDD00; /* coffee / BMC brand */ --byte-red-500: #ff5f57; /* Code accents (for dock variants, syntax highlight, etc.) */ --byte-blue-300: #79c0ff; --byte-purple-300: #c77dff; /* Sticky-Note paper colors — aliases over status/code primitives, brand-consistent. Text-color is always near-black for legibility. */ --byte-sticky-yellow: var(--byte-yellow-warm); --byte-sticky-green: var(--byte-green-500); --byte-sticky-blue: var(--byte-blue-300); --byte-sticky-pink: var(--byte-purple-300); /* ============================================================ 2. SEMANTIC TOKENS — what components actually consume. These map to primitives. To change brand colors, edit these mappings. ============================================================ */ /* Surfaces */ --byte-bg: var(--byte-ink-850); /* Deep Navy #06171E — brand canonical */ --byte-bg-2: var(--byte-ink-800); --byte-surface: var(--byte-ink-800); --byte-surface-2: var(--byte-ink-700); --byte-surface-3: var(--byte-ink-600); --byte-surface-glass: rgba(14, 28, 34, 0.92); --byte-surface-blur: rgba(14, 28, 34, 0.60); /* Borders */ --byte-border: rgba(255, 255, 255, 0.06); --byte-border-strong: rgba(255, 255, 255, 0.10); --byte-border-warm: rgba(253, 125, 0, 0.20); --byte-stroke: var(--byte-border); /* Text */ --byte-text: var(--byte-fog-100); --byte-text-muted: var(--byte-fog-300); --byte-text-subtle: var(--byte-fog-500); /* Brand (semantic) */ --byte-primary: var(--byte-orange-500); --byte-primary-hover: var(--byte-orange-400); --byte-primary-soft: var(--byte-orange-100); --byte-primary-glow: var(--byte-orange-50); --byte-accent: var(--byte-teal-500); --byte-accent-soft: var(--byte-teal-100); /* Status */ --byte-success: var(--byte-green-500); --byte-warning: var(--byte-yellow-500); --byte-coffee: var(--byte-yellow-warm); --byte-danger: var(--byte-red-500); /* Code colors */ --byte-code-blue: var(--byte-blue-300); --byte-code-purple: var(--byte-purple-300); /* ============================================================ 3. TYPOGRAPHY ============================================================ */ --byte-font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace; --byte-font-code: 'Fira Code', monospace; --byte-font-ui: 'Inter', -apple-system, system-ui, sans-serif; --byte-fs-xs: 11px; --byte-fs-sm: 12px; --byte-fs-md: 14px; --byte-fs-lg: 16px; --byte-fs-xl: 20px; /* ============================================================ 4. RADIUS ============================================================ */ --byte-r-sm: 6px; --byte-r-md: 10px; --byte-r-lg: 14px; --byte-r-xl: 20px; --byte-r-pill: 999px; /* ============================================================ 5. SPACING (4px scale) ============================================================ */ --byte-sp-1: 4px; --byte-sp-2: 8px; --byte-sp-3: 12px; --byte-sp-4: 16px; --byte-sp-5: 24px; --byte-sp-6: 32px; --byte-sp-7: 48px; --byte-sp-8: 64px; /* ============================================================ 6. ELEVATION ============================================================ */ --byte-shadow-window: 0 30px 80px -20px rgba(0,0,0,0.7), 0 10px 30px -10px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05); --byte-shadow-window-focus: 0 50px 120px -20px rgba(0,0,0,0.85), 0 20px 50px -10px rgba(253,125,0,0.20), 0 0 0 1px rgba(253,125,0,0.25); --byte-shadow-dock: 0 15px 40px -10px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.08); --byte-shadow-pop: 0 30px 80px rgba(0,0,0,0.6); /* ============================================================ 7. Z-INDEX SCALE ============================================================ */ --byte-z-wallpaper: 1; --byte-z-desktop: 2; --byte-z-window: 10; /* JS bumps individual windows from here */ --byte-z-menubar: 1000; --byte-z-dock: 1000; --byte-z-palette: 2000; --byte-z-notif: 3000; /* ============================================================ 8. LAYOUT ============================================================ */ --byte-menubar-h: 32px; --byte-dock-h: 64px; /* ============================================================ 9. MOTION ============================================================ */ --byte-t-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1); --byte-t-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1); --byte-t-window: 280ms cubic-bezier(0.2, 0.8, 0.2, 1); } /* ================================================================ REDUCED MOTION ================================================================ */ @media (prefers-reduced-motion: reduce) { :root { --byte-t-fast: 0ms; --byte-t-normal: 0ms; --byte-t-window: 0ms; } }