/* ============================================================ SHARED DESIGN TOKENS — tokens.css Version: S227 Scope: buddocloud.com + oclconsulting.com Architecture: :root → shared scale (neutral, typography, spacing, etc.) .buddocloud → dark tech brand overrides .ocl → editorial consulting brand overrides Usage: or ============================================================ */ /* ============================================================ 1. NEUTRAL COLOR SCALE ============================================================ */ :root { --color-neutral-50: #fafaf9; --color-neutral-100: #f5f5f4; --color-neutral-200: #e7e5e4; --color-neutral-300: #d6d3d1; --color-neutral-400: #a8a29e; --color-neutral-500: #78716c; --color-neutral-600: #57534e; --color-neutral-700: #44403c; --color-neutral-800: #292524; --color-neutral-900: #1c1917; --color-neutral-950: #0c0a09; } /* ============================================================ 2. FONT STACKS ============================================================ */ :root { --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-serif: Georgia, 'Times New Roman', Times, serif; --font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; } /* ============================================================ 3. TYPOGRAPHY SCALE — fluid with clamp() ============================================================ */ :root { --font-size-xs: clamp(0.75rem, 0.75rem + 0.1389vw, 0.875rem); --font-size-sm: clamp(0.875rem, 0.875rem + 0.1389vw, 1rem); --font-size-base: clamp(1rem, 1rem + 0.1389vw, 1.125rem); --font-size-lg: clamp(1.125rem, 1.125rem + 0.2778vw, 1.375rem); --font-size-xl: clamp(1.25rem, 1.25rem + 0.4167vw, 1.625rem); --font-size-2xl: clamp(1.5rem, 1.5rem + 0.5556vw, 2rem); --font-size-3xl: clamp(1.75rem, 1.75rem + 0.8333vw, 2.5rem); --font-size-4xl: clamp(2.25rem, 2.25rem + 1.1111vw, 3.375rem); --font-size-5xl: clamp(2.75rem, 2.75rem + 1.3889vw, 4.25rem); } /* ============================================================ 4. FONT WEIGHTS ============================================================ */ :root { --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; } /* ============================================================ 5. LINE HEIGHTS ============================================================ */ :root { --line-height-tight: 1.2; --line-height-snug: 1.35; --line-height-base: 1.5; --line-height-relaxed: 1.6; --line-height-loose: 1.75; --line-height-prose: 1.85; } /* ============================================================ 6. SPACING SCALE — 8px base grid ============================================================ */ :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-section: var(--space-16); --space-component: var(--space-8); --space-gap: var(--space-6); --space-inset: var(--space-4); } /* ============================================================ 7. BORDER RADIUS ============================================================ */ :root { --radius-none: 0; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 9999px; --radius-full: 50%; } /* ============================================================ 8. SHADOWS ============================================================ */ :root { --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.03); --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04); --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.3); --shadow-glow-blue: 0 0 30px rgba(79, 179, 255, 0.10), 0 0 60px rgba(79, 179, 255, 0.06); --shadow-glow-gold: 0 0 30px rgba(255, 184, 0, 0.12), 0 0 60px rgba(255, 184, 0, 0.06); --shadow-glow-green: 0 0 20px rgba(45, 95, 74, 0.06), 0 0 40px rgba(45, 95, 74, 0.03); } /* ============================================================ 9. TRANSITIONS & ANIMATIONS ============================================================ */ :root { --duration-fast: 150ms; --duration-base: 200ms; --duration-slow: 300ms; --duration-deliberate: 500ms; --ease-default: ease; --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0.0, 1, 1); --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1); --transition-color: color var(--duration-base) var(--ease-default); --transition-background: background var(--duration-base) var(--ease-default); --transition-border-color: border-color var(--duration-base) var(--ease-default); --transition-transform: transform var(--duration-fast) var(--ease-default); --transition-filter: filter var(--duration-base) var(--ease-default); --transition-opacity: opacity var(--duration-deliberate) var(--ease-out); --transition-box-shadow: box-shadow var(--duration-slow) var(--ease-default); --transition-all: all var(--duration-base) var(--ease-default); } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes fade-in-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ============================================================ 10. Z-INDEX SCALE ============================================================ */ :root { --z-below: -1; --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; } /* ============================================================ 11. CONTAINER WIDTHS & BREAKPOINTS ============================================================ */ :root { --bp-sm: 480px; --bp-md: 768px; --bp-lg: 900px; --bp-xl: 1200px; --container-sm: 640px; --container-md: 740px; --container-lg: 1100px; --container-xl: 1280px; --page-padding: clamp(1rem, 5vw, 3rem); } /* ============================================================ 12. SEMANTIC COLOR ALIASES (neutral defaults) ============================================================ */ :root { --color-text-primary: var(--color-neutral-950); --color-text-secondary: var(--color-neutral-700); --color-text-muted: var(--color-neutral-500); --color-text-inverse: var(--color-neutral-50); --color-text-on-brand: var(--color-neutral-50); --color-bg-page: var(--color-neutral-50); --color-bg-surface: var(--color-neutral-100); --color-bg-elevated: #ffffff; --color-bg-overlay: rgba(10, 10, 15, 0.5); --color-bg-inverse: var(--color-neutral-950); --color-border-default: var(--color-neutral-300); --color-border-subtle: var(--color-neutral-200); --color-border-strong: var(--color-neutral-600); --color-border-focus: var(--color-neutral-800); --color-interactive-primary: var(--color-neutral-800); --color-interactive-primary-hover: var(--color-neutral-950); --color-interactive-secondary: var(--color-neutral-200); --color-interactive-secondary-hover: var(--color-neutral-300); --color-status-success: #22c55e; --color-status-error: #ef4444; --color-status-warning: #f59e0b; --color-status-info: #3b82f6; } /* ============================================================ 13. BUDDOCLOUD BRAND TOKENS ============================================================ */ .buddocloud { --brand-primary: #4fb3ff; --brand-primary-hover: #3a9ae6; --brand-secondary: #ffb800; --brand-secondary-hover:#ffc933; --color-bg-page: #0a0a0f; --color-bg-surface: #0f0f18; --color-bg-elevated: #14141f; --color-bg-overlay: rgba(0, 0, 0, 0.7); --color-bg-inverse: var(--color-neutral-50); --color-text-primary: #e8e8e8; --color-text-secondary: #8888a8; --color-text-muted: #6b6b8d; --color-text-inverse: #0a0a0f; --color-text-on-brand: #0a0a0f; --color-border-default: #1e1e2e; --color-border-subtle: #16161e; --color-border-strong: #2e2e42; --color-border-focus: #4fb3ff; --color-interactive-primary: #4fb3ff; --color-interactive-primary-hover: #8ccaff; --color-interactive-secondary: #ffb800; --color-interactive-secondary-hover: #ffc933; --color-status-success: #4ade80; --color-status-error: #f87171; --color-status-warning: #fbbf24; --color-status-info: #4fb3ff; --color-bg-success: rgba(74, 222, 128, 0.10); --color-bg-error: rgba(248, 113, 113, 0.10); --color-bg-warning: rgba(251, 191, 36, 0.10); --focus-ring: 0 0 0 2px rgba(79, 179, 255, 0.4); --color-terminal-purple: #c678dd; --color-terminal-green: #98c379; --color-terminal-gray: #5c6370; --color-terminal-bg: #050508; } /* ============================================================ 14. OCL CONSULTING BRAND TOKENS ============================================================ */ .ocl { --brand-primary: #2d5f4a; --brand-primary-hover: #3a7a5e; --brand-secondary: #c8963c; --brand-secondary-hover:#dba84e; --color-bg-page: #f8f6f2; --color-bg-surface: #ffffff; --color-bg-elevated: #ffffff; --color-bg-overlay: rgba(45, 95, 74, 0.15); --color-bg-inverse: #1a1a2e; --color-text-primary: #1a1a2e; --color-text-secondary: #3a3a5c; --color-text-muted: #6b6b8d; --color-text-inverse: #f8f6f2; --color-text-on-brand: #ffffff; --color-border-default: #d4d0c8; --color-border-subtle: #e8e4dc; --color-border-strong: #b8b4ac; --color-border-focus: #2d5f4a; --color-interactive-primary: #2d5f4a; --color-interactive-primary-hover: #3a7a5e; --color-interactive-secondary: #c8963c; --color-interactive-secondary-hover: #dba84e; --color-status-success: #7fc98e; --color-status-error: #e88080; --color-status-warning: #e8a840; --color-status-info: #4a7f9e; --color-bg-success: rgba(127, 201, 142, 0.12); --color-bg-error: rgba(232, 128, 128, 0.12); --color-bg-warning: rgba(232, 168, 64, 0.12); --focus-ring: 0 0 0 2px rgba(45, 95, 74, 0.30); --nav-height: 68px; }