# ISA Tailwind Design System Reference

This document provides a comprehensive reference for the ISA-specific Tailwind CSS design system used throughout the ISA-Frontend project.

## Custom Breakpoints

### ISA Breakpoints (Preferred)
- `isa-desktop`: 1024px
- `isa-desktop-l`: 1440px
- `isa-desktop-xl`: 1920px

**Note**: Prefer using the breakpoint service from `@isa/ui/layout` for reactive breakpoint detection instead of CSS-only solutions.

## Z-Index System

Predefined z-index values for consistent layering:

- `z-dropdown`: 50
- `z-sticky`: 100
- `z-fixed`: 150
- `z-modalBackdrop`: 200
- `z-modal`: 250
- `z-popover`: 300
- `z-tooltip`: 350

**Usage**: `z-modal`, `z-tooltip`, etc.

## Color Palette

**IMPORTANT: Only use `isa-*` prefixed colors in new code.** Other colors listed below exist only for backwards compatibility and should NOT be used.

### ISA Brand Colors (Use These)

#### Accent Colors
- `isa-accent-red`: #DF001B
- `isa-accent-blue`: #354ACB
- `isa-accent-green`: #26830C

#### Accent Color Shades
- `isa-shades-red-600`: #C60018
- `isa-shades-red-700`: #B30016

#### Secondary Colors (100-900 scale)
- `isa-secondary-100`: #EBEFFF (lightest)
- `isa-secondary-200`: #B9C4FF
- `isa-secondary-300`: #8FA0FF
- `isa-secondary-400`: #6E82FE
- `isa-secondary-500`: #556AEB
- `isa-secondary-600`: #354ACB
- `isa-secondary-700`: #1D2F99
- `isa-secondary-800`: #0C1A66
- `isa-secondary-900`: #020A33 (darkest)

#### Neutral Colors (100-900 scale)
- `isa-neutral-100`: #F8F9FA (lightest)
- `isa-neutral-200`: #E9ECEF
- `isa-neutral-300`: #DEE2E6
- `isa-neutral-400`: #CED4DA
- `isa-neutral-500`: #A5ACB4
- `isa-neutral-600`: #6C757D
- `isa-neutral-700`: #495057
- `isa-neutral-800`: #343A40
- `isa-neutral-900`: #212529 (darkest)

#### Basic Colors
- `isa-black`: #000000
- `isa-white`: #FFFFFF

**Usage**: `bg-isa-accent-red`, `text-isa-secondary-600`, `border-isa-neutral-400`

### Deprecated Colors (DO NOT USE - Backwards Compatibility Only)

The following colors exist in the codebase for backwards compatibility. **DO NOT use them in new code.**

#### Deprecated Semantic Colors
- `background`, `background-content`
- `surface`, `surface-content`, `surface-2`, `surface-2-content`
- `components-menu`, `components-menu-content`, `components-menu-seperator`, `components-menu-hover`
- `components-button`, `components-button-content`, `components-button-light`, `components-button-hover`
- `accent-1`, `accent-1-content`, `accent-1-hover`, `accent-1-active`
- `accent-2`, `accent-2-content`, `accent-2-hover`, `accent-2-active`

#### Deprecated Named Colors
- `warning`, `brand`
- `customer`, `font-customer`, `active-customer`, `inactive-customer`, `disabled-customer`
- `branch`, `font-branch`, `active-branch`, `inactive-branch`, `disabled-branch`
- `accent-teal`, `accent-green`, `accent-orange`, `accent-darkblue`
- `ucla-blue`, `wild-blue-yonder`, `dark-cerulean`, `cool-grey`
- `glitter`, `munsell`, `onyx`, `dark-goldenrod`, `cadet`, `cadet-blue`
- `control-border`, `background-liste`

**These colors should NOT be used in new code. Use `isa-*` prefixed colors instead.**

## Typography

### ISA Typography Utilities

All typography utilities use **Open Sans** font family.

