:root {
  /* Colors */
  --color-white: #ffffff;
  --color-dark-gray: #333333;
  --color-iso-red: #e3000f;
  --color-black: #000000;
  --color-deep-red-hover: #c4000d;
  --color-darker-red-hover: #b6000c;
  --color-brand-mid: #9c2b42;
  --color-danger-text-emphasis: #3e111a;
  --color-danger-bg-subtle: #ebd5d9;
  --color-info-text-emphasis: #002b49;
  --color-info-bg-subtle: #cce1f1;
  --color-success-text-emphasis: #003929;
  --color-success-bg-subtle: #cce9e1;
  --color-secondary-bg-subtle: #dccdd2;
  --color-secondary-bg: #e9ecef;
  --color-secondary-text-emphasis: #20020c;
  --color-dark-bg-subtle: #d5d5d5;
  --color-dark-text-emphasis: #495057;
  --color-warning-bg-subtle: #fef1d8;
  --color-warning-text-emphasis: #644a19;
  --color-primary-bg-subtle: #f9cccf;
  --color-primary-text-emphasis: #5b0006;
  --color-highlight: #212529;
  --color-border: #dee2e6;
  --color-form-valid: #008f67;
  --color-code: #4f051f;

  /* Typography */
  --font-family-primary: "Inter var ISO", Arial, Helvetica, system-ui;
  --font-weight-light: 350;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing */
  --space-2: 2px;
  --space-3: 3px;
  --space-3_75: 3.75px;
  --space-5: 5px;
  --space-7_5: 7.5px;
  --space-10: 10px;
  --space-15: 15px;
  --space-20: 20px;
  --space-30: 30px;
  --space-75: 75px;

  /* Radius */
  --radius-none: 0px;
  --radius-sm: 7px;
  --radius-md: 9px;
  --radius-lg: 10px;
  --radius-modal: 13.2px;

  /* Shadows */
  --shadow-sm: rgba(0,0,0,0.075) 0px 2.5px 5px;
  --shadow-md: rgba(0,0,0,0.075) 0px 5px 10px;
  --shadow-lg: rgba(0,0,0,0.15) 0px 20px 20px;
}

# ISO Design System Specification

You are an ISO design expert. Build UIs matching their visual language exactly.

## Brand Context
ISO’s design is precise, institutional, and authoritative. It uses a red/white/gray palette, a custom Inter variable font, and a consistent 4px-based spacing grid. Corners are generally 10px radius. Shadows are subtle.

## Color Palette
- White: #ffffff — Backgrounds, text on dark surfaces
- Dark Gray: #333333 — Body text, neutral elements
- ISO Red: #e3000f — Logo, CTAs, primary actions
- Black: #000000 — High-contrast text, icons
- Deep Red Hover: #c4000d — Hover states
- Darker Red Hover: #b6000c — Alternate hover/focus
- Brand Mid: #9c2b42 — Secondary accents
- Danger Text Emphasis: #3e111a — Error text
- Danger Bg Subtle: #ebd5d9 — Error backgrounds
- Info Text Emphasis: #002b49 — Info labels
- Info Bg Subtle: #cce1f1 — Info backgrounds
- Success Text Emphasis: #003929 — Success labels
- Success Bg Subtle: #cce9e1 — Success backgrounds
- Secondary Bg Subtle: #dccdd2 — Secondary surfaces
- Secondary Bg: #e9ecef — Panels
- Secondary Text Emphasis: #20020c — Secondary headings
- Dark Bg Subtle: #d5d5d5 — Light gray surfaces
- Dark Text Emphasis: #495057 — Dimmed text
- Warning Bg Subtle: #fef1d8 — Warning backgrounds
- Warning Text Emphasis: #644a19 — Warning labels
- Primary Bg Subtle: #f9cccf — Light red backgrounds
- Primary Text Emphasis: #5b0006 — Brand text
- Highlight: #212529 — Highlights
- Border Color: #dee2e6 — Dividers
- Form Valid Color: #008f67 — Validation success
- Code Color: #4f051f — Code snippets

