# Style

Professional, minimalistic, and high-contrast. Emphasize clarity, generous whitespace, and restrained use of color. The design should feel precise and technical. Black is the dominant base; light blue is the single accent for interactive and highlighted elements.

Follow this style guide for all visual decisions. When in doubt, prioritize minimalism, high contrast, and the single light-blue accent.

## Colors

| Role              | Color          | Hex       | Usage                                      |
|-------------------|----------------|-----------|--------------------------------------------|
| Background        | Near-black     | `#0A0A0A` | Page and section backgrounds               |
| Surface / Card    | Dark charcoal  | `#141414` | Cards, panels, elevated areas              |
| Primary text      | Off-white      | `#F5F5F5` | Headings and body text                     |
| Secondary text    | Medium gray    | `#A0A0A0` | Captions, metadata, supporting text        |
| Accent            | Light blue     | `#4FC3F7` | Links, buttons, focus states, highlights   |
| Accent hover      | Lighter blue   | `#81D4FA` | Hover on accent elements                   |
| Border / Divider  | Subtle gray    | `#2A2A2A` | Card borders, separators                   |
| Error / Destructive | Soft red    | `#EF5350` | Only when needed (rare)                    |

k## Color Rules
- Use the light blue accent sparingly — primarily for interactive elements and key highlights.
- Prefer solid fills over gradients or shadows. When elevation is needed, use a 1px border in `#2A2A2A` instead of drop shadows.
- Maintain strong contrast. Body text should always be `#F5F5F5` or close to it on dark backgrounds.
- Avoid pure black (`#000000`) for large areas; use `#0A0A0A`.

## Typography

- **Font stack**: `system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`
- **Headings**: Weight 500–600. Optional slight letter-spacing (0.02–0.04em) on large headings.
- **Body**: Weight 400, line-height 1.6–1.7.
- **Scale**: Keep hierarchy simple (e.g. 2.5rem / 1.75rem / 1.25rem / 1rem). Avoid many intermediate sizes.
- **Monospace** (for code or technical details): `ui-monospace, SFMono-Regular, Menlo, Consolas, monospace`

## Layout

- Maximum content width: 720–900px for text-heavy pages; wider for project grids if needed.
- Vertical rhythm: 1.5–2rem between related elements, 3–4rem between major sections.
- Left-aligned text by default. Center only short hero statements.
- Numbered section labels (e.g. “01 Projects”) are optional but acceptable for a structured feel.

## Components

### Buttons
- **Primary**: Light blue background (`#4FC3F7`), dark text (`#0A0A0A`), 8–10px border-radius, ~0.75rem horizontal / 0.5rem vertical padding.
- **Secondary / Ghost**: Transparent background, 1px light blue border, light blue text.
- **Hover**: Slightly lighten the blue or reduce opacity to ~90%. No heavy scale transforms.
- **Disabled**: Reduced opacity (0.4–0.5), no pointer cursor.
- Prefer rectangular or lightly rounded shapes. Avoid pill shapes unless used consistently for tags.

### Links
- Default: Light blue (`#4FC3F7`), no underline by default.
- Hover: Underline or shift to `#81D4FA`.
- Visited: Same as default (or a slightly muted blue if distinction is desired).
- Inline links in body text must remain light blue for visibility.

### Cards
- Background `#141414`, 1px border `#2A2A2A`, 8–12px border-radius.
- Padding 1.25–1.5rem.
- Optional hover: border color shifts toward a muted blue or slight background lighten.
- Title in primary text, description in secondary text. Keep internal spacing tight but readable.
- Use for projects, skills, contact items, etc. Avoid heavy imagery unless it is the focus.

### Forms & Inputs
- Background slightly lighter than card (`#1A1A1A`), 1px border `#2A2A2A`.
- Focus: Border changes to light blue.
- Placeholder text in `#666`.
- Labels above inputs in secondary text color.

### Navigation
- Simple horizontal or vertical list.
- Active state indicated by light blue text or a thin underline.
- Minimal height. No large logo treatments required.

## Other Guidelines

- **Icons**: Simple, line-style, monochrome (white or light blue). Avoid filled multi-color icons.
- **Images**: Prefer subtle borders or none. Use dark overlays if text must sit on photos.
- **Motion**: Short, subtle transitions (150–200ms) on hover/focus. Avoid large animated elements.
- **Accessibility**: Ensure accent blue meets contrast on dark surfaces. Provide visible focus outlines.

# Code

- Never use TypeScript

# Other
- Do not ever run the server, I will do that manually
- Never edit environment variables
- Whenever I type "mnc" anywhere in the message, that means "make no changes". Do not edit any of the code, just respond to my message