#### Headings

**Heading 1 Bold** (`.isa-text-heading-1-bold`):
- Size: 3.75rem (60px)
- Weight: 700
- Line Height: 4.5rem (72px)
- Letter Spacing: 0.02813rem

**Heading 2 Bold** (`.isa-text-heading-2-bold`):
- Size: 3rem (48px)
- Weight: 700
- Line Height: 4rem (64px)

**Heading 3 Bold** (`.isa-text-heading-3-bold`):
- Size: 2.5rem (40px)
- Weight: 700
- Line Height: 3rem (48px)

#### Subtitles

**Subtitle 1 Regular** (`.isa-text-subtitle-1-regular`):
- Size: 1.75rem (28px)
- Weight: 400
- Line Height: 2.5rem (40px)

**Subtitle 1 Bold** (`.isa-text-subtitle-1-bold`):
- Size: 1.75rem (28px)
- Weight: 700
- Line Height: 2.5rem (40px)

**Subtitle 2 Bold** (`.isa-text-subtitle-2-bold`):
- Size: 1rem (16px)
- Weight: 700
- Line Height: 1.5rem (24px)
- Letter Spacing: 0.025rem
- Text Transform: UPPERCASE

#### Body Text

**Body 1 Variants** (1rem / 16px base):
- `.isa-text-body-1-bold`: Weight 700, Line Height 1.5rem
- `.isa-text-body-1-bold-big`: Size 1.25rem, Weight 700, Line Height 1.75rem
- `.isa-text-body-1-bold-xl`: Size 1.375rem, Weight 700, Line Height 2.125rem
- `.isa-text-body-1-semibold`: Weight 600, Line Height 1.5rem
- `.isa-text-body-1-regular`: Weight 400, Line Height 1.5rem
- `.isa-text-body-1-regular-big`: Size 1.25rem, Weight 400, Line Height 1.75rem
- `.isa-text-body-1-regular-xl`: Size 1.375rem, Weight 400, Line Height 2.125rem

**Body 2 Variants** (0.875rem / 14px base):
- `.isa-text-body-2-bold`: Weight 700, Line Height 1.25rem
- `.isa-text-body-2-bold-big`: Size 1.125rem, Weight 700, Line Height 1.625rem
- `.isa-text-body-2-bold-xl`: Size 1.25rem, Weight 700, Line Height 1.75rem
- `.isa-text-body-2-semibold`: Weight 600, Line Height 1.25rem
- `.isa-text-body-2-regular`: Weight 400, Line Height 1.25rem
- `.isa-text-body-2-regular-big`: Size 1.125rem, Weight 400, Line Height 1.625rem
- `.isa-text-body-2-regular-xl`: Size 1.125rem, Weight 400, Line Height 1.75rem

#### Caption Text

**Caption Variants** (0.75rem / 12px base):
- `.isa-text-caption-bold`: Weight 700, Line Height 1rem
- `.isa-text-caption-bold-big`: Size 0.875rem, Weight 700, Line Height 1.25rem
- `.isa-text-caption-bold-xl`: Size 0.875rem, Weight 700, Line Height 1.25rem
- `.isa-text-caption-caps`: Weight 700, Line Height 1rem, UPPERCASE
- `.isa-text-caption-regular`: Weight 400, Line Height 1rem
- `.isa-text-caption-regular-big`: Size 0.875rem, Weight 400, Line Height 1.25rem
- `.isa-text-caption-regular-xl`: Size 0.875rem, Weight 400, Line Height 1.25rem

## Best Practices

1. **Use ISA-prefixed utilities**: Prefer `isa-text-*`, `isa-accent-*`, etc. for consistency
2. **Follow typography system**: Use the predefined typography classes instead of custom font sizes
3. **Use breakpoint service**: Import from `@isa/ui/layout` for reactive breakpoint detection
5. **Z-index system**: Always use predefined z-index utilities for layering
