:root {
  /* Colors - semantic */
  --color-primary: #1f3447;
  --color-secondary: #0b98e7;

  /* Colors - palette */
  --color-white: #ffffff;
  --color-navy-60: #1f3547;
  --color-indigo: #3a3aa8;
  --color-aqua-light: #95e7e7;
  --color-aqua-light-variant: #96e7e7;
  --color-aqua-light-variant2: #97e8e7;

  /* Typography */
  --font-family-base: 'Inter', sans-serif;
  --font-size-h1-xl: 64px;
  --font-size-h1-lg: 36px;
  --font-size-h1-md: 28px;
  --font-size-h1-sm: 18px;
  --font-size-body-lg: 16px;
  --font-size-body-sm: 14px;
  --line-height-tight: 1.10;
  --line-height-normal: 1.20;
  --line-height-loose: 1.40;
  --line-height-looser: 1.50;

  /* Spacing */
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-13: 13px;
  --space-14: 14px;
  --space-15: 15px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-25: 25px;
  --space-30: 30px;
  --space-32: 32px;
  --space-40: 40px;
  --space-60: 60px;
  --space-70: 70px;
  --space-80: 80px;
  --space-88: 88px;
  --space-98: 98px;

  /* Border radius */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-pill: 100px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-grey-soft: rgb(204, 204, 204) -2px 3px 7px 0px;
  --shadow-navy-subtle: rgba(31, 52, 71, 0.04) 0px 8px 16px 0px;
  --shadow-black-strong: rgba(0, 0, 0, 0.25) 0px 3.8px 19px 0px;
  --shadow-black-medium: rgba(0, 0, 0, 0.2) 0px 4px 8px 0px;
}

# Heylink Design System Specification

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

## Brand Context
Heylink values clarity, trust, and usability. The design is minimal, rounded, and mobile-friendly. Colors are muted blues with white surfaces. Typography is modern and sans-serif, aiming for readability and hierarchy without ornamentation.

## Color Palette
- Primary Navy: #1f3447 — Main text, icons, primary accents
- Secondary Blue: #0b98e7 — CTAs, focus states, highlights
- White: #ffffff — Backgrounds, card surfaces
- Navy 60%: #1f3547 — Secondary text, disabled states
- Indigo: #3a3aa8 — Occasional accents
- Aqua Light: #95e7e7 — Hover/focus backgrounds
- Aqua Light Variant: #96e7e7 — Hover/focus backgrounds
- Aqua Light Variant 2: #97e8e7 — Hover/focus backgrounds

## Typography
Font family: 'Inter', sans-serif (Google Fonts, variable)
Type scale:
- H1 XL: 64px, weight 800, line-height 1.10 — Hero titles
- H1 LG: 36px, weight 700, line-height 1.10 — Section titles
- H1 MD: 28px, weight 600, line-height 1.10 — Subsection titles
- H1 SM: 18px, weight 500, line-height 1.20 — Small headings
- Body LG: 16px, weight 400, line-height 1.20 — Body text
- Body MD: 16px, weight 500, line-height 1.50 — Links, labels
- Caption: 14px, weight 400, line-height 1.20 — Metadata

## Spacing & Grid
Base: 8px grid. Values: 4, 6, 8, 10, 12, 13, 14, 15, 16, 20, 24, 25, 30, 32, 40, 60, 70, 80, 88, 98px.
Use multiples for padding, margins, and gaps.

## Border Radius
- sm: 8px — buttons, small elements
- md: 16px — cards, images
- pill: 100px — pill buttons
- full: 50% — avatars, circular badges

## Shadows & Depth
- Soft grey: rgb(204, 204, 204) -2px 3px 7px 0px — cards
- Subtle navy: rgba(31, 52, 71, 0.04) 0px 8px 16px 0px — elevated surfaces
- Strong black: rgba(0, 0, 0, 0.25) 0px 3.8px 19px 0px — modal overlays
- Medium black: rgba(0, 0, 0, 0.2) 0px 4px 8px 0px — hover depth

## Component Specifications

### Primary Button
Default:
- background: transparent
- color: #1f3447
- padding: 0
- border-radius: 8px
- border: 1px solid #dedede
- font: 16px, weight 500
Hover:
- background: #ffffff
- color: #ffffff
Active:
- background: rgb(44, 100, 21)
- color: #ffffff
- border: 1px solid rgba(162, 192, 169, 0.5)
Focus:
- background: #1eaedb
- color: #ffffff
- opacity: 0.9
- border: 1px solid #000000

### Link Styles
Navy:
- default: #1f3447, no underline
- hover: #565656, no underline
White:
- default: #ffffff, underline
- hover: #565656, no underline
Muted:
- default: rgba(31, 53, 71, 0.6), no underline
- hover: #565656, no underline

### Card
- background: #ffffff
- border-radius: 16px
- padding: 24–32px
- shadow: soft grey or subtle navy

## Layout & Responsive Rules
Breakpoints: 400px, 426px, 530px, 550px, 600px, 896px.
Mobile-first scaling. Adjust typography and spacing at breakpoints.

## Interaction Rules
- Transitions: 150ms ease for hover/focus/active
- Focus indicators: color change + border
- Hover states: color + background change

## DO List
- Use only defined palette colors
- Maintain 8px grid
- Use Inter for all text
- Keep corners rounded consistently
- Use shadows sparingly
- Follow button state specs exactly

## DON'T List
- Don't introduce new colors
- Don't mix sharp corners with rounded
- Don't use aqua hover colors for text
- Don't skip hover/focus styles
- Don't apply heavy shadows to all elements

## Code Examples

### Primary Button
```css
.btn-primary {
  background: transparent;
  color: #1f3447;
  padding: 0;
  border-radius: 8px;
  border: 1px solid #dedede;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 500;
  transition: all 150ms ease;
}
.btn-primary:hover {
  background: #ffffff;
  color: #ffffff;
}
.btn-primary:active {
  background: rgb(44, 100, 21);
  color: #ffffff;
  border: 1px solid rgba(162, 192, 169, 0.5);
}
.btn-primary:focus {
  background: #1eaedb;
  color: #ffffff;
  opacity: 0.9;
  border: 1px solid #000000;
}
```

### Card
```css
.card {
  background: #ffffff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: rgba(31, 52, 71, 0.04) 0px 8px 16px 0px;
}
```

### Link
```css
.link {
  color: #1f3447;
  text-decoration: none;
}
.link:hover {
  color: #565656;
}
```