:root {
  /* Colors */
  --color-primary: #cf470c;
  --color-secondary: #3467c6;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-link-hover: #005fcc;
  --color-muted1: #F4F4F4;
  --bricks-color-yzghiq: #eeeae3;
  --bricks-color-1b9431: #9c27b0;
  --bricks-text-success: #11b76b;
  --bricks-bg-danger: #ffe6ec;
  --bricks-color-974baa: #8bc34a;
  --bricks-color-b09a57: #ffc107;
  --bricks-color-9b66bd: #4caf50;
  --bricks-bg-success: #e6f6ed;
  --bricks-text-medium: #616161;
  --color-tertiary4: #9DA9DF;
  --color-secondary1: #2C2C2C;
  --bricks-color-cecgde: #128136;
  --color-secondary2: #F8F4ED;
  --color-muted2: #DCDCDC;
  --bricks-color-ojleec: #5d5d5d;
  --bricks-color-564fad: #ff9800;
  --bricks-text-light: #9e9e9e;
  --bricks-color-gpglag: #f1c40f;
  --bricks-text-dark: #212121;
  --bricks-color-a923e1: #cddc39;
  --bricks-color-334767: #03a9f4;
  --bricks-color-90b6e1: #f5f5f5;
  --bricks-color-2867b9: #e0e0e0;
  --bricks-color-1d365b: #ffeb3b;
  --bricks-border-color: #dddedf;
  --bricks-bg-light: #f5f6f7;
  --bricks-tooltip-bg: #23282d;
  --bricks-color-secondary: #fc5778;
  --bricks-bg-warning: #fff2d7;
  --bricks-color-317c86: #ff5722;
  --bricks-tooltip-text: #eaecef;
  --bricks-color-primary: #ffd64f;
  --bricks-bg-info: #e5f3ff;
  --bricks-color-49d99b: #424242;
  --bricks-color-f206f2: #2196f3;
  --bricks-color-dafd7a: #81D4FA;
  --bricks-text-warning: #ffa100;
  --bricks-text-danger: #fa4362;
  --bricks-text-info: #00b0f4;
  --bricks-bg-dark: #263238;

  /* Typography */
  --font-montserrat: "Montserrat", sans-serif;
  --font-raleway: "Raleway", sans-serif;

  /* Spacing */
  --space-1: 1px;
  --space-5: 5px;
  --space-7: 7px;
  --space-8: 8px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-50: 50px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-128: 128px;

  /* Radius */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 20px;
  --radius-lg: 30px;
  --radius-full: 100%;

  /* Shadows */
  --shadow-orange: rgba(207, 71, 12, 0.25) 1px 0px 8px 0px;
  --shadow-light: rgba(0, 0, 0, 0.05) 1px 1px 20px 0px;
  --shadow-light-alt: rgba(0, 0, 0, 0.05) 0px 1px 20px 0px;
  --shadow-blue: rgba(60, 117, 223, 0.25) 0px 4px 20px 0px;
}

# Cpanel Design System Specification

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

## Brand Context
Cpanel’s design language is functional, technical, and confident. Orange is the voice of action; blue is the voice of trust. Typography is clean and sans‑serif. Layouts follow a strict 8px grid with modest rounding and minimal shadows.

## Color Palette
- Primary Orange: #cf470c — CTAs, primary buttons, outlines
- Secondary Blue: #3467c6 — Secondary buttons, links
- White: #ffffff — Backgrounds, text on colored buttons
- Black: #000000 — Body text, icons
- Link Hover Blue: #005fcc — Link hover/focus
- Muted Grey: #DCDCDC — Borders, dividers
- Success Green: #11b76b — Success text
- Success BG: #e6f6ed — Success backgrounds
- Danger BG: #ffe6ec — Error backgrounds
- Warning Amber: #ffc107 — Alerts
- Info Blue: #2196f3 — Info states
- ... [include all functional colors from token list]

## Typography
Fonts:
- Headings: "Montserrat", sans-serif
- Secondary text: "Raleway", sans-serif

