Mercurial
view design_system/src/styles/reference.css @ 259:667156fcd3e3
Add dev-only cyberpunk JRPG page
| author | MrJuneJune <me@mrjunejune.com> |
|---|---|
| date | Wed, 05 Aug 2026 09:19:41 -0700 |
| parents | 60a876c4587a |
| children |
line wrap: on
line source
:root { --zenbu-ref-color-black: #000000; --zenbu-ref-color-white: #ffffff; --zenbu-ref-color-transparent: transparent; --zenbu-ref-color-neutral-50: #fffdf7; --zenbu-ref-color-neutral-100: #f7f3e8; --zenbu-ref-color-neutral-200: #ece5d5; --zenbu-ref-color-neutral-300: #ddd2bd; --zenbu-ref-color-neutral-400: #b9aa90; --zenbu-ref-color-neutral-500: #8e8069; --zenbu-ref-color-neutral-600: #6f6351; --zenbu-ref-color-neutral-700: #564c3e; --zenbu-ref-color-neutral-800: #3b352d; --zenbu-ref-color-neutral-900: #27241f; --zenbu-ref-color-neutral-950: #171613; --zenbu-ref-color-brand-100: #e4eaf2; --zenbu-ref-color-brand-200: #cbd7e6; --zenbu-ref-color-brand-300: #a6bad2; --zenbu-ref-color-brand-400: #7b99b8; --zenbu-ref-color-brand-500: #5c7d9d; --zenbu-ref-color-brand-600: #48647f; --zenbu-ref-color-brand-700: #3c5167; --zenbu-ref-color-brand-800: #354655; --zenbu-ref-color-brand-900: #303c49; --zenbu-ref-color-danger-100: #f9e9e2; --zenbu-ref-color-danger-300: #dda995; --zenbu-ref-color-danger-500: #a9553f; --zenbu-ref-color-danger-600: #8f4132; --zenbu-ref-color-danger-700: #71342a; --zenbu-ref-color-danger-900: #4b2924; --zenbu-ref-color-success-100: #e9edd5; --zenbu-ref-color-success-300: #afbf79; --zenbu-ref-color-success-500: #6d8139; --zenbu-ref-color-success-600: #55672d; --zenbu-ref-color-success-700: #424f27; --zenbu-ref-color-success-900: #303923; --zenbu-ref-color-warning-100: #fcebd1; --zenbu-ref-color-warning-300: #efb670; --zenbu-ref-color-warning-500: #c76a26; --zenbu-ref-color-warning-600: #a94f1c; --zenbu-ref-color-warning-700: #873d1b; --zenbu-ref-color-warning-900: #5b2d1d; --zenbu-ref-color-amber-50: #fffbea; --zenbu-ref-color-amber-100: #f6efc6; --zenbu-ref-color-amber-300: #d9c455; --zenbu-ref-color-amber-600: #80651e; --zenbu-ref-color-orange-100: #fcebd1; --zenbu-ref-color-orange-300: #efb670; --zenbu-ref-color-rose-100: #f8e7e7; --zenbu-ref-color-rose-300: #dfa9ad; --zenbu-ref-color-rose-600: #924550; --zenbu-ref-color-violet-100: #eee7ee; --zenbu-ref-color-violet-500: #916f91; --zenbu-ref-color-violet-700: #5e465d; --zenbu-ref-color-blue-600: #48647f; --zenbu-ref-color-blue-900: #303c49; --zenbu-ref-color-blue-950: #1c252e; --zenbu-ref-color-midnight-700: #211049; --zenbu-ref-color-midnight-800: #140b2d; --zenbu-ref-color-midnight-900: #0b0718; --zenbu-ref-color-midnight-950: #05040d; --zenbu-ref-color-electric-cyan: #35e8ff; --zenbu-ref-color-electric-magenta: #ff3cac; --zenbu-ref-color-electric-violet: #8c52ff; --zenbu-ref-color-electric-yellow: #f7f63d; --zenbu-ref-color-electric-mint: #4dffc3; --zenbu-ref-color-electric-ice: #f5f6ff; --zenbu-ref-color-electric-slate: #a9afd0; --zenbu-ref-color-accent: #ffb000; --zenbu-ref-color-accent-hover: #ffca4a; --zenbu-ref-color-accent-pressed: #9e8124; --zenbu-ref-color-info: #2764d7; --zenbu-ref-color-success: #18794e; --zenbu-ref-color-warning: #9a5b00; --zenbu-ref-color-danger: #c62f3e; --zenbu-ref-color-focus: #7c3aed; --zenbu-ref-color-link-decoration: #ae5b65; --zenbu-ref-color-black-alpha-8: rgba(0, 0, 0, 0.08); --zenbu-ref-color-black-alpha-60: rgba(0, 0, 0, 0.6); --zenbu-ref-space-0: 0; --zenbu-ref-space-0-5: 0.125rem; --zenbu-ref-space-1: 0.25rem; --zenbu-ref-space-1-5: 0.375rem; --zenbu-ref-space-2: 0.5rem; --zenbu-ref-space-2-5: 0.625rem; --zenbu-ref-space-3: 0.75rem; --zenbu-ref-space-4: 1rem; --zenbu-ref-space-5: 1.25rem; --zenbu-ref-space-6: 1.5rem; --zenbu-ref-space-8: 2rem; --zenbu-ref-space-10: 2.5rem; --zenbu-ref-space-12: 3rem; --zenbu-ref-space-16: 4rem; --zenbu-ref-space-20: 5rem; --zenbu-ref-space-24: 6rem; --zenbu-ref-font-family-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --zenbu-ref-font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace; --zenbu-ref-font-size-xs: 0.75rem; --zenbu-ref-font-size-sm: 0.875rem; --zenbu-ref-font-size-md: 1rem; --zenbu-ref-font-size-lg: 1.125rem; --zenbu-ref-font-size-xl: 1.25rem; --zenbu-ref-font-size-2xl: 1.5rem; --zenbu-ref-font-size-3xl: 2rem; --zenbu-ref-font-size-display: 2.5rem; --zenbu-ref-font-weight-regular: 400; --zenbu-ref-font-weight-medium: 500; --zenbu-ref-font-weight-strong: 600; --zenbu-ref-font-weight-bold: 700; --zenbu-ref-line-height-tight: 1.15; --zenbu-ref-line-height-heading: 1.25; --zenbu-ref-line-height-ui: 1.4; --zenbu-ref-line-height-body: 1.55; --zenbu-ref-line-height-reading: 1.7; --zenbu-ref-letter-spacing-tight: -0.02em; --zenbu-ref-letter-spacing-normal: 0; --zenbu-ref-letter-spacing-wide: 0.02em; --zenbu-ref-letter-spacing-caps: 0.06em; --zenbu-ref-radius-0: 0; --zenbu-ref-radius-1: 0.25rem; --zenbu-ref-radius-2: 0.5rem; --zenbu-ref-radius-3: 0.75rem; --zenbu-ref-radius-4: 1rem; --zenbu-ref-radius-5: 1.5rem; --zenbu-ref-radius-6: 2rem; --zenbu-ref-radius-round: 9999px; --zenbu-ref-stroke-0: 0; --zenbu-ref-stroke-1: 1px; --zenbu-ref-stroke-2: 2px; --zenbu-ref-stroke-3: 3px; --zenbu-ref-shadow-1: 3px 3px 0 rgba(23, 26, 33, 0.12); --zenbu-ref-shadow-2: 5px 5px 0 rgba(23, 26, 33, 0.16); --zenbu-ref-shadow-3: 7px 7px 0 rgba(23, 26, 33, 0.18); --zenbu-ref-shadow-4: 10px 10px 0 rgba(23, 26, 33, 0.2); --zenbu-ref-duration-instant: 50ms; --zenbu-ref-duration-fast: 120ms; --zenbu-ref-duration-normal: 200ms; --zenbu-ref-duration-slow: 300ms; --zenbu-ref-duration-deliberate: 500ms; --zenbu-ref-ease-linear: linear; --zenbu-ref-ease-standard: cubic-bezier(0.2, 0, 0, 1); --zenbu-ref-ease-enter: cubic-bezier(0, 0, 0, 1); --zenbu-ref-ease-exit: cubic-bezier(0.3, 0, 1, 1); --zenbu-ref-ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1); --zenbu-ref-opacity-disabled: 0.45; --zenbu-ref-opacity-muted: 0.7; --zenbu-ref-opacity-backdrop: 0.6; --zenbu-ref-size-icon-xs: 0.75rem; --zenbu-ref-size-icon-sm: 0.875rem; --zenbu-ref-size-icon-md: 1rem; --zenbu-ref-size-icon-lg: 1.25rem; --zenbu-ref-size-icon-xl: 1.5rem; --zenbu-ref-size-control-xs: 2rem; --zenbu-ref-size-control-sm: 2.25rem; --zenbu-ref-size-control-md: 2.75rem; --zenbu-ref-size-control-lg: 3.25rem; --zenbu-ref-size-control-xl: 3.75rem; --zenbu-ref-size-target-min: 2.75rem; --zenbu-ref-z-base: 0; --zenbu-ref-z-sticky: 100; --zenbu-ref-z-dropdown: 300; --zenbu-ref-z-popover: 400; --zenbu-ref-z-notification: 600; --zenbu-ref-z-modal: 800; --zenbu-ref-z-critical: 1000; }