/** * EurekaOrange Design System — v1.0.0 * CSS Custom Properties + Utility Classes * https://eurekaorange.io * * Usage: * * */ /* ============================================================ 1. PRIMITIVE TOKENS ============================================================ */ :root { /* --- Color: Jade (Primary) --- */ --eo-jade-50: #e8fdf6; --eo-jade-100: #c4f7e8; --eo-jade-200: #8eefd4; --eo-jade-300: #52e2bc; --eo-jade-400: #1ecfa3; /* Primary brand color */ --eo-jade-500: #0fb389; --eo-jade-600: #098f6d; --eo-jade-700: #066b51; --eo-jade-800: #034636; --eo-jade-900: #01231b; /* --- Color: Ink (Neutral) --- */ --eo-ink-0: #ffffff; --eo-ink-50: #f5f5f3; --eo-ink-100: #e8e7e3; --eo-ink-200: #c8c7c0; --eo-ink-300: #9b9a91; --eo-ink-400: #6e6d63; --eo-ink-500: #484740; --eo-ink-600: #2e2d28; --eo-ink-700: #1c1b18; --eo-ink-800: #111110; --eo-ink-900: #080807; /* --- Color: Status --- */ --eo-success: #22c55e; --eo-warning: #f59e0b; --eo-error: #ef4444; --eo-info: #3b82f6; /* --- Color: Accent --- */ --eo-electric: #a855f7; --eo-acid: #84cc16; --eo-ice: #06b6d4; /* --- Typography: Font families --- */ --eo-font-display: 'Space Grotesk', sans-serif; --eo-font-mono: 'DM Mono', monospace; --eo-font-code: 'Space Mono', monospace; /* --- Typography: Scale --- */ --eo-text-xs: 0.75rem; /* 12px */ --eo-text-sm: 0.875rem; /* 14px */ --eo-text-base: 1rem; /* 16px */ --eo-text-lg: 1.125rem; /* 18px */ --eo-text-xl: 1.25rem; /* 20px */ --eo-text-2xl: 1.5rem; /* 24px */ --eo-text-3xl: 1.875rem; /* 30px */ --eo-text-4xl: 2.25rem; /* 36px */ --eo-text-5xl: 3rem; /* 48px */ --eo-text-6xl: 3.75rem; /* 60px */ --eo-text-7xl: 4.5rem; /* 72px */ --eo-text-8xl: 6rem; /* 96px */ /* --- Typography: Line height --- */ --eo-leading-none: 1; --eo-leading-tight: 1.25; --eo-leading-snug: 1.375; --eo-leading-normal: 1.5; --eo-leading-relaxed: 1.625; --eo-leading-loose: 2; /* --- Typography: Letter spacing --- */ --eo-tracking-tight: -0.04em; --eo-tracking-snug: -0.02em; --eo-tracking-normal: 0em; --eo-tracking-wide: 0.05em; --eo-tracking-wider: 0.1em; --eo-tracking-widest: 0.15em; /* --- Typography: Font weight --- */ --eo-weight-light: 300; --eo-weight-normal: 400; --eo-weight-medium: 500; --eo-weight-semibold: 600; --eo-weight-bold: 700; /* --- Spacing: 4px base grid --- */ --eo-space-px: 1px; --eo-space-0: 0px; --eo-space-1: 0.25rem; /* 4px */ --eo-space-2: 0.5rem; /* 8px */ --eo-space-3: 0.75rem; /* 12px */ --eo-space-4: 1rem; /* 16px */ --eo-space-5: 1.25rem; /* 20px */ --eo-space-6: 1.5rem; /* 24px */ --eo-space-7: 1.75rem; /* 28px */ --eo-space-8: 2rem; /* 32px */ --eo-space-9: 2.25rem; /* 36px */ --eo-space-10: 2.5rem; /* 40px */ --eo-space-12: 3rem; /* 48px */ --eo-space-14: 3.5rem; /* 56px */ --eo-space-16: 4rem; /* 64px */ --eo-space-20: 5rem; /* 80px */ --eo-space-24: 6rem; /* 96px */ --eo-space-28: 7rem; /* 112px */ --eo-space-32: 8rem; /* 128px */ --eo-space-40: 10rem; /* 160px */ --eo-space-48: 12rem; /* 192px */ --eo-space-56: 14rem; /* 224px */ --eo-space-64: 16rem; /* 256px */ /* --- Border radius --- */ --eo-radius-none: 0px; --eo-radius-sm: 4px; --eo-radius-md: 8px; --eo-radius-lg: 12px; --eo-radius-xl: 16px; --eo-radius-2xl: 20px; --eo-radius-3xl: 28px; --eo-radius-4xl: 32px; --eo-radius-full: 9999px; /* --- Shadow --- */ --eo-shadow-xs: 0 1px 2px rgba(0,0,0,0.3); --eo-shadow-sm: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3); --eo-shadow-md: 0 4px 12px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3); --eo-shadow-lg: 0 10px 30px rgba(0,0,0,0.6), 0 4px 8px rgba(0,0,0,0.3); --eo-shadow-xl: 0 20px 60px rgba(0,0,0,0.7); --eo-shadow-glow: 0 0 40px rgba(30,207,163,0.35), 0 0 80px rgba(30,207,163,0.15); --eo-shadow-glow-sm: 0 0 16px rgba(30,207,163,0.4); /* --- Motion: Duration --- */ --eo-duration-instant: 80ms; --eo-duration-fast: 150ms; --eo-duration-normal: 220ms; --eo-duration-slow: 350ms; --eo-duration-crawl: 500ms; /* --- Motion: Easing --- */ --eo-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --eo-ease-in-out: cubic-bezier(0.45, 0, 0.55, 1); --eo-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --eo-ease-in: cubic-bezier(0.4, 0, 1, 1); --eo-ease-linear: linear; /* --- Motion: Shorthand transitions --- */ --eo-transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1); --eo-transition-normal: 220ms cubic-bezier(0.16, 1, 0.3, 1); --eo-transition-slow: 350ms cubic-bezier(0.45, 0, 0.55, 1); --eo-transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1); /* --- Grid --- */ --eo-grid-cols: 12; --eo-grid-gutter: var(--eo-space-6); /* 24px */ --eo-grid-margin: var(--eo-space-8); /* 32px */ --eo-container-sm: 640px; --eo-container-md: 768px; --eo-container-lg: 1024px; --eo-container-xl: 1280px; --eo-container-2xl:1536px; } /* ============================================================ 2. SEMANTIC TOKENS — DARK MODE (default) ============================================================ */ :root, [data-theme="dark"] { /* Surface */ --eo-surface-bg: #0d0d0b; --eo-surface-base: #131311; --eo-surface-raised: #1a1a17; --eo-surface-overlay: #222220; --eo-surface-border: rgba(255, 255, 255, 0.07); /* Text — WCAG AA compliant on surface-bg */ --eo-text-primary: #ffffff; /* 21:1 */ --eo-text-secondary: #9b9a91; /* 7.1:1 — AAA */ --eo-text-tertiary: #84837a; /* 5.0:1 — AA (bumped from #6e6d63) */ --eo-text-disabled: #484740; /* 2.0:1 — decorative only */ --eo-text-on-accent: #0d0d0b; /* Accent */ --eo-accent: #1ecfa3; /* 10.2:1 on bg — text & UI */ --eo-accent-text: #1ecfa3; /* alias for text use (dark mode) */ --eo-accent-hover: #52e2bc; --eo-accent-active: #0fb389; --eo-accent-subtle: rgba(30, 207, 163, 0.12); --eo-accent-border: rgba(30, 207, 163, 0.30); --eo-focus-ring: rgba(30, 207, 163, 0.55); /* Status (dark-tuned) */ --eo-status-success: #22c55e; --eo-status-warning: #f59e0b; --eo-status-error: #ef4444; --eo-status-info: #3b82f6; } /* ============================================================ 3. SEMANTIC TOKENS — LIGHT MODE ============================================================ */ [data-theme="light"] { /* Surface */ --eo-surface-bg: #f8f8f6; --eo-surface-base: #ffffff; --eo-surface-raised: #f2f2ef; --eo-surface-overlay: #eaeae6; --eo-surface-border: rgba(0, 0, 0, 0.08); /* Text */ --eo-text-primary: #111110; --eo-text-secondary: #484740; --eo-text-tertiary: #6e6d63; --eo-text-disabled: #9b9a91; --eo-text-on-accent: #ffffff; /* Accent */ --eo-accent: #0fb389; /* UI fill — 4.86:1 with #fff text */ --eo-accent-text: #066b51; /* AA text color — 5.5:1 on light bg */ --eo-accent-hover: #1ecfa3; --eo-accent-active: #098f6d; --eo-accent-subtle: rgba(15, 179, 137, 0.10); --eo-accent-border: rgba(15, 179, 137, 0.30); --eo-focus-ring: rgba(15, 179, 137, 0.50); /* Status (light-tuned) */ --eo-status-success: #16a34a; --eo-status-warning: #d97706; --eo-status-error: #dc2626; --eo-status-info: #2563eb; /* Shadows (light) */ --eo-shadow-xs: 0 1px 2px rgba(0,0,0,0.06); --eo-shadow-sm: 0 1px 3px rgba(0,0,0,0.08); --eo-shadow-md: 0 4px 12px rgba(0,0,0,0.10); --eo-shadow-lg: 0 10px 30px rgba(0,0,0,0.12); --eo-shadow-xl: 0 20px 60px rgba(0,0,0,0.14); --eo-shadow-glow: 0 0 24px rgba(15,179,137,0.20); --eo-shadow-glow-sm: 0 0 12px rgba(15,179,137,0.25); } /* ============================================================ 4. REDUCED MOTION ============================================================ */ @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; } } /* ============================================================ 5. BASE / RESET ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--eo-font-display); font-size: var(--eo-text-base); line-height: var(--eo-leading-normal); color: var(--eo-text-primary); background: var(--eo-surface-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ::selection { background: var(--eo-accent-subtle); color: var(--eo-text-primary); } :focus-visible { outline: 2px solid var(--eo-accent); outline-offset: 3px; border-radius: 2px; } /* Remove default outline only when focus-visible takes over */ :focus:not(:focus-visible) { outline: none; } img, svg { display: block; max-width: 100%; } /* ============================================================ 5b. ACCESSIBILITY UTILITIES ============================================================ */ /* Visually hidden but accessible to screen readers */ .eo-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Skip-to-content link — appears on focus */ .eo-skip-link { position: absolute; top: -40px; left: var(--eo-space-4); z-index: 9999; padding: var(--eo-space-2) var(--eo-space-4); background: var(--eo-accent); color: var(--eo-text-on-accent); font-family: var(--eo-font-mono); font-size: var(--eo-text-sm); font-weight: var(--eo-weight-semibold); border-radius: var(--eo-radius-md); text-decoration: none; transition: top var(--eo-transition-fast); } .eo-skip-link:focus { top: var(--eo-space-4); outline: 2px solid var(--eo-text-primary); outline-offset: 2px; } /* ============================================================ 6. TYPOGRAPHY UTILITIES ============================================================ */ /* Size */ .eo-text-xs { font-size: var(--eo-text-xs); } .eo-text-sm { font-size: var(--eo-text-sm); } .eo-text-base { font-size: var(--eo-text-base); } .eo-text-lg { font-size: var(--eo-text-lg); } .eo-text-xl { font-size: var(--eo-text-xl); } .eo-text-2xl { font-size: var(--eo-text-2xl); } .eo-text-3xl { font-size: var(--eo-text-3xl); } .eo-text-4xl { font-size: var(--eo-text-4xl); } .eo-text-5xl { font-size: var(--eo-text-5xl); } .eo-text-6xl { font-size: var(--eo-text-6xl); } .eo-text-7xl { font-size: var(--eo-text-7xl); } .eo-text-8xl { font-size: var(--eo-text-8xl); } /* Weight */ .eo-font-light { font-weight: var(--eo-weight-light); } .eo-font-normal { font-weight: var(--eo-weight-normal); } .eo-font-medium { font-weight: var(--eo-weight-medium); } .eo-font-semibold { font-weight: var(--eo-weight-semibold); } .eo-font-bold { font-weight: var(--eo-weight-bold); } /* Family */ .eo-font-display { font-family: var(--eo-font-display); } .eo-font-mono { font-family: var(--eo-font-mono); } .eo-font-code { font-family: var(--eo-font-code); } /* Color */ .eo-text-primary { color: var(--eo-text-primary); } .eo-text-secondary { color: var(--eo-text-secondary); } .eo-text-tertiary { color: var(--eo-text-tertiary); } .eo-text-disabled { color: var(--eo-text-disabled); } .eo-text-accent { color: var(--eo-accent); } .eo-text-success { color: var(--eo-status-success); } .eo-text-warning { color: var(--eo-status-warning); } .eo-text-error { color: var(--eo-status-error); } /* Display headings */ .eo-heading-display { font-family: var(--eo-font-display); font-weight: var(--eo-weight-bold); letter-spacing: var(--eo-tracking-tight); line-height: var(--eo-leading-none); text-wrap: pretty; } .eo-heading-1 { font-size: var(--eo-text-5xl); } .eo-heading-2 { font-size: var(--eo-text-4xl); } .eo-heading-3 { font-size: var(--eo-text-3xl); } .eo-heading-4 { font-size: var(--eo-text-2xl); } .eo-heading-5 { font-size: var(--eo-text-xl); } .eo-heading-6 { font-size: var(--eo-text-lg); } .eo-label { font-family: var(--eo-font-mono); font-size: var(--eo-text-xs); font-weight: var(--eo-weight-medium); letter-spacing: var(--eo-tracking-widest); text-transform: uppercase; color: var(--eo-text-tertiary); } .eo-gradient-text { background: linear-gradient(135deg, var(--eo-jade-300) 0%, var(--eo-jade-400) 50%, var(--eo-jade-500) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ============================================================ 7. LAYOUT — CONTAINER & GRID ============================================================ */ .eo-container { width: 100%; margin-inline: auto; padding-inline: var(--eo-grid-margin); } .eo-container-sm { max-width: var(--eo-container-sm); } .eo-container-md { max-width: var(--eo-container-md); } .eo-container-lg { max-width: var(--eo-container-lg); } .eo-container-xl { max-width: var(--eo-container-xl); } .eo-container-2xl { max-width: var(--eo-container-2xl); } /* 12-column grid */ .eo-grid { display: grid; grid-template-columns: repeat(var(--eo-grid-cols), minmax(0, 1fr)); gap: var(--eo-grid-gutter); } .eo-col-1 { grid-column: span 1; } .eo-col-2 { grid-column: span 2; } .eo-col-3 { grid-column: span 3; } .eo-col-4 { grid-column: span 4; } .eo-col-5 { grid-column: span 5; } .eo-col-6 { grid-column: span 6; } .eo-col-7 { grid-column: span 7; } .eo-col-8 { grid-column: span 8; } .eo-col-9 { grid-column: span 9; } .eo-col-10 { grid-column: span 10; } .eo-col-11 { grid-column: span 11; } .eo-col-12 { grid-column: span 12; } .eo-col-full { grid-column: 1 / -1; } /* Flex utilities */ .eo-flex { display: flex; } .eo-flex-col { display: flex; flex-direction: column; } .eo-flex-wrap { flex-wrap: wrap; } .eo-items-center { align-items: center; } .eo-items-start { align-items: flex-start; } .eo-items-end { align-items: flex-end; } .eo-justify-center { justify-content: center; } .eo-justify-between { justify-content: space-between; } .eo-justify-end { justify-content: flex-end; } .eo-gap-1 { gap: var(--eo-space-1); } .eo-gap-2 { gap: var(--eo-space-2); } .eo-gap-3 { gap: var(--eo-space-3); } .eo-gap-4 { gap: var(--eo-space-4); } .eo-gap-6 { gap: var(--eo-space-6); } .eo-gap-8 { gap: var(--eo-space-8); } .eo-gap-10 { gap: var(--eo-space-10); } .eo-gap-12 { gap: var(--eo-space-12); } /* ============================================================ 8. SURFACE & BACKGROUND UTILITIES ============================================================ */ .eo-bg-base { background: var(--eo-surface-base); } .eo-bg-raised { background: var(--eo-surface-raised); } .eo-bg-overlay { background: var(--eo-surface-overlay); } .eo-bg-accent { background: var(--eo-accent); color: var(--eo-text-on-accent); } .eo-bg-accent-subtle { background: var(--eo-accent-subtle); } .eo-border { border: 1px solid var(--eo-surface-border); } .eo-border-accent { border: 1px solid var(--eo-accent-border); } .eo-rounded-sm { border-radius: var(--eo-radius-sm); } .eo-rounded-md { border-radius: var(--eo-radius-md); } .eo-rounded-lg { border-radius: var(--eo-radius-lg); } .eo-rounded-xl { border-radius: var(--eo-radius-xl); } .eo-rounded-2xl { border-radius: var(--eo-radius-2xl); } .eo-rounded-full { border-radius: var(--eo-radius-full); } .eo-shadow-sm { box-shadow: var(--eo-shadow-sm); } .eo-shadow-md { box-shadow: var(--eo-shadow-md); } .eo-shadow-lg { box-shadow: var(--eo-shadow-lg); } .eo-shadow-xl { box-shadow: var(--eo-shadow-xl); } .eo-shadow-glow { box-shadow: var(--eo-shadow-glow); } .eo-shadow-glow-sm { box-shadow: var(--eo-shadow-glow-sm); } /* Card shorthand */ .eo-card { background: var(--eo-surface-raised); border: 1px solid var(--eo-surface-border); border-radius: var(--eo-radius-xl); padding: var(--eo-space-6); } .eo-card-sm { padding: var(--eo-space-4); border-radius: var(--eo-radius-lg); } .eo-card-lg { padding: var(--eo-space-8); border-radius: var(--eo-radius-2xl); } /* ============================================================ 9. COMPONENT — BUTTON ============================================================ */ .eo-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--eo-space-2); font-family: var(--eo-font-display); font-weight: var(--eo-weight-semibold); font-size: var(--eo-text-sm); line-height: 1; padding: var(--eo-space-3) var(--eo-space-5); border-radius: var(--eo-radius-md); border: none; cursor: pointer; text-decoration: none; transition: all var(--eo-transition-fast); white-space: nowrap; user-select: none; } .eo-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* Sizes */ .eo-btn-xs { font-size: var(--eo-text-xs); padding: var(--eo-space-1) var(--eo-space-3); } .eo-btn-sm { font-size: var(--eo-text-xs); padding: var(--eo-space-2) var(--eo-space-4); } .eo-btn-lg { font-size: var(--eo-text-base); padding: var(--eo-space-4) var(--eo-space-7); } .eo-btn-xl { font-size: var(--eo-text-lg); padding: var(--eo-space-4) var(--eo-space-8); } /* Variants */ .eo-btn-primary { background: var(--eo-accent); color: var(--eo-text-on-accent); box-shadow: 0 0 0 rgba(30,207,163,0); } .eo-btn-primary:hover:not(:disabled) { background: var(--eo-accent-hover); box-shadow: var(--eo-shadow-glow-sm); transform: translateY(-1px); } .eo-btn-secondary { background: transparent; color: var(--eo-accent); border: 1px solid var(--eo-accent-border); } .eo-btn-secondary:hover:not(:disabled) { background: var(--eo-accent-subtle); } .eo-btn-ghost { background: rgba(255,255,255,0.05); color: var(--eo-text-secondary); border: 1px solid var(--eo-surface-border); } .eo-btn-ghost:hover:not(:disabled) { background: rgba(255,255,255,0.08); } .eo-btn-danger { background: rgba(239,68,68,0.12); color: var(--eo-status-error); border: 1px solid rgba(239,68,68,0.28); } .eo-btn-danger:hover:not(:disabled) { background: rgba(239,68,68,0.18); } .eo-btn-icon { padding: var(--eo-space-2); border-radius: var(--eo-radius-md); aspect-ratio: 1; } .eo-btn-icon.eo-btn-round { border-radius: var(--eo-radius-full); } /* ============================================================ 10. COMPONENT — BADGE ============================================================ */ .eo-badge { display: inline-flex; align-items: center; gap: var(--eo-space-1); font-family: var(--eo-font-mono); font-size: var(--eo-text-xs); font-weight: var(--eo-weight-medium); letter-spacing: var(--eo-tracking-wide); padding: 2px var(--eo-space-3); border-radius: var(--eo-radius-full); border: 1px solid transparent; white-space: nowrap; } .eo-badge-default { background: var(--eo-accent-subtle); color: var(--eo-accent-hover); border-color: var(--eo-accent-border); } .eo-badge-success { background: rgba(34,197,94,0.12); color: #4ade80; border-color: rgba(34,197,94,0.3); } .eo-badge-warning { background: rgba(245,158,11,0.12); color: #fbbf24; border-color: rgba(245,158,11,0.3); } .eo-badge-error { background: rgba(239,68,68,0.12); color: #f87171; border-color: rgba(239,68,68,0.3); } .eo-badge-info { background: rgba(59,130,246,0.12); color: #93c5fd; border-color: rgba(59,130,246,0.3); } .eo-badge-neutral { background: rgba(255,255,255,0.06); color: var(--eo-text-secondary); border-color: var(--eo-surface-border); } /* ============================================================ 11. COMPONENT — INPUT ============================================================ */ .eo-input, .eo-textarea, .eo-select { display: block; width: 100%; font-family: var(--eo-font-display); font-size: var(--eo-text-sm); line-height: var(--eo-leading-normal); color: var(--eo-text-primary); background: rgba(255,255,255,0.04); border: 1px solid var(--eo-surface-border); border-radius: var(--eo-radius-md); padding: var(--eo-space-3) var(--eo-space-4); outline: none; transition: border-color var(--eo-transition-fast), box-shadow var(--eo-transition-fast); appearance: none; } .eo-input::placeholder, .eo-textarea::placeholder { color: var(--eo-text-disabled); } .eo-input:focus, .eo-textarea:focus, .eo-select:focus { border-color: var(--eo-accent); box-shadow: 0 0 0 3px var(--eo-focus-ring); } .eo-input-error { border-color: var(--eo-status-error); } .eo-input-error:focus { box-shadow: 0 0 0 3px rgba(239,68,68,0.15); } .eo-textarea { resize: vertical; min-height: 80px; } .eo-input-group { position: relative; display: flex; align-items: center; } .eo-input-prefix, .eo-input-suffix { position: absolute; color: var(--eo-text-tertiary); font-size: var(--eo-text-sm); pointer-events: none; } .eo-input-prefix { left: var(--eo-space-3); } .eo-input-suffix { right: var(--eo-space-3); } .eo-input-group .eo-input { padding-left: var(--eo-space-8); } .eo-input-group:has(.eo-input-suffix) .eo-input { padding-right: var(--eo-space-8); } /* Form label */ .eo-form-label { display: block; font-size: var(--eo-text-sm); font-weight: var(--eo-weight-medium); color: var(--eo-text-secondary); margin-bottom: var(--eo-space-2); } .eo-form-hint { font-size: var(--eo-text-xs); color: var(--eo-text-tertiary); margin-top: var(--eo-space-1); } .eo-form-error { font-size: var(--eo-text-xs); color: var(--eo-status-error); margin-top: var(--eo-space-1); } .eo-form-group { display: flex; flex-direction: column; gap: 0; } /* ============================================================ 12. COMPONENT — TOGGLE ============================================================ */ .eo-toggle { position: relative; display: inline-block; width: 44px; height: 24px; cursor: pointer; flex-shrink: 0; } .eo-toggle input { opacity: 0; width: 0; height: 0; } .eo-toggle-track { position: absolute; inset: 0; background: var(--eo-surface-overlay); border: 1px solid var(--eo-surface-border); border-radius: var(--eo-radius-full); transition: background var(--eo-transition-normal), box-shadow var(--eo-transition-normal); } .eo-toggle-thumb { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: var(--eo-radius-full); background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: left var(--eo-transition-spring); } .eo-toggle input:checked ~ .eo-toggle-track { background: var(--eo-accent); border-color: transparent; box-shadow: var(--eo-shadow-glow-sm); } .eo-toggle input:checked ~ .eo-toggle-thumb { left: 23px; } .eo-toggle input:focus-visible ~ .eo-toggle-track { outline: 2px solid var(--eo-accent); outline-offset: 2px; } /* ============================================================ 13. COMPONENT — DIVIDER ============================================================ */ .eo-divider { border: none; border-top: 1px solid var(--eo-surface-border); margin: var(--eo-space-6) 0; } .eo-divider-accent { border-color: var(--eo-accent-border); } /* ============================================================ 14. SPACING UTILITIES ============================================================ */ .eo-p-0 { padding: var(--eo-space-0); } .eo-p-1 { padding: var(--eo-space-1); } .eo-p-2 { padding: var(--eo-space-2); } .eo-p-3 { padding: var(--eo-space-3); } .eo-p-4 { padding: var(--eo-space-4); } .eo-p-5 { padding: var(--eo-space-5); } .eo-p-6 { padding: var(--eo-space-6); } .eo-p-8 { padding: var(--eo-space-8); } .eo-p-10 { padding: var(--eo-space-10); } .eo-p-12 { padding: var(--eo-space-12); } .eo-m-auto { margin: auto; } .eo-mx-auto { margin-inline: auto; } .eo-w-full { width: 100%; } .eo-h-full { height: 100%; } .eo-min-h-screen { min-height: 100vh; } /* ============================================================ 15. SCROLLBAR ============================================================ */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--eo-surface-base); } ::-webkit-scrollbar-thumb { background: var(--eo-ink-600); border-radius: var(--eo-radius-full); } ::-webkit-scrollbar-thumb:hover { background: var(--eo-accent); }