:root {
  /* Colors */
  --color-primary: #e20074;
  --color-secondary-transparent: rgba(0,0,0,0);
  --color-dark-gray-1: #1c1c1c;
  --color-white-ish: #fbfbfb;
  --color-dark-gray-2: #2b2b2b;
  --color-medium-gray: #6a6a6a;
  --color-black: #000000;
  --color-dark-gray-3: #414141;
  --color-blue: #005fcc;
  /* Status */
  --color-info-light: #eaf1ff;
  --color-caution-dark: #ad590b;
  --color-grayscale-500: #8c8c8c;
  --color-button-secondary-disabled-bg: #e6e6e6;
  --color-positive-light: #e6fce8;
  --color-button-primary-hover-bg: #a7005a;
  --color-critical-darkest: #3d0400;
  --color-critical-mid: #f44125;
  --color-secondary-dark: #770141;
  --color-secondary-light: #ff52a3;
  --color-positive-darkest: #002805;
  --color-highlight-mid: #a044a2;
  --color-highlight-dark: #450245;
  --color-primary-lightest: #ffcee7;
  --color-caution-lightest: #fff3de;
  --color-info-mid: #0c48bd;
  --color-info-light-mid: #4886ff;
  --color-highlight-darkest: #2d0521;
  --color-highlight-light: #b780b7;
  --color-critical-bright: #d20d00;
  --color-critical-lightest: #ffedec;
  --color-caution-darkest: #321800;
  --color-highlight-mid-dark: #7e0c7e;
  --color-secondary-mid: #f6288f;
  --color-caution-mid: #f8a50c;
  --color-grayscale-400: #cccccc;
  --color-positive-mid: #008110;
  --color-positive-light-mid: #2dbf3b;
  --color-grayscale-black: #000000;
  --color-highlight-lightest: #f8e8f8;

  /* Typography */
  --font-teleNeo: "TeleNeo";
  --font-system-ui: system-ui, -apple-system, Roboto, Helvetica, Segoe UI, Arial;

  /* Spacing */
  --space-2: 2px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-7: 7px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-15: 15px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-30: 30px;
  --space-32: 32px;
  --space-40: 40px;
  --space-56: 56px;
  --space-64: 64px;

  /* Radius */
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 12px;
  --radius-xl: 22px;
  --radius-pill: 50px;
  --radius-full: 100%;

  /* Shadows */
  --shadow-card: rgba(65,65,65,0.2) 0px 10px 15px 0px, rgba(65,65,65,0.05) 0px 10px 30px 20px;
  --shadow-subtle: rgba(65,65,65,0.11) 0px 2px 20px 3px, rgba(65,65,65,0.03) 0px 2px 20px 10px;
}

# T-Mobile Design System Specification

You are a T-Mobile design expert. Build UIs matching their visual language exactly.

## Brand Context
T-Mobile's design is bold, high-contrast, and magenta-driven. Typography is heavy and condensed. Spacing follows an 8px grid with occasional micro-adjustments. Interaction states are animated with scale and shadow.

## Color Palette
- Primary Magenta: #e20074 — CTAs, primary buttons, key links
- Secondary Transparent: rgba(0,0,0,0) — overlays
- Dark Gray 1: #1c1c1c — headers, footers
- White-ish: #fbfbfb — page backgrounds
- Dark Gray 2: #2b2b2b — navigation
- Medium Gray: #6a6a6a — secondary text
- Black: #000000 — body text
- Dark Gray 3: #414141 — tabs
- Blue: #005fcc — link hover/focus
- Info Light: #eaf1ff — info backgrounds
- Caution Dark: #ad590b — warning text
- Grayscale 500: #8c8c8c — disabled icons
- Button Secondary Disabled BG: #e6e6e6 — disabled buttons
- Positive Light: #e6fce8 — success backgrounds
- Button Primary Hover BG: #a7005a — hover CTA
- Critical Darkest: #3d0400 — error backgrounds
- Critical Mid: #f44125 — error text
- Secondary Dark: #770141 — alt magenta
- Secondary Light: #ff52a3 — magenta accents
- Positive Darkest: #002805 — success text
- Highlight Mid: #a044a2 — purple accents
- Highlight Dark: #450245 — deep purple
- Primary Lightest: #ffcee7 — light magenta background
- Caution Lightest: #fff3de — caution background
- Info Mid: #0c48bd — info text
- Info Light-Mid: #4886ff — info links
- Highlight Darkest: #2d0521 — deep purple
- Highlight Light: #b780b7 — light purple
- Critical Bright: #d20d00 — error icons
- Critical Lightest: #ffedec — error background
- Caution Darkest: #321800 — caution text
- Highlight Mid-Dark: #7e0c7e — purple hover
- Secondary Mid: #f6288f — magenta hover
- Caution Mid: #f8a50c — caution icons
- Grayscale 400: #cccccc — borders
- Positive Mid: #008110 — success icons
- Positive Light-Mid: #2dbf3b — success accents
- Grayscale Black: #000000 — text
- Highlight Lightest: #f8e8f8 — highlight background

