# Implementation

The system is designed to be implemented in Vue, Vite, Tailwind, and ordinary
CSS variables. The same token model also works in React, Nuxt, and static docs.

## CSS Variable Baseline

Start with `tokens/payd-labs.css` or copy this core into the app's global CSS:

```css
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Nunito:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap");

:root {
  --color-primary: #10263E;
  --color-primary-light: #1a3a5c;
  --color-primary-dark: #0a1829;
  --color-accent: #18D26E;
  --color-accent-light: #4ae08e;
  --color-accent-dark: #12a557;
  --color-surface: #ffffff;
  --color-surface-secondary: #f8fafc;
  --color-surface-tertiary: #f1f5f9;
  --color-border: #e2e8f0;
  --color-border-medium: #cbd5e1;
  --color-text: #10263E;
  --color-text-secondary: #475569;
  --color-text-tertiary: #94a3b8;
  --font-heading: "Space Grotesk", sans-serif;
  --font-body: "Nunito", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
  --shadow-soft: 0 2px 8px -2px rgba(16, 38, 62, 0.08);
  --shadow-medium: 0 4px 16px -4px rgba(16, 38, 62, 0.12);
}
```

## Tailwind Mapping

Tailwind v4 apps can define tokens in `@theme`. Tailwind v3 apps can map CSS
variables in `tailwind.config.js`.

```js
colors: {
  surface: {
    DEFAULT: 'var(--color-surface)',
    secondary: 'var(--color-surface-secondary)',
    tertiary: 'var(--color-surface-tertiary)'
  },
  border: {
    DEFAULT: 'var(--color-border)',
    medium: 'var(--color-border-medium)'
  },
  text: {
    DEFAULT: 'var(--color-text)',
    secondary: 'var(--color-text-secondary)',
    tertiary: 'var(--color-text-tertiary)'
  },
  accent: {
    DEFAULT: '#18D26E',
    light: '#4ae08e',
    dark: '#12a557'
  },
  kPrimary: {
    DEFAULT: '#10263E',
    light: '#1a3a5c',
    dark: '#0a1829'
  }
}
```

## Base Styles

```css
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-surface);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}

code, pre, .mono {
  font-family: var(--font-mono);
}
```

## Theme Store Pattern

```ts
const isDark = ref(document.documentElement.classList.contains('dark'))

function initializeTheme(key: string) {
  const saved = localStorage.getItem(key)
  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
  const next = saved ? saved === 'dark' : prefersDark
  document.documentElement.classList.toggle('dark', next)
  isDark.value = next
}

function toggleTheme(key: string) {
  isDark.value = !isDark.value
  document.documentElement.classList.toggle('dark', isDark.value)
  localStorage.setItem(key, isDark.value ? 'dark' : 'light')
}
```

## Adoption Checklist

- Use shared Payd logo URLs and switch by theme.
- Add the token CSS before writing app-specific components.
- Implement the authenticated shell before page-specific UI.
- Build cards, tables, badges, forms, and buttons from tokens.
- Keep internal implementation status out of user-facing UI.
- Verify desktop and mobile layout in a browser.
- Run a secret-pattern review when touching auth, env, deploy, or payment
  surfaces.