/* ========================================================================== ZeroComm Design System — Token Stylesheet ========================================================================== Loaded once via in index.html . CSS custom properties defined here inherit through shadow DOM boundaries to all page components. Source: ZeroComm Design System (colors_and_type.css) ========================================================================== */ /* -------------------------------------------------------------------------- 1. Font Faces — Space Grotesk (self-hosted WOFF2) -------------------------------------------------------------------------- */ @font-face { font-family: 'Space Grotesk'; src: url('/fonts/SpaceGrotesk-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Space Grotesk'; src: url('/fonts/SpaceGrotesk-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Space Grotesk'; src: url('/fonts/SpaceGrotesk-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Space Grotesk'; src: url('/fonts/SpaceGrotesk-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Space Grotesk'; src: url('/fonts/SpaceGrotesk-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* -------------------------------------------------------------------------- 2. Font Family Tokens -------------------------------------------------------------------------- */ :root { --zerocomm-font-family-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --zerocomm-font-family-body: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --zerocomm-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; } /* -------------------------------------------------------------------------- 3. Type Scale -------------------------------------------------------------------------- */ :root { --zerocomm-font-size-hero: clamp(2.25rem, 5vw, 3.75rem); --zerocomm-font-size-h1: 2.25rem; --zerocomm-font-size-h2: 1.5rem; --zerocomm-font-size-h3: 1.25rem; --zerocomm-font-size-body: 1rem; --zerocomm-font-size-body-sm: 0.875rem; --zerocomm-font-size-caption: 0.75rem; --zerocomm-font-size-code: 0.875rem; } :root { --zerocomm-font-weight-light: 300; --zerocomm-font-weight-normal: 400; --zerocomm-font-weight-medium: 500; --zerocomm-font-weight-semibold: 600; --zerocomm-font-weight-bold: 700; --zerocomm-font-weight-display: 300; --zerocomm-font-weight-body: 700; } :root { --zerocomm-line-height-tight: 1.15; --zerocomm-line-height-heading: 1.2; --zerocomm-line-height-subheading: 1.3; --zerocomm-line-height-body: 1.5; --zerocomm-line-height-caption: 1.4; } :root { --zerocomm-letter-spacing-display: -0.02em; --zerocomm-letter-spacing-heading: -0.01em; --zerocomm-letter-spacing-body: 0; --zerocomm-letter-spacing-caption: 0.02em; --zerocomm-letter-spacing-code: 0; } /* -------------------------------------------------------------------------- 4. Brand Colors -------------------------------------------------------------------------- */ :root { --zerocomm-brand-navy-950: #00182E; --zerocomm-brand-pink: #FF5E99; --zerocomm-brand-purple: #8300C1; } /* -------------------------------------------------------------------------- 5. Semantic Color Tokens — Light Theme (default) -------------------------------------------------------------------------- */ :root, [data-theme="light"] { --zerocomm-color-bg: oklch(97% 0.005 260); --zerocomm-color-surface: #FFFFFF; --zerocomm-color-surface-overlay: #FFFFFF; --zerocomm-color-surface-hover: oklch(95% 0.005 260); --zerocomm-color-fg: #00182E; --zerocomm-color-fg-muted: oklch(45% 0.03 260); --zerocomm-color-fg-subtle: oklch(60% 0.02 260); --zerocomm-color-fg-on-primary: #FFFFFF; --zerocomm-color-border: oklch(85% 0.015 260); --zerocomm-color-border-hover: oklch(70% 0.02 260); --zerocomm-color-border-focus: #FF5E99; --zerocomm-color-primary: #FF5E99; --zerocomm-color-primary-hover: oklch(60% 0.22 2); --zerocomm-color-primary-active: oklch(55% 0.22 2); --zerocomm-color-primary-muted: oklch(92% 0.04 2); --zerocomm-color-danger: oklch(52% 0.22 20); --zerocomm-color-danger-hover: oklch(45% 0.22 20); --zerocomm-color-danger-muted: oklch(95% 0.02 20); --zerocomm-color-success: oklch(52% 0.16 150); --zerocomm-color-success-hover: oklch(46% 0.16 150); --zerocomm-color-success-muted: oklch(95% 0.03 145); --zerocomm-color-warning: oklch(72% 0.16 80); --zerocomm-color-warning-hover: oklch(65% 0.16 80); --zerocomm-color-warning-muted: oklch(95% 0.03 80); --zerocomm-color-info: oklch(55% 0.14 255); --zerocomm-color-info-hover: oklch(48% 0.14 255); --zerocomm-color-info-muted: oklch(95% 0.02 255); --zerocomm-color-accent: #8300C1; --zerocomm-color-accent-muted: oklch(92% 0.04 310); --zerocomm-color-overlay: rgba(0, 24, 46, 0.45); --zerocomm-shadow-sm: 0 1px 2px rgba(0, 24, 46, 0.05); --zerocomm-shadow-md: 0 4px 6px -1px rgba(0, 24, 46, 0.08), 0 2px 4px -2px rgba(0, 24, 46, 0.05); --zerocomm-shadow-lg: 0 10px 15px -3px rgba(0, 24, 46, 0.1), 0 4px 6px -4px rgba(0, 24, 46, 0.05); --zerocomm-shadow-xl: 0 20px 25px -5px rgba(0, 24, 46, 0.12), 0 8px 10px -6px rgba(0, 24, 46, 0.05); } /* -------------------------------------------------------------------------- 6. Semantic Color Tokens — Dark Theme -------------------------------------------------------------------------- */ [data-theme="dark"] { --zerocomm-color-bg: #00182E; --zerocomm-color-surface: oklch(25% 0.06 260); --zerocomm-color-surface-overlay: oklch(25% 0.06 260); --zerocomm-color-surface-hover: oklch(30% 0.06 260); --zerocomm-color-fg: oklch(97% 0.005 260); --zerocomm-color-fg-muted: oklch(65% 0.02 260); --zerocomm-color-fg-subtle: oklch(48% 0.03 260); --zerocomm-color-fg-on-primary: #00182E; --zerocomm-color-border: oklch(35% 0.04 260); --zerocomm-color-border-hover: oklch(45% 0.04 260); --zerocomm-color-border-focus: #FF5E99; --zerocomm-color-primary: #FF5E99; --zerocomm-color-primary-hover: oklch(68% 0.22 2); --zerocomm-color-primary-active: oklch(62% 0.22 2); --zerocomm-color-primary-muted: oklch(25% 0.06 2); --zerocomm-color-danger: oklch(62% 0.22 20); --zerocomm-color-danger-hover: oklch(55% 0.22 20); --zerocomm-color-danger-muted: oklch(20% 0.04 20); --zerocomm-color-success: oklch(62% 0.16 150); --zerocomm-color-success-hover: oklch(55% 0.16 150); --zerocomm-color-success-muted: oklch(20% 0.04 145); --zerocomm-color-warning: oklch(78% 0.16 80); --zerocomm-color-warning-hover: oklch(70% 0.16 80); --zerocomm-color-warning-muted: oklch(20% 0.04 80); --zerocomm-color-info: oklch(62% 0.14 255); --zerocomm-color-info-hover: oklch(55% 0.14 255); --zerocomm-color-info-muted: oklch(20% 0.04 245); --zerocomm-color-accent: oklch(55% 0.18 310); --zerocomm-color-accent-muted: oklch(22% 0.06 310); --zerocomm-color-overlay: rgba(0, 0, 0, 0.6); --zerocomm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --zerocomm-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3); --zerocomm-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.3); --zerocomm-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.3); } /* -------------------------------------------------------------------------- 7. Spacing Scale (4px base) -------------------------------------------------------------------------- */ :root { --zerocomm-space-0: 0; --zerocomm-space-1: 0.25rem; --zerocomm-space-2: 0.5rem; --zerocomm-space-3: 0.75rem; --zerocomm-space-4: 1rem; --zerocomm-space-5: 1.25rem; --zerocomm-space-6: 1.5rem; --zerocomm-space-8: 2rem; --zerocomm-space-10: 2.5rem; --zerocomm-space-12: 3rem; --zerocomm-space-16: 4rem; /* Semantic spacing aliases */ --zerocomm-spacing-xs: var(--zerocomm-space-2); /* 0.5rem */ --zerocomm-spacing-sm: var(--zerocomm-space-3); /* 0.75rem */ --zerocomm-spacing-md: var(--zerocomm-space-4); /* 1rem */ --zerocomm-spacing-lg: var(--zerocomm-space-6); /* 1.5rem */ --zerocomm-spacing-xl: var(--zerocomm-space-8); /* 2rem */ } /* -------------------------------------------------------------------------- 8. Border Radius -------------------------------------------------------------------------- */ :root { --zerocomm-radius-none: 0; --zerocomm-radius-sm: 0.25rem; --zerocomm-radius-md: 0.5rem; --zerocomm-radius-lg: 0.75rem; --zerocomm-radius-xl: 1rem; --zerocomm-radius-full: 9999px; } /* -------------------------------------------------------------------------- 9. Focus Ring -------------------------------------------------------------------------- */ :root { --zerocomm-focus-ring: 2px solid #FF5E99; --zerocomm-focus-ring-offset: 2px; --zerocomm-color-accent-pink: #FF5E99; --zerocomm-font-family-base: var(--zerocomm-font-family-body); } /* -------------------------------------------------------------------------- 10. Motion Tokens -------------------------------------------------------------------------- */ :root { --zerocomm-duration-instant: 0ms; --zerocomm-duration-fast: 150ms; --zerocomm-duration-normal: 250ms; --zerocomm-duration-slow: 400ms; --zerocomm-duration-spin: 0.6s; --zerocomm-ease-default: cubic-bezier(0.4, 0, 0.2, 1); --zerocomm-ease-in: cubic-bezier(0.4, 0, 1, 1); --zerocomm-ease-out: cubic-bezier(0, 0, 0.2, 1); } /* -------------------------------------------------------------------------- 11. Reduced Motion -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --zerocomm-duration-instant: 0ms; --zerocomm-duration-fast: 0ms; --zerocomm-duration-normal: 0ms; --zerocomm-duration-slow: 0ms; --zerocomm-duration-spin: 0ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }