# Design System & Theme

## Tailwind Configuration

### `tailwind.config.js`

File doesn't exist. The project uses Tailwind CSS v4 with `@tailwindcss/vite` plugin for compilation.

---

## CSS Configuration

### `resources/css/app.css`

```css
@import 'leaflet/dist/leaflet.css';
@import 'tailwindcss';
@import '../../vendor/livewire/flux/dist/flux.css';

@source '../views';
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../vendor/livewire/flux-pro/stubs/**/*.blade.php';
@source '../../vendor/livewire/flux/stubs/**/*.blade.php';

@custom-variant dark (&:where(.dark, .dark *));

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

    --color-zinc-50: #fafafa;
    --color-zinc-100: #f5f5f5;
    --color-zinc-200: #e5e5e5;
    --color-zinc-300: #d4d4d4;
    --color-zinc-400: #a3a3a3;
    --color-zinc-500: #737373;
    --color-zinc-600: #525252;
    --color-zinc-700: #404040;
    --color-zinc-800: #262626;
    --color-zinc-900: #171717;
    --color-zinc-950: #0a0a0a;

    --color-accent: var(--color-neutral-800);
    --color-accent-content: var(--color-neutral-800);
    --color-accent-foreground: var(--color-white);
}

@layer theme {
    .dark {
        --color-accent: var(--color-white);
        --color-accent-content: var(--color-white);
        --color-accent-foreground: var(--color-neutral-800);
    }
}

@layer base {

    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
        border-color: var(--color-gray-200, currentColor);
    }
}

[data-flux-field]:not(ui-radio, ui-checkbox) {
    @apply grid gap-2;
}

[data-flux-label] {
    @apply  !mb-0 !leading-tight;
}

input:focus[data-flux-control],
textarea:focus[data-flux-control],
select:focus[data-flux-control] {
    @apply outline-hidden ring-2 ring-accent ring-offset-2 ring-offset-accent-foreground;
}
```

---

## Color Palette

### Primary Colors
- **Zinc Palette** (grays): 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
  - Used for backgrounds, borders, text

### Accent Colors
- **Dark Mode:** White/neutral-800 depending on context
- **Light Mode:** neutral-800
- **Accent Foreground:** White (light mode), neutral-800 (dark mode)
- **Accent Content:** neutral-800 (light), white (dark)

### Status Colors
- **Success:** green-500, green-600
- **Warning:** amber-500, amber-400
- **Error:** red-500, red-400, red-600
- **Info:** slate-500

