/** * Developmizer Site — Design Tokens * * All design primitives as CSS custom properties. Themes are applied via * [data-theme="light|dark"] on the element. The "system" preference * is resolved to light or dark by the flash-prevention inline script * (see DZ_Assets::inline_theme_script) before first paint. * * Token prefix: --dz-* * DO NOT hardcode colors, spacing, or typography values outside this file. */ :root { /* ----------------------------------------------------------------------- * Typography — families * -------------------------------------------------------------------- */ --dz-font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --dz-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --dz-font-arabic: 'Noto Kufi Arabic', 'Segoe UI', Tahoma, sans-serif; --dz-font-mono: ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace; /* ----------------------------------------------------------------------- * Typography — sizes (rem-free fixed px for predictability) * -------------------------------------------------------------------- */ --dz-text-xs: 12px; --dz-text-sm: 13px; --dz-text-base: 15px; --dz-text-md: 16px; --dz-text-lg: 18px; --dz-text-xl: 20px; --dz-text-2xl: 24px; --dz-text-3xl: 30px; --dz-text-4xl: 36px; --dz-text-5xl: 48px; --dz-text-6xl: 60px; --dz-text-7xl: 72px; /* ----------------------------------------------------------------------- * Typography — weights * -------------------------------------------------------------------- */ --dz-weight-regular: 400; --dz-weight-medium: 500; --dz-weight-semibold: 600; --dz-weight-bold: 700; /* ----------------------------------------------------------------------- * Typography — line heights * -------------------------------------------------------------------- */ --dz-lh-none: 1; --dz-lh-tight: 1.1; --dz-lh-snug: 1.25; --dz-lh-normal: 1.5; --dz-lh-relaxed: 1.625; --dz-lh-loose: 1.75; /* ----------------------------------------------------------------------- * Typography — letter spacing * -------------------------------------------------------------------- */ --dz-tracking-tighter: -0.05em; --dz-tracking-tight: -0.025em; --dz-tracking-normal: 0; --dz-tracking-wide: 0.025em; --dz-tracking-wider: 0.05em; --dz-tracking-widest: 0.1em; /* ----------------------------------------------------------------------- * Spacing scale (4px base unit, multiples chosen for layout rhythm) * -------------------------------------------------------------------- */ --dz-space-0: 0; --dz-space-1: 4px; --dz-space-2: 8px; --dz-space-3: 12px; --dz-space-4: 16px; --dz-space-5: 20px; --dz-space-6: 24px; --dz-space-7: 28px; --dz-space-8: 32px; --dz-space-10: 40px; --dz-space-12: 48px; --dz-space-14: 56px; --dz-space-16: 64px; --dz-space-20: 80px; --dz-space-24: 96px; --dz-space-28: 112px; --dz-space-32: 128px; /* ----------------------------------------------------------------------- * Layout containers * -------------------------------------------------------------------- */ --dz-container: 1180px; --dz-container-narrow: 720px; --dz-container-wide: 1440px; --dz-container-prose: 68ch; --dz-content-padding: var(--dz-space-6); /* ----------------------------------------------------------------------- * Radius * -------------------------------------------------------------------- */ --dz-radius-xs: 4px; --dz-radius-sm: 6px; --dz-radius-md: 10px; --dz-radius-lg: 14px; --dz-radius-xl: 20px; --dz-radius-2xl: 28px; --dz-radius-full: 9999px; /* ----------------------------------------------------------------------- * Motion * -------------------------------------------------------------------- */ --dz-dur-instant: 60ms; --dz-dur-fast: 120ms; --dz-dur-base: 200ms; --dz-dur-slow: 320ms; --dz-dur-slower: 480ms; --dz-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dz-ease-in: cubic-bezier(0.4, 0, 1, 1); --dz-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --dz-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ----------------------------------------------------------------------- * Z-index scale * -------------------------------------------------------------------- */ --dz-z-below: -1; --dz-z-base: 1; --dz-z-dropdown: 10; --dz-z-sticky: 100; --dz-z-header: 200; --dz-z-overlay: 300; --dz-z-modal: 400; --dz-z-popover: 450; --dz-z-toast: 500; --dz-z-tooltip: 600; /* ----------------------------------------------------------------------- * Measure (max reading width) * -------------------------------------------------------------------- */ --dz-measure: 65ch; /* ----------------------------------------------------------------------- * Breakpoints (reference only — use in media queries literally) * sm: 640px md: 768px lg: 1024px xl: 1280px 2xl: 1536px * -------------------------------------------------------------------- */ } /* ============================================================================= * LIGHT THEME (default) * ============================================================================= */ :root, [data-theme="light"] { /* Brand */ --dz-accent: #00a1d8; --dz-accent-hover: #0089b8; --dz-accent-active: #007299; --dz-accent-soft: rgba(0, 161, 216, 0.10); --dz-accent-softer: rgba(0, 161, 216, 0.06); --dz-accent-fg: #ffffff; /* Surface (background layers) */ --dz-bg: #ffffff; --dz-bg-sub: #fafafb; --dz-bg-mut: #f4f4f6; --dz-bg-deep: #f0f0f3; --dz-surface: #ffffff; /* Foreground (text layers) */ --dz-fg: #0a0a0b; --dz-fg-mut: #525560; --dz-fg-sub: #8a8e96; --dz-fg-placeholder: #b4b7be; --dz-fg-on-accent: #ffffff; /* Border */ --dz-border: #e6e7ea; --dz-border-strong: #d0d2d6; --dz-border-mut: #ededf0; /* Status — success */ --dz-success: #16a34a; --dz-success-bg: #dcfce7; --dz-success-fg: #166534; /* Status — warning */ --dz-warning: #ca8a04; --dz-warning-bg: #fef9c3; --dz-warning-fg: #854d0e; /* Status — error */ --dz-error: #dc2626; --dz-error-bg: #fee2e2; --dz-error-fg: #991b1b; /* Status — info */ --dz-info: #0ea5e9; --dz-info-bg: #e0f2fe; --dz-info-fg: #075985; /* Shadows */ --dz-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); --dz-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.05); --dz-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.08); --dz-shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.10); --dz-shadow-btn: 0 1px 0 rgba(0, 0, 0, 0.04); /* Focus ring */ --dz-ring: 0 0 0 3px var(--dz-accent-soft); --dz-ring-color: var(--dz-accent); } /* ============================================================================= * DARK THEME * ============================================================================= */ [data-theme="dark"] { /* Brand — slightly brighter cyan for dark contrast */ --dz-accent: #22b8e8; --dz-accent-hover: #4cc7ee; --dz-accent-active: #7dd4f2; --dz-accent-soft: rgba(34, 184, 232, 0.12); --dz-accent-softer: rgba(34, 184, 232, 0.06); --dz-accent-fg: #ffffff; /* Surface */ --dz-bg: #0a0a0b; --dz-bg-sub: #111114; --dz-bg-mut: #16161b; --dz-bg-deep: #1a1a20; --dz-surface: #111114; /* Foreground */ --dz-fg: #f7f7f8; --dz-fg-mut: #a1a4ab; --dz-fg-sub: #6b6e76; --dz-fg-placeholder: #4a4d54; --dz-fg-on-accent: #ffffff; /* Border */ --dz-border: #26262d; --dz-border-strong: #34343d; --dz-border-mut: #1c1c22; /* Status */ --dz-success: #22c55e; --dz-success-bg: rgba(34, 197, 94, 0.12); --dz-success-fg: #86efac; --dz-warning: #eab308; --dz-warning-bg: rgba(234, 179, 8, 0.12); --dz-warning-fg: #fde047; --dz-error: #ef4444; --dz-error-bg: rgba(239, 68, 68, 0.12); --dz-error-fg: #fca5a5; --dz-info: #0ea5e9; --dz-info-bg: rgba(14, 165, 233, 0.12); --dz-info-fg: #7dd3fc; /* Shadows — darker, more pronounced on dark bg */ --dz-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --dz-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --dz-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6); --dz-shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.7); --dz-shadow-btn: 0 1px 0 rgba(0, 0, 0, 0.3); /* Focus ring */ --dz-ring: 0 0 0 3px var(--dz-accent-soft); --dz-ring-color: var(--dz-accent); }