add theme store and input, update some components to use theme

frontend/documentation/themes/UsingThemeStore.md

@@ -0,0 +1,84 @@
+# Using the Theme Store
+
+This guide shows how to read and react to the company theme in Vue components.
+
+## Imports
+```js
+import { useThemeStore } from "@/stores/theme";
+```
+
+## Reading theme tokens
+```js
+const themeStore = useThemeStore();
+// Access current theme object
+console.log(themeStore.currentTheme.primary);
+```
+
+Theme tokens exposed as CSS variables (runtime-applied to `:root`):
+- `--theme-primary`: main brand color
+- `--theme-primary-strong`: deeper shade of primary for borders/active states
+- `--theme-secondary`: secondary accent color
+- `--theme-accent`: softer accent/highlight
+- `--theme-gradient-start` / `--theme-gradient-end`: primary gradient stops
+- `--theme-secondary-gradient-start` / `--theme-secondary-gradient-end`: secondary gradient stops
+- `--theme-surface`: default card/background surface
+- `--theme-surface-alt`: alternate surface
+- `--theme-border`: standard border color
+- `--theme-hover`: hover surface color
+- `--theme-text`: primary text color
+- `--theme-text-muted`: muted/secondary text
+- `--theme-text-dark`: dark text color (use on light surfaces)
+- `--theme-text-light`: light text color (use on dark/gradient surfaces)
+- Backward-compat (mapped to the above): `--primary-color`, `--primary-600`, `--surface-card`, `--surface-border`, `--surface-hover`, `--text-color`
+
+## Applying theme in components
+### Option 1: Use CSS vars in `<style>`
+```vue
+<style scoped>
+.button-primary {
+  background: var(--theme-primary);
+  color: white;
+}
+.card-surface {
+  background: var(--surface-card);
+  border: 1px solid var(--surface-border);
+}
+.banner-gradient {
+  background: linear-gradient(135deg, var(--theme-gradient-start), var(--theme-gradient-end));
+}
+</style>
+```
+
+### Option 2: Use reactive values in script
+```vue
+<script setup>
+import { useThemeStore } from "@/stores/theme";
+const themeStore = useThemeStore();
+const styles = computed(() => ({
+  background: `linear-gradient(135deg, ${themeStore.currentTheme.primaryGradientStart}, ${themeStore.currentTheme.primaryGradientEnd})`,
+  color: themeStore.currentTheme.text,
+}));
+</script>
+
+<template>
+  <div :style="styles">Themed box</div>
+</template>
+```
+
+## Reacting to company changes
+The app already applies themes on company change. If you need side-effects in a component:
+```js
+watch(() => themeStore.currentTheme, (t) => {
+  console.log("theme changed", t.primary);
+});
+```
+
+## Adding a new company theme
+1) Open `src/stores/theme.js` and add a new entry to `themeMap` with all keys: `primary`, `primaryStrong`, `secondary`, `accent`, `primaryGradientStart/End`, `secondaryGradientStart/End`, `surface`, `surfaceAlt`, `border`, `hover`, `text`, `textMuted`.
+2) No further changes are needed; selecting that company will apply the theme.
+
+## Quick reference for gradients
+- Primary gradient: `--theme-gradient-start` → `--theme-gradient-end`
+- Secondary gradient: `--theme-secondary-gradient-start` → `--theme-secondary-gradient-end`
+
+Use primary for main brand moments; secondary for supporting UI accents.