### Semantic Colors (from Station Search)
- **Current Price (fresh):** green-500 (#22c55e)
- **Recent (24-48h):** slate-500 (#64748b)
- **Stale (2-5 days):** amber-500 (#f59e0b)
- **Outdated (5+ days):** red-500 (#ef4444)

---

## Typography

### Font Family
- **Primary:** 'Instrument Sans' (Weights: 400, 500, 600)
- **Fallback:** ui-sans-serif, system-ui, sans-serif
- **Emoji:** Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji

### Font Sizes & Weights (via Flux)
- **Heading (XL):** Used for page titles
- **Heading (LG):** Used for section titles
- **Subheading:** Used for descriptions
- **Text:** Standard body text
- **Label:** Form labels
- **Badge:** Small text labels

---

## Spacing System

Based on Tailwind default scale:
- **Base Unit:** 4px (1 = 4px)
- **Common Spacing:**
  - `gap-2`: 8px (0.5rem)
  - `gap-3`: 12px (0.75rem)
  - `gap-4`: 16px (1rem)
  - `gap-6`: 24px (1.5rem)
  - `px-4`: 16px horizontal padding
  - `py-3`: 12px vertical padding
  - `p-6`: 24px all sides padding
  - `p-10`: 40px all sides padding

---

## Border & Radius

### Border Colors
- **Light:** `border-zinc-200`
- **Dark:** `border-zinc-700` (primary), `border-stone-800` (cards), `border-neutral-800` (split layout)

### Border Radius
- **Input/buttons:** Default Flux radius
- **Cards:** `rounded-xl` (larger radius)
- **Icons/small:** `rounded-md`

---

## Dark Mode

### Implementation
- Uses `class="dark"` on `<html>` root
- Custom variant: `@custom-variant dark (&:where(.dark, .dark *))`
- Flux `@fluxAppearance` directive manages theme toggle

### Dark Mode Colors
- **Body BG:** `dark:bg-zinc-800`
- **Header/Sidebar BG:** `dark:bg-zinc-900`
- **Borders:** `dark:border-zinc-700`
- **Text:** `dark:text-zinc-100` (headings), `dark:text-zinc-400` (secondary)

### Accent in Dark Mode
- `--color-accent: var(--color-white)`
- `--color-accent-foreground: var(--color-neutral-800)`

---

## Responsive Design

### Breakpoints (Tailwind defaults)
- **sm:** 640px
- **md:** 768px
- **lg:** 1024px
- **xl:** 1280px
- **2xl:** 1536px

### Usage Patterns
- `max-lg:hidden` - Hide on mobile/tablet
- `lg:hidden` - Hide on desktop
- `max-md:flex-col` - Stack on small screens
- `sm:flex-row` - Row layout on small+ screens
- `md:w-[220px]` - Fixed width on medium+

---

## Component-Specific Theming

### Forms (Flux)
- `[data-flux-field]`: grid gap-2 layout
- `[data-flux-label]`: No margin-bottom, tight line-height
- Focus states: ring-2 ring-accent with ring-offset

### Flux Appearance
- Automatically applied via `@fluxAppearance` directive
- Manages light/dark mode toggle
- Integrates with browser's prefers-color-scheme

### Leaflet Map
- Uses default OSM tiles
- Custom marker colors: green (current), slate (recent), amber (stale), red (outdated)
- Markers: 9px radius, white stroke, 2px weight, 85% fill opacity

---

## Brand Identity

### Logo
- **Primary Icon:** Custom SVG (geometric design)
- **Color:** Adapts to theme (black light mode, white dark mode)
- **Name:** "Laravel Starter Kit"
- **Contexts:**
  - Header/nav: `flux:brand`
  - Sidebar: `flux:sidebar.brand`

### Loading/Placeholder States
- Pattern SVG with diagonal lines
- Color: `stroke-gray-900/20` (light) or `stroke-neutral-100/20` (dark)

---

## Animations & Transitions

### Alpine.js Transitions
- **Message Dismiss:** `x-show.transition.out.opacity.duration.1500ms`
- **Fade effects:** opacity transitions over 1500ms

### Flux Components
- Built-in animations for:
  - Dropdown menus
  - Sidebar collapse/expand
  - Modal opens/closes

---

## CSS Custom Properties (Tokens)

```css
--font-sans: 'Instrument Sans', ...
--color-zinc-50 through --color-zinc-950
--color-accent
--color-accent-content
--color-accent-foreground
```

---

## Vite Build Configuration

**File:** `vite.config.js`

```javascript
import {
    defineConfig
} from 'vite';
import laravel from 'laravel-vite-plugin';
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        tailwindcss(),
    ],
    server: {
        cors: true,
        watch: {
            ignored: ['**/storage/framework/views/**'],
        },
    },
});
```

**Features:**
- Tailwind CSS v4 via @tailwindcss/vite plugin
- Automatic CSS/JS refresh
- CORS enabled for dev server
- Ignores Laravel view cache files

---

## Flux UI Theme Configuration

Flux v2 is configured via:
- CSS import: `@import '../../vendor/livewire/flux/dist/flux.css'`
- Content sources point to Flux stubs for autocomplete
- `@fluxAppearance` handles dark mode toggling
- `@fluxScripts` loads JavaScript enhancements

No custom Flux config file exists; uses defaults with CSS customizations.

