1:root {
  2  --primary-color: #007aff;
  3  --secondary-color: #5ac8fa;
  4  --background-color: #f5f5f7;
  5  --text-color: #1d1d1f;
  6  --light-gray: #d1d1d6;
  7  --dark-gray: #8e8e93;
  8  --success-color: #34c759;
  9  --danger-color: #ff3b30;
 10  --warning-color: #ff9500;
 11  --border-radius: 8px;
 12  --spacing-xs: 4px;
 13  --spacing-sm: 8px;
 14  --spacing-md: 16px;
 15  --spacing-lg: 24px;
 16  --spacing-xl: 32px;
 17  --bottom-nav-height: 60px;
 18  --side-nav-width: 250px;
 19  --header-height: 60px;
 20}
 21
 22* {
 23  box-sizing: border-box;
 24  margin: 0;
 25  padding: 0;
 26}
 27
 28body {
 29  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
 30    Arial, sans-serif;
 31  background-color: var(--background-color);
 32  color: var(--text-color);
 33  line-height: 1.5;
 34}
 35
 36#root {
 37  min-height: 100vh;
 38  display: flex;
 39  flex-direction: column;
 40}
 41
 42/* App container */
 43.app-container {
 44  flex: 1;
 45  display: flex;
 46  flex-direction: column;
 47  max-width: 100%;
 48}
 49
 50/* Mobile layout */
 51.mobile-layout .content-area {
 52  padding: var(--spacing-md);
 53  padding-bottom: calc(var(--bottom-nav-height) + var(--spacing-md));
 54}
 55
 56/* Desktop layout */
 57.desktop-layout {
 58  flex-direction: row;
 59}
 60
 61.desktop-layout .content-area {
 62  flex: 1;
 63  margin-left: var(--side-nav-width);
 64  padding: var(--spacing-lg);
 65}
 66
 67/* Page styling */
 68.page {
 69  max-width: 1200px;
 70  margin: 0 auto;
 71}
 72
 73/* Typography */
 74h1 {
 75  font-size: 24px;
 76  font-weight: 600;
 77  margin-bottom: var(--spacing-lg);
 78}
 79
 80h2 {
 81  font-size: 20px;
 82  font-weight: 500;
 83  margin-bottom: var(--spacing-md);
 84}
 85
 86h3 {
 87  font-size: 18px;
 88  font-weight: 500;
 89  margin-bottom: var(--spacing-md);
 90}
 91
 92/* Form elements */
 93.form-group {
 94  margin-bottom: var(--spacing-lg);
 95}
 96
 97label {
 98  display: block;
 99  margin-bottom: var(--spacing-xs);
100  font-weight: 500;
101}
102
103input, select, textarea {
104  width: 100%;
105  padding: var(--spacing-sm);
106  border: 1px solid var(--light-gray);
107  border-radius: var(--border-radius);
108  font-size: 16px;
109  background-color: white;
110}
111
112input:focus, select:focus, textarea:focus {
113  outline: none;
114  border-color: var(--primary-color);
115}
116
117/* Buttons */
118.btn {
119  display: inline-block;
120  padding: 10px 16px;
121  border: none;
122  border-radius: var(--border-radius);
123  font-size: 16px;
124  font-weight: 500;
125  cursor: pointer;
126  transition: all 0.2s;
127  text-align: center;
128}
129
130.btn-primary {
131  background-color: var(--primary-color);
132  color: white;
133}
134
135.btn-secondary {
136  background-color: var(--light-gray);
137  color: var(--text-color);
138}
139
140.btn-success {
141  background-color: var(--success-color);
142  color: white;
143}
144
145.btn-danger {
146  background-color: var(--danger-color);
147  color: white;
148}
149
150.btn-block {
151  display: block;
152  width: 100%;
153}
154
155/* Cards */
156.card {
157  background-color: white;
158  border-radius: var(--border-radius);
159  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
160  padding: var(--spacing-lg);
161  margin-bottom: var(--spacing-lg);
162}
163
164/* Lists */
165.list-item {
166  padding: var(--spacing-md);
167  border-bottom: 1px solid var(--light-gray);
168}
169
170.list-item:last-child {
171  border-bottom: none;
172}
173
174/* Utilities */
175.text-center {
176  text-align: center;
177}
178
179.text-right {
180  text-align: right;
181}
182
183.flex {
184  display: flex;
185}
186
187.flex-col {
188  flex-direction: column;
189}
190
191.justify-between {
192  justify-content: space-between;
193}
194
195.items-center {
196  align-items: center;
197}
198
199.mt-sm { margin-top: var(--spacing-sm); }
200.mt-md { margin-top: var(--spacing-md); }
201.mt-lg { margin-top: var(--spacing-lg); }
202
203.mb-sm { margin-bottom: var(--spacing-sm); }
204.mb-md { margin-bottom: var(--spacing-md); }
205.mb-lg { margin-bottom: var(--spacing-lg); }
206
207/* Responsive layouts */
208@media (max-width: 767px) {
209  h1 {
210    font-size: 22px;
211  }
212  
213  h2 {
214    font-size: 18px;
215  }
216}