-apple-system, system-ui, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans,
Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji

:root {
  /* Colors */
  --color-primary-blue: #2f7bbf;
  --color-neutral-gray: #999999;
  --color-accent-green: #9bca3e;
  --color-hover-orange-1: #e98a2a;
  --color-hover-orange-2: #ed8a26;
  --color-hover-orange-3: #e98a29;
  --color-hover-burnt-orange: #db7018;
  --color-hover-deep-blue: #005fcc;
  --color-hover-bright-orange: #ee730a;
  --color-divider: #ebebeb;

  /* Typography */
  --font-family-base: -apple-system, system-ui, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  --font-size-h1: 3.75rem;
  --font-size-h1-small: 1.88rem;
  --font-size-h1-alt: 1.50rem;
  --font-size-link-lg: 1.50rem;
  --font-size-link-sm: 1.00rem;
  --font-size-h1-micro: 0.94rem;
  --font-size-caption: 0.81rem;
  --font-size-caption-xs: 0.75rem;

  --line-height-h1: 1.25;
  --line-height-h1-small: 1.30;
  --line-height-h1-alt: 1.30;
  --line-height-h1-micro: 1.63;
  --line-height-caption-xs: 6.00;

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* Spacing */
  --space-4: 0.25rem;
  --space-8: 0.50rem;
  --space-12: 0.75rem;
  --space-16: 1.00rem;
  --space-24: 1.50rem;
  --space-32: 2.00rem;
  --space-40: 2.50rem;
  --space-60: 3.75rem;

  /* Border Radius */
  --radius-pill: 20px;
}

# Byteconnect Design System Specification

You are a Byteconnect design expert. Build UIs matching their visual language exactly.

## Brand Context
Byteconnect values speed, clarity, and native feel. The design is flat, with restrained color use and system fonts. Interactive elements are clear and direct—no ornamental styling.

## Color Palette
- Primary Blue: #2f7bbf — Links default, primary actions
- Neutral Gray: #999999 — Secondary text, captions
- Accent Green: #9bca3e — Success states, highlights
- Hover Orange 1: #e98a2a — Link hover, button hover
- Hover Orange 2: #ed8a26 — Alternate hover state
- Hover Orange 3: #e98a29 — Component hover/focus
- Burnt Orange: #db7018 — Strong active/focus state
- Deep Blue Hover: #005fcc — Alternate focus outline
- Bright Orange: #ee730a — Alerts or special hover states
- Divider Gray: #ebebeb — Borders and dividers

### Color Rules
- Use Primary Blue for interactive elements only.
- Hover states shift hue to oranges—never lighten blue for hover.
- Neutral Gray only for less important text.
- Divider Gray for subtle boundaries—1px lines.

## Typography
Font family: `-apple-system, system-ui, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji`

| Level        | Size    | Weight | Line Height | Use For               |
|--------------|--------|--------|-------------|-----------------------|
| H1           | 60px   | 300    | 1.25        | Page titles           |
| H1 small     | 30px   | 400    | 1.30        | Section headings      |
| H1 alt light | 24px   | 300    | 1.30        | Subsection headings   |
| H1 alt reg   | 24px   | 400    | 1.30        | Subsection headings   |
| Link large   | 24px   | 300    | 1.30        | Prominent links       |
| Link small   | 16px   | 400    | —           | Inline links          |
| H1 micro     | 15px   | 600    | 1.63        | UI labels             |
| Caption      | 13px   | 400    | —           | Captions              |
| Button text  | 13px   | 400    | —           | Buttons               |
| Caption xs   | 12px   | 500    | 6.00        | Inline badges         |

## Spacing & Grid
Base: 8px grid with occasional 4px increments.
Scale: 4px, 8px, 12px, 16px, 24px, 32px, 40px, 60px.

Map:
- 4px: icon gaps
- 8px: tight button padding
- 12px: small card padding
- 16px: standard element padding
- 24px: section gaps
- 32px: card spacing
- 40px: large layout gaps
- 60px: hero section padding

## Border Radius
- Pill: 20px — badges, pill buttons

## Shadows & Depth
Flat design—no shadows. Use 1px solid #ebebeb for dividers.

## Component Specifications

### Primary Button
```css
.btn-primary {
  background: none;
  color: #2f7bbf;
  font-family: var(--font-family-base);
  font-size: 16px;
  font-weight: 400;
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-pill);
  border: none;
  transition: color 150ms ease;
}
.btn-primary:hover { color: #f68b1f; }
.btn-primary:focus { outline: 2px solid #005fcc; outline-offset: 2px; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
```

### Navigation Link
```css
.nav-link {
  color: #2f7bbf;
  text-decoration: none;
  font-weight: 400;
}
.nav-link:hover { color: #f68b1f; }
```

### Card
```css
.card {
  background: #fff;
  border-radius: 0;
  padding: var(--space-32);
  border-top: 1px solid #ebebeb;
}
```

## Layout & Responsive Rules
- Breakpoints: 639px, 720px, 1023px
- Mobile padding: 16px
- Desktop padding: 32px
- Grid gap: multiples of 8px

## Interaction Rules
- Transition timing: 150ms ease for color changes
- Focus indicators: 2px solid #005fcc, offset 2px
- No hover background changes—only text color shifts

## DO
- Use only colors from palette
- Maintain 8px grid
- Keep corners square unless using pill radius
- Apply orange hover states to all interactive text
- Use system font stack for all text

## DON'T
- Add shadows
- Mix rounded and square corners in same component
- Use #999999 for small body text
- Introduce custom colors
- Change hover state to lighter blue

## Code Examples

### Button
```css
<button class="btn-primary">Click me</button>
```

### Card
```css
<div class="card">
  <h2>Title</h2>
  <p>Content here</p>
</div>
```

### Input
```css
<input type="text" class="input" placeholder="Type here">
```