Sizes:
| Level   | Font       | Size  | Weight | Line Height | Use For             |
|---------|------------|-------|--------|-------------|---------------------|
| H1      | Montserrat | 56px  | 700    | 1.20        | Hero titles         |
| H2      | Montserrat | 40px  | 700    | 1.20        | Section headings    |
| H3      | Montserrat | 32px  | 700    | 1.40        | Subsections         |
| H4      | Montserrat | 24px  | 700    | 1.20        | Smaller headings    |
| Subhead | Raleway    | 23px  | 500    | 1.40        | Secondary headings  |
| Link-lg | Raleway    | 20px  | 600    | 1.00        | Navigation links    |
| Caption | Raleway    | 14px  | 500    | 1.40        | Captions            |
| Small   | Raleway    | 12px  | 700    | 1.40        | Small bold links    |

## Spacing & Grid
Base: 8px grid.
Scale: 1, 5, 7, 8, 14, 16, 20, 24, 32, 40, 48, 50, 64, 80, 96, 128px.
Use base multiples for all padding/margins.

## Border Radius
- none: 0 — sharp edges
- sm: 4px — buttons, inputs
- md: 20px — cards
- lg: 30px — larger panels
- full: 100% — circular buttons, avatars

## Shadows & Depth
- Orange glow: rgba(207, 71, 12, 0.25) 1px 0px 8px 0px
- Light drop: rgba(0, 0, 0, 0.05) 1px 1px 20px 0px
- Blue glow: rgba(60, 117, 223, 0.25) 0px 4px 20px 0px

## Components

### Primary Button
Default: bg #cf470c, text #fff, padding 7px 23px, radius 4px, border 1px solid #cf470c, font 16px 700.
Hover: bg initial, text #000, border 0.
Active: bg var(--bricks-color-jinvwv), text var(--bricks-color-aelszb).
Focus: border 0, bg initial.

### Secondary Button
Default: bg #3467c6, text #fff, padding 14px 52px, radius 4px, border 1px solid #3467c6, font 16px 700.
Hover: bg initial, text #000, border 0.

### Outline Button
Default: transparent bg, text #cf470c, border 1px solid #cf470c.
Hover: text #000, border 0.

### Link Styles
- White text: underline default; hover color var(--bricks-color-tqllws)
- Dark text: no underline default; underline hover
- Orange text: no underline default; underline hover
- Blue text: same pattern

## Layout & Responsive Rules
Breakpoints: 478px, 767px, 768px, 991px, 992px, 1365px, 1366px.
Page padding: multiples of 8px.
Max content width: determined by breakpoint.

## Interaction Rules
- Transition: 150ms ease on background, color changes.
- Focus indicators: border or outline in brand colors.
- Disabled states: opacity 0.5, cursor not-allowed.

## DO List
- Use only colors from palette.
- Maintain 8px grid.
- Use Montserrat for headings, Raleway for secondary text.
- Keep button radius at 4px unless full round.
- Use semantic functional colors.

## DON'T List
- Don't invent new accent colors.
- Don't mix sharp and rounded corners in same component.
- Don't use heavy shadows—keep them subtle.
- Don't break grid spacing.
- Don't use serif fonts.

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #cf470c;
  color: #fff;
  padding: 7px 23px;
  border-radius: 4px;
  border: 1px solid #cf470c;
  font-family: var(--font-montserrat);
  font-size: 16px;
  font-weight: 700;
  transition: background 150ms ease, color 150ms ease;
}
.btn-primary:hover {
  background: initial;
  color: #000;
  border: 0;
}
```

Secondary Button:
```css
.btn-secondary {
  background: #3467c6;
  color: #fff;
  padding: 14px 52px;
  border-radius: 4px;
  border: 1px solid #3467c6;
  font-family: var(--font-montserrat);
  font-size: 16px;
  font-weight: 700;
}
```

Card:
```css
.card {
  background: #fff;
  border-radius: 30px;
  padding: 32px;
  box-shadow: var(--shadow-light);
}
```