spb/zyquo-cloud-web Public MIT

1/*2 *  tokens.css3 *  Zyquo Cloud Web4 *5 *  Author: Simon-Pierre Boucher6 *  Mail: contact@spboucher.ai7 *8 *  ZyquoTheme design tokens, ported 1:1 from the native app's ZyquoTheme.swift.9 *  Every color, font, spacing, radius, and shadow in the app comes from these10 *  variables — components contain zero raw hex values or magic numbers.11 *  Light is the flagship/default theme; dark derives from the same semantics.12 */1314:root {15  /* Colors — light (flagship) */16  --z-background: #fafbfd;17  --z-surface: #ffffff;18  --z-surface-secondary: #f2f4f8;19  --z-accent: #4e6af0;20  --z-accent-subtle: #ebeffd;21  --z-text-primary: #1a1c22;22  --z-text-secondary: #6b7080;23  --z-text-tertiary: #9ea3b0;24  --z-border: #e4e7ee;25  --z-success: #2fa36b;26  --z-warning: #d9822b;27  --z-danger: #d64545;28  --z-on-accent: #ffffff;2930  /* Syntax highlighting (light) */31  --z-code-keyword: var(--z-accent);32  --z-code-string: var(--z-success);33  --z-code-comment: var(--z-text-tertiary);34  --z-code-number: #b26a0b;35  --z-code-type: #2380c2;36  --z-code-function: #6e4fd4;37  --z-code-property: #2f6fbf;38  --z-code-attribute: var(--z-warning);3940  /* Typography */41  --z-font-sans:42    -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial,43    sans-serif;44  --z-font-mono:45    ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;46  --z-font-size-title: 20px;47  --z-font-size-body: 13.5px; /* user-adjustable 12–18 via --z-chat-font-size */48  --z-chat-font-size: 13.5px;49  --z-font-size-caption: 11px;50  --z-line-height-body: 1.45;5152  /* Spacing scale: 4 / 8 / 12 / 16 / 20 / 24 / 32 */53  --z-space-xxs: 4px;54  --z-space-xs: 8px;55  --z-space-sm: 12px;56  --z-space-md: 16px;57  --z-space-lg: 20px;58  --z-space-xl: 24px;59  --z-space-xxl: 32px;6061  /* Radii */62  --z-radius-small: 6px;63  --z-radius-medium: 10px;64  --z-radius-large: 14px;6566  /* Shadows — extremely soft, floating elements only */67  --z-shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.06);68  --z-shadow-panel: 0 8px 32px rgba(0, 0, 0, 0.1);6970  /* Metrics */71  --z-sidebar-width: 260px;72  --z-chat-header-height: 52px;73  --z-max-message-column: 760px;74  --z-content-inset: 16px;75  --z-hairline: 0.5px;76  --z-attachment-thumb: 56px;77  --z-turn-rhythm: 16px;78  --z-touch-target: 44px;7980  /* Motion */81  --z-motion-hover: 80ms ease-in-out;82  --z-motion-send: 150ms ease-out;83  --z-motion-pressed-scale: 0.97;8485  color-scheme: light;86}8788/* Dark theme — secondary, opt-in (never auto-default) */89:root[data-theme='dark'] {90  --z-background: #14161e;91  --z-surface: #1c1f2a;92  --z-surface-secondary: #232734;93  --z-accent: #6d84f5;94  --z-accent-subtle: #28304c;95  --z-text-primary: #e8eaf2;96  --z-text-secondary: #9ba1b5;97  --z-text-tertiary: #6a7188;98  --z-border: #2c3040;99  --z-success: #43bd83;100  --z-warning: #e59a4d;101  --z-danger: #e36363;102103  --z-code-number: #e0a458;104  --z-code-type: #62b7f0;105  --z-code-function: #a48cf2;106  --z-code-property: #7fb4e8;107108  --z-shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.3);109  --z-shadow-panel: 0 8px 32px rgba(0, 0, 0, 0.45);110111  color-scheme: dark;112}113114/* Accent variants (Settings → Appearance) */115:root[data-accent='graphite'] {116  --z-accent: #5b6270;117  --z-accent-subtle: #eef0f4;118}119:root[data-theme='dark'][data-accent='graphite'] {120  --z-accent: #8a93a6;121  --z-accent-subtle: #2a2e3a;122}123:root[data-accent='teal'] {124  --z-accent: #1d9a8f;125  --z-accent-subtle: #e6f6f4;126}127:root[data-theme='dark'][data-accent='teal'] {128  --z-accent: #3bb5aa;129  --z-accent-subtle: #1f3a38;130}131:root[data-accent='amber'] {132  --z-accent: #c77d1d;133  --z-accent-subtle: #fbf1e3;134}135:root[data-theme='dark'][data-accent='amber'] {136  --z-accent: #dd9b45;137  --z-accent-subtle: #3d3222;138}139:root[data-accent='rose'] {140  --z-accent: #c94f7c;141  --z-accent-subtle: #faeaf1;142}143:root[data-theme='dark'][data-accent='rose'] {144  --z-accent: #de7099;145  --z-accent-subtle: #3d2733;146}147148@media (prefers-reduced-motion: reduce) {149  :root {150    --z-motion-hover: 0ms;151    --z-motion-send: 0ms;152  }153  *,154  *::before,155  *::after {156    animation-duration: 0.01ms !important;157    animation-iteration-count: 1 !important;158    transition-duration: 0.01ms !important;159  }160}161