/** * Weizza Vision AIO — design tokens (load first on every page). * * v5 token contract. Three themes, switched by data-theme on : * (none) / "glass" — Obsidian Glass (dark, translucent panels, teal) * "command" — Command Deck (dark, opaque, mono, lime) * "studio" — Studio Light (light, paper, ink blue) * * New surfaces read the --q-* names. Legacy page CSS keeps reading the * old --color-* / --text-* names, which are re-pointed per theme below, * so unconverted pages follow the theme automatically. */ :root { /* Typography */ --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; /* ---- v5 theme tokens · Obsidian Glass (default) ---- */ --q-bg: #06080C; --q-canvas: #0A0E14; --q-panel: rgba(255, 255, 255, 0.055); --q-panel-solid: #151B23; --q-panel-tex: linear-gradient(160deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.01)); --q-border: rgba(255, 255, 255, 0.17); --q-border-strong: rgba(255, 255, 255, 0.28); --q-line: rgba(255, 255, 255, 0.11); --q-text: #EAF3F2; --q-dim: #A9BCBE; --q-faint: #7E9094; --q-accent: #5EEAD4; --q-accent-2: #7DD3FC; --q-on-accent: #04211D; --q-ok: #4ADE80; --q-warn: #FBBF24; --q-bad: #FB7185; --q-info: #7DD3FC; --q-radius: 12px; --q-blur: 16px; --q-shadow: 0 8px 28px rgba(0, 0, 0, 0.4); --q-glow: 0 0 16px rgba(94, 234, 212, 0.3); --q-font-ui: var(--font-sans); /* Shell geometry */ --nav-height: 48px; /* Narrow enough to hand real estate back to the working area, wide enough that the longest nav label ("Active learning") still fits on one line. */ --rail-w: 176px; --rail-w-slim: 56px; --rail-cur: var(--rail-w); /* Spacing */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; /* Radius */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-full: 9999px; /* Shadows */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5); --shadow-glow-primary: var(--q-glow); /* Motion */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --duration-fast: 120ms; --duration-normal: 200ms; } /* ---- Command Deck ---- */ :root[data-theme="command"] { --q-bg: #07080A; --q-canvas: #0B0D10; --q-panel: #0F1216; --q-panel-solid: #0F1216; --q-panel-tex: none; --q-border: #242A31; --q-border-strong: #39424B; --q-line: #1A1F24; --q-text: #DCE3E0; --q-dim: #7A868B; --q-faint: #566065; --q-accent: #B8FF3C; --q-accent-2: #43D9AD; --q-on-accent: #0B1400; --q-ok: #43D9AD; --q-warn: #FFC24B; --q-bad: #FF5F56; --q-info: #43D9AD; --q-radius: 4px; --q-blur: 0px; --q-shadow: none; --q-glow: none; --q-font-ui: var(--font-mono); } /* ---- Studio Light ---- */ :root[data-theme="studio"] { --q-bg: #EFF1EF; --q-canvas: #20262B; --q-panel: #FFFFFF; --q-panel-solid: #FFFFFF; --q-panel-tex: none; --q-border: #DDE1DF; --q-border-strong: #C4CAC7; --q-line: #E8EBE9; --q-text: #171B1D; --q-dim: #667075; --q-faint: #8B9499; --q-accent: #1F5FD0; --q-accent-2: #0E8F86; --q-on-accent: #FFFFFF; --q-ok: #0F7A5A; --q-warn: #8A5800; --q-bad: #B32419; --q-info: #1F5FD0; --q-radius: 12px; --q-blur: 0px; --q-shadow: 0 1px 3px rgba(16, 24, 32, 0.09); --q-glow: none; --q-font-ui: var(--font-sans); --shadow-sm: 0 1px 2px rgba(16, 24, 32, 0.08); --shadow-md: 0 3px 10px rgba(16, 24, 32, 0.1); --shadow-lg: 0 10px 28px rgba(16, 24, 32, 0.14); } /* ------------------------------------------------------------------ Legacy aliases — old page CSS reads these; they follow the theme. ------------------------------------------------------------------ */ :root, :root[data-theme="command"], :root[data-theme="studio"] { --color-bg: var(--q-bg); --color-bg-elevated: var(--q-panel-solid); --color-surface: var(--q-panel-solid); --color-border: var(--q-border); --color-border-strong: var(--q-border-strong); --color-primary: var(--q-accent); --color-primary-strong: var(--q-accent); --color-accent: var(--q-accent-2); --color-accent-strong: var(--q-accent-2); --color-success: var(--q-ok); --color-warning: var(--q-warn); --color-danger: var(--q-bad); --color-info: var(--q-info); --text-strong: var(--q-text); --text-default: var(--q-text); --text-muted: var(--q-dim); --text-faint: var(--q-faint); --text-inverse: var(--q-on-accent); --color-primary-muted: color-mix(in srgb, var(--q-accent) 15%, transparent); --color-accent-muted: color-mix(in srgb, var(--q-accent-2) 15%, transparent); --color-success-muted: color-mix(in srgb, var(--q-ok) 15%, transparent); --color-warning-muted: color-mix(in srgb, var(--q-warn) 15%, transparent); --color-danger-muted: color-mix(in srgb, var(--q-bad) 15%, transparent); --ring-focus: 0 0 0 2px var(--q-bg), 0 0 0 4px var(--q-accent); } /* Raised/hover derive from surface so all three themes stay coherent. */ :root { --color-surface-raised: color-mix(in srgb, var(--q-text) 10%, var(--q-panel-solid)); --color-surface-hover: color-mix(in srgb, var(--q-text) 16%, var(--q-panel-solid)); }