## Typography
Font: "Inter var ISO", Arial, Helvetica, system-ui

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 50px | 500 | 1.25 | Page titles |
| H1 | 42px | 500 | 1.25 | Section titles |
| H1 | 36px | 500 | 1.25 | Subsections |
| H1 | 30px | 500 | 1.40 | Smaller headings |
| H1 | 26.666px | 350 | 1.19 | Intro headings |
| Link | 25px | 500 | 1.25 | Nav links |
| Button | 20px | 600 | 1.40 | Main buttons |
| Body | 17.5px | 350 | 1.40 | Content text |
| Caption | 3px | 500 | 1.20 | Micro labels |

## Spacing & Grid
Base: 4px  
Scale: 2px, 3px, 3.75px, 5px, 7.5px, 10px, 15px, 20px, 30px, 75px  
Use 10px/20px for most padding. 75px for section gaps.

## Border Radius
- none: 0px — data tables
- sm: 7px — small buttons
- md: 9px — spans
- lg: 10px — buttons, cards, inputs
- modal: 13.2px — modals
- special: asymmetric radii for search inputs and split buttons

## Shadows & Depth
- sm: rgba(0,0,0,0.075) 0px 2.5px 5px
- md: rgba(0,0,0,0.075) 0px 5px 10px
- lg: rgba(0,0,0,0.15) 0px 20px 20px

## Component Specifications

### Primary Button
Default: bg #ffffff, color #e3000f, padding 7.5px 20px, radius 0px 10px 10px 0px, no border  
Hover: bg rgba(255,255,255,0.3), color #ffffff  
Active: bg #ffffff, color #333333  
Focus: bg #ffffff, color #333333

### Outline Light Button
Default: transparent bg, color #faf9f9, padding 5px 16px, radius 7px, border 2px solid #faf9f9  
Hover: outline white 2px, scale(1.1)  
Active: bg white, color #333333  
Focus: bg #006bb7, color #e3000f

### Input Field
Default: bg white, border 1px solid #c9c4c2, radius 10px 0px 0px 10px, padding 7.5px 15px  
Focus: border-color var(--bs-form-invalid-border-color), box-shadow 0 0 0 .25rem rgba(var(--bs-danger-rgb),.25)

## Layout & Responsive Rules
Max content width: follows Bootstrap container defaults  
Page padding: multiples of 10px/20px  
Breakpoints: 98px, 420px, 576px, 600px, 767px, 768px, 992px, 1024px, 1200px, 1400px, 1680px

## Interaction Rules
- Transition: 150ms ease on hover/focus
- Focus indicators: color change + scale(1.1)
- No complex animations

## DO List
- Use only colors from palette
- Maintain 4px-based spacing
- Keep headings tight and bold
- Use 10px radius for most components
- Respect breakpoints exactly
- Ensure WCAG AA contrast
- Use Inter var ISO for all text

## DON'T List
- Invent new colors
- Mix rounded and sharp corners
- Add heavy shadows
- Use underlines on red links
- Use non-standard font weights

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #ffffff;
  color: #e3000f;
  padding: 7.5px 20px;
  border-radius: 0px 10px 10px 0px;
  font-weight: 350;
  font-size: 20px;
  border: none;
  transition: all 150ms ease;
}
.btn-primary:hover {
  background: rgba(255,255,255,0.3);
  color: #ffffff;
}

.btn-outline-light {
  background: transparent;
  color: #faf9f9;
  padding: 5px 16px;
  border-radius: 7px;
  border: 2px solid #faf9f9;
  font-weight: 600;
  font-size: 17.5px;
}
.btn-outline-light:hover {
  outline: 2px solid #ffffff;
  transform: scale(1.1);
}

.input-search {
  background: #ffffff;
  border: 1px solid #c9c4c2;
  border-radius: 10px 0px 0px 10px;
  padding: 7.5px 15px;
}
.input-search:focus {
  box-shadow: 0 0 0 .25rem rgba(227,0,15,0.25);
}

---

## 9. Summary

**TL;DR** — ISO’s design system is clean, authoritative, and built on a red/white/gray palette with precise typography and a 4px grid. Corners are soft at 10px, shadows are subtle, and Bootstrap/Vuetify handle responsiveness.

**Brand Keywords**:
- authority-minimalist
- swiss-precise
- standards-driven
- no-nonsense