/* ========================================================================== CoinLottery Design System — Phase 1 (Tokens) -------------------------------------------------------------------------- ADDITIVE LAYER. This file ONLY declares :root design tokens. It MUST NOT redefine any selector used by the existing site. The new tokens are namespaced with the --cl- prefix so they coexist with the legacy variables in css/styles.css without collision. -------------------------------------------------------------------------- Usage: include AFTER all legacy CSS so future cl-* components and the redesigned pages can read these tokens. Loading order does not affect visual baseline because no existing class uses these variables yet. ========================================================================== */ :root { /* ---------- Brand palette (CoinLottery, kept) ---------- */ --cl-color-gold-50: #FFF8E1; --cl-color-gold-100: #FFECB3; --cl-color-gold-200: #FFE082; --cl-color-gold-300: #FFD54F; --cl-color-gold-400: #FFCA28; --cl-color-gold-500: #FFD700; /* primary */ --cl-color-gold-600: #FFA500; /* primary deep */ --cl-color-gold-700: #B8860B; --cl-color-gold-800: #8B6914; --cl-color-midnight-900: #0a0a1a; /* page bg deep */ --cl-color-midnight-800: #14142b; --cl-color-midnight-700: #1a1a2e; /* main bg */ --cl-color-midnight-600: #232347; --cl-color-midnight-500: #2b3258; --cl-color-purple-900: #1a0a2e; --cl-color-purple-800: #2d1150; --cl-color-purple-700: #3d1a6a; --cl-color-purple-600: #59005c; --cl-color-purple-500: #6b2fa0; --cl-color-purple-400: #775682; /* ---------- Semantic colors ---------- */ --cl-color-bg: var(--cl-color-midnight-700); --cl-color-bg-elevated: var(--cl-color-midnight-600); --cl-color-bg-deep: var(--cl-color-midnight-900); --cl-color-surface-dark: rgba(20, 20, 40, 0.85); --cl-color-surface-dark-hi: rgba(20, 20, 40, 0.95); --cl-color-surface-light: #FFFFFF; --cl-color-surface-light-alt: #F7F8FA; /* Generic surface alias used by .cl-card / .cl-card-dark default. */ --cl-color-surface: var(--cl-color-surface-dark); --cl-color-primary: var(--cl-color-gold-500); --cl-color-primary-hover: var(--cl-color-gold-600); --cl-color-primary-deep: var(--cl-color-gold-700); --cl-color-on-primary: #1a1a2e; --cl-color-text: #FFFFFF; --cl-color-text-muted: rgba(255, 255, 255, 0.72); --cl-color-text-subtle: rgba(255, 255, 255, 0.55); --cl-color-text-inverse: #1a1a2e; --cl-color-text-on-light: #2B3258; --cl-color-text-on-light-muted: #5A6378; --cl-color-border: rgba(255, 255, 255, 0.10); --cl-color-border-strong: rgba(255, 255, 255, 0.20); --cl-color-border-gold: rgba(255, 215, 0, 0.35); --cl-color-border-light: #E5E8EE; --cl-color-success: #2ED573; --cl-color-warning: #FFB020; --cl-color-danger: #FF4757; --cl-color-info: #4AABDF; /* ---------- Typography ---------- */ --cl-font-family-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Short alias required by the Phase 1 token contract. */ --cl-font-sans: var(--cl-font-family-sans); --cl-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --cl-font-weight-regular: 400; --cl-font-weight-medium: 500; --cl-font-weight-semibold: 600; --cl-font-weight-bold: 700; --cl-font-weight-extrabold: 800; --cl-font-size-xs: 12px; --cl-font-size-sm: 13px; --cl-font-size-md: 14px; --cl-font-size-base: 16px; --cl-font-size-lg: 18px; --cl-font-size-xl: 20px; --cl-font-size-2xl: 24px; --cl-font-size-3xl: 28px; --cl-font-size-4xl: 32px; --cl-font-size-5xl: 40px; --cl-font-size-6xl: 56px; --cl-font-size-7xl: 72px; --cl-line-height-tight: 1.05; --cl-line-height-snug: 1.25; --cl-line-height-base: 1.5; --cl-line-height-loose: 1.7; --cl-letter-spacing-tight: -0.02em; --cl-letter-spacing-normal: 0; --cl-letter-spacing-wide: 0.04em; /* ---------- Spacing scale ---------- Canonical scale = **4 px base step**, designed so every "even" step (--cl-space-2, -4, -6, -8, -10) lands on an 8 px grid. The design spec calls out an "8 pt grid"; we expose the finer 4 px granularity so designers can reach for 4/12/20 px when an 8 px step would feel too coarse (icon padding, micro-gap inside pills, etc.). All component-level paddings/margins in cl-components.css use steps that map to 8 px multiples. Mapping: 0 / 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 64 / 80 / 96 / 120 px. ----------------------------------- */ --cl-space-0: 0; --cl-space-1: 4px; --cl-space-2: 8px; --cl-space-3: 12px; --cl-space-4: 16px; --cl-space-5: 20px; --cl-space-6: 24px; --cl-space-7: 32px; --cl-space-8: 40px; --cl-space-9: 48px; --cl-space-10: 64px; --cl-space-11: 80px; --cl-space-12: 96px; --cl-space-13: 120px; /* ---------- Radii ---------- */ --cl-radius-xs: 6px; --cl-radius-sm: 8px; --cl-radius-md: 12px; --cl-radius-lg: 16px; --cl-radius-xl: 20px; --cl-radius-2xl: 24px; --cl-radius-3xl: 28px; --cl-radius-pill: 999px; /* ---------- Shadows ---------- */ --cl-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.20); --cl-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.25); --cl-shadow-md: 0 8px 20px rgba(0, 0, 0, 0.30); --cl-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.40); --cl-shadow-xl: 0 25px 50px rgba(0, 0, 0, 0.50); --cl-shadow-gold-sm: 0 4px 12px rgba(255, 215, 0, 0.25); --cl-shadow-gold-md: 0 8px 24px rgba(255, 215, 0, 0.35); --cl-shadow-gold-glow: 0 0 24px rgba(255, 215, 0, 0.45); /* ---------- Glassmorphism ---------- */ --cl-glass-bg: rgba(255, 255, 255, 0.05); --cl-glass-bg-strong: rgba(255, 255, 255, 0.08); --cl-glass-border: rgba(255, 255, 255, 0.12); --cl-glass-blur: blur(20px); /* ---------- Gradients ---------- */ --cl-gradient-gold: linear-gradient(135deg, #FFD700 0%, #FFA500 100%); --cl-gradient-gold-soft: linear-gradient(135deg, rgba(255, 215, 0, 0.18) 0%, rgba(255, 165, 0, 0.10) 100%); --cl-gradient-midnight: linear-gradient(135deg, #14142b 0%, #1a1a2e 50%, #0a0a1a 100%); --cl-gradient-purple: linear-gradient(135deg, rgba(89, 0, 92, 0.9) 0%, rgba(55, 31, 80, 0.9) 100%); --cl-gradient-purple-page: linear-gradient(160deg, #1a0a2e 0%, #2d1150 40%, #1a0a2e 100%); --cl-gradient-purple-hero: linear-gradient(160deg, #2d1150 0%, #3d1a6a 50%, #1a0a2e 100%); /* ---------- Z-index ---------- */ --cl-z-base: 1; --cl-z-elevated: 10; --cl-z-sticky: 100; --cl-z-dropdown: 500; --cl-z-overlay: 900; --cl-z-modal: 1000; --cl-z-popover: 1100; --cl-z-toast: 1500; --cl-z-tooltip: 2000; /* ---------- Motion ---------- */ --cl-duration-fast: 120ms; --cl-duration-base: 200ms; --cl-duration-slow: 320ms; --cl-easing-standard: cubic-bezier(0.2, 0, 0, 1); --cl-easing-emphasized: cubic-bezier(0.3, 0, 0, 1); /* ---------- Layout ---------- */ --cl-container-max: 1280px; --cl-container-max-wide: 1440px; --cl-gutter-mobile: 16px; --cl-gutter-tablet: 32px; --cl-gutter-desktop: 80px; --cl-header-height-desktop: 80px; --cl-header-height-mobile: 64px; /* ---------- Touch targets / a11y ---------- */ --cl-touch-target-min: 44px; --cl-focus-ring: 0 0 0 3px rgba(255, 215, 0, 0.55); /* ---------- Breakpoints (informational; use in @media) ---------- */ --cl-bp-mobile-s: 320px; --cl-bp-mobile-m: 375px; --cl-bp-mobile-l: 414px; --cl-bp-tablet: 768px; --cl-bp-laptop: 1024px; --cl-bp-desktop: 1280px; --cl-bp-wide: 1440px; }