## Typography
- Headings: "TeleNeo"
- Body/UI: system-ui, -apple-system, Roboto, Helvetica, Segoe UI, Arial

| Level | Size | Weight | Line Height | Use |
| H1 | 48px | 800 | 1.04 | Page titles |
| H2 | 32px | 800 | 1.06 | Section headings |
| ... | ... | ... | ... | ... |

## Spacing & Grid
Base: 8px grid. Values: 2,4,5,6,7,8,10,12,15,16,20,24,28,30,32,40,56,64.

## Border Radius
- none: 0px — sharp corners
- sm: 2px — inputs
- md: 4px — buttons
- lg: 12px — cards
- xl: 22px — modals
- pill: 50px — inputs
- full: 100% — round icons

## Shadows & Depth
Use layered shadows: `rgba(65,65,65,0.2) 0px 10px 15px 0px, rgba(65,65,65,0.05) 0px 10px 30px 20px`.

## Component Specifications

### Primary Button
Default: bg #e20074, color #fbfbfb, padding 0 16px, radius 0px, border none.
Hover: bg #e20074, color #fff, opacity 0.7, shadow, scale 1.2.
Focus: bg #1eaedb, color #e20074, border 1px solid #000.
Active: bg var(--applePayButton--background-color), color var(--headerToolLink--color).

### Secondary Button
Default: bg #cccccc, color #141414, padding 8px 16px, radius 4px.
Hover: bg #e20074, color #b3b3b3, opacity 0.7, shadow, scale 1.2.
Focus: bg rgba(255,255,255,0.2), color #e20074, border 1px solid #000.

### Navigation Links
Magenta underline default, hover blue (#005fcc).
No underline for dark gray/white variants.

### Cards
bg #fff, radius 12px, padding 24px, shadow var(--shadow-card).

## Layout & Responsive Rules
Breakpoints: 256px, 320px, 768px, 1024px, 1440px, 1730px.
Grid gap: multiples of 8px.

## Interaction Rules
Transitions: 150ms ease for hover/focus.
Scale animation on hover for buttons: 1.2x.
Focus indicators: 1px auto ring.

## DO List
- Use ONLY colors from palette.
- Maintain 8px grid.
- Use TeleNeo for headings.
- Keep button hover scale consistent.
- Use shadows for emphasis.

## DON'T List
- Don't invent new magenta shades.
- Don't mix sharp and rounded corners in one component.
- Don't use blue for non-interactive text.
- Don't apply shadows to text.

## Code Examples

```css
.btn-primary {
  background: #e20074;
  color: #fbfbfb;
  padding: 0 16px;
  border-radius: 0;
  font-weight: 700;
  font-size: 14px;
  border: none;
  transition: all 150ms ease;
}
.btn-primary:hover {
  opacity: 0.7;
  transform: scale(1.2);
  box-shadow: rgba(0,0,0,0.16) 0px 3px 6px, rgba(0,0,0,0.23) 0px 3px 6px;
}
.btn-secondary {
  background: #cccccc;
  color: #141414;
  padding: 8px 16px;
  border-radius: 4px;
}
.card {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: var(--shadow-card);
}
```