Urban-Guy/Drive
0
1:root {2 /* Primitive Color Tokens */3 --color-white: rgba(255, 255, 255, 1);4 --color-black: rgba(0, 0, 0, 1);5 --color-cream-50: rgba(252, 252, 249, 1);6 --color-cream-100: rgba(255, 255, 253, 1);7 --color-gray-200: rgba(245, 245, 245, 1);8 --color-gray-300: rgba(167, 169, 169, 1);9 --color-gray-400: rgba(119, 124, 124, 1);10 --color-slate-500: rgba(98, 108, 113, 1);11 --color-brown-600: rgba(94, 82, 64, 1);12 --color-charcoal-700: rgba(31, 33, 33, 1);13 --color-charcoal-800: rgba(38, 40, 40, 1);14 --color-slate-900: rgba(19, 52, 59, 1);15 --color-teal-300: rgba(50, 184, 198, 1);16 --color-teal-400: rgba(45, 166, 178, 1);17 --color-teal-500: rgba(33, 128, 141, 1);18 --color-teal-600: rgba(29, 116, 128, 1);19 --color-teal-700: rgba(26, 104, 115, 1);20 --color-teal-800: rgba(41, 150, 161, 1);21 --color-red-400: rgba(255, 84, 89, 1);22 --color-red-500: rgba(192, 21, 47, 1);23 --color-orange-400: rgba(230, 129, 97, 1);24 --color-orange-500: rgba(168, 75, 47, 1);25 26 /* RGB versions for opacity control */27 --color-brown-600-rgb: 94, 82, 64;28 --color-teal-500-rgb: 33, 128, 141;29 --color-slate-900-rgb: 19, 52, 59;30 --color-slate-500-rgb: 98, 108, 113;31 --color-red-500-rgb: 192, 21, 47;32 --color-red-400-rgb: 255, 84, 89;33 --color-orange-500-rgb: 168, 75, 47;34 --color-orange-400-rgb: 230, 129, 97;35 36 /* Background color tokens (Light Mode) */37 --color-bg-1: rgba(59, 130, 246, 0.08); /* Light blue */38 --color-bg-2: rgba(245, 158, 11, 0.08); /* Light yellow */39 --color-bg-3: rgba(34, 197, 94, 0.08); /* Light green */40 --color-bg-4: rgba(239, 68, 68, 0.08); /* Light red */41 --color-bg-5: rgba(147, 51, 234, 0.08); /* Light purple */42 --color-bg-6: rgba(249, 115, 22, 0.08); /* Light orange */43 --color-bg-7: rgba(236, 72, 153, 0.08); /* Light pink */44 --color-bg-8: rgba(6, 182, 212, 0.08); /* Light cyan */45 46 /* Semantic Color Tokens (Light Mode) */47 --color-background: var(--color-cream-50);48 --color-surface: var(--color-cream-100);49 --color-text: var(--color-slate-900);50 --color-text-secondary: var(--color-slate-500);51 --color-primary: var(--color-teal-500);52 --color-primary-hover: var(--color-teal-600);53 --color-primary-active: var(--color-teal-700);54 --color-secondary: rgba(var(--color-brown-600-rgb), 0.12);55 --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);56 --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);57 --color-border: rgba(var(--color-brown-600-rgb), 0.2);58 --color-btn-primary-text: var(--color-cream-50);59 --color-card-border: rgba(var(--color-brown-600-rgb), 0.12);60 --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);61 --color-error: var(--color-red-500);62 --color-success: var(--color-teal-500);63 --color-warning: var(--color-orange-500);64 --color-info: var(--color-slate-500);65 --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);66 --color-select-caret: rgba(var(--color-slate-900-rgb), 0.8);67 68 /* Common style patterns */69 --focus-ring: 0 0 0 3px var(--color-focus-ring);70 --focus-outline: 2px solid var(--color-primary);71 --status-bg-opacity: 0.15;72 --status-border-opacity: 0.25;73 --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");74 --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");75 76 /* RGB versions for opacity control */77 --color-success-rgb: 33, 128, 141;78 --color-error-rgb: 192, 21, 47;79 --color-warning-rgb: 168, 75, 47;80 --color-info-rgb: 98, 108, 113;81 82 /* Typography */83 --font-family-base: "FKGroteskNeue", "Geist", "Inter", -apple-system,84 BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;85 --font-family-mono: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo,86 Monaco, Consolas, monospace;87 --font-size-xs: 11px;88 --font-size-sm: 12px;89 --font-size-base: 14px;90 --font-size-md: 14px;91 --font-size-lg: 16px;92 --font-size-xl: 18px;93 --font-size-2xl: 20px;94 --font-size-3xl: 24px;95 --font-size-4xl: 30px;96 --font-weight-normal: 400;97 --font-weight-medium: 500;98 --font-weight-semibold: 550;99 --font-weight-bold: 600;100 --line-height-tight: 1.2;101 --line-height-normal: 1.5;102 --letter-spacing-tight: -0.01em;103 104 /* Spacing */105 --space-0: 0;106 --space-1: 1px;107 --space-2: 2px;108 --space-4: 4px;109 --space-6: 6px;110 --space-8: 8px;111 --space-10: 10px;112 --space-12: 12px;113 --space-16: 16px;114 --space-20: 20px;115 --space-24: 24px;116 --space-32: 32px;117 118 /* Border Radius */119 --radius-sm: 6px;120 --radius-base: 8px;121 --radius-md: 10px;122 --radius-lg: 12px;123 --radius-full: 9999px;124 125 /* Shadows */126 --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);127 --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);128 --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04),129 0 2px 4px -1px rgba(0, 0, 0, 0.02);130 --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04),131 0 4px 6px -2px rgba(0, 0, 0, 0.02);132 --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.15),133 inset 0 -1px 0 rgba(0, 0, 0, 0.03);134 135 /* Animation */136 --duration-fast: 150ms;137 --duration-normal: 250ms;138 --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);139 140 /* Layout */141 --container-sm: 640px;142 --container-md: 768px;143 --container-lg: 1024px;144 --container-xl: 1280px;145}146 147/* Dark mode colors */148@media (prefers-color-scheme: dark) {149 :root {150 /* RGB versions for opacity control (Dark Mode) */151 --color-gray-400-rgb: 119, 124, 124;152 --color-teal-300-rgb: 50, 184, 198;153 --color-gray-300-rgb: 167, 169, 169;154 --color-gray-200-rgb: 245, 245, 245;155 156 /* Background color tokens (Dark Mode) */157 --color-bg-1: rgba(29, 78, 216, 0.15); /* Dark blue */158 --color-bg-2: rgba(180, 83, 9, 0.15); /* Dark yellow */159 --color-bg-3: rgba(21, 128, 61, 0.15); /* Dark green */160 --color-bg-4: rgba(185, 28, 28, 0.15); /* Dark red */161 --color-bg-5: rgba(107, 33, 168, 0.15); /* Dark purple */162 --color-bg-6: rgba(194, 65, 12, 0.15); /* Dark orange */163 --color-bg-7: rgba(190, 24, 93, 0.15); /* Dark pink */164 --color-bg-8: rgba(8, 145, 178, 0.15); /* Dark cyan */165 166 /* Semantic Color Tokens (Dark Mode) */167 --color-background: var(--color-charcoal-700);168 --color-surface: var(--color-charcoal-800);169 --color-text: var(--color-gray-200);170 --color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7);171 --color-primary: var(--color-teal-300);172 --color-primary-hover: var(--color-teal-400);173 --color-primary-active: var(--color-teal-800);174 --color-secondary: rgba(var(--color-gray-400-rgb), 0.15);175 --color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);176 --color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);177 --color-border: rgba(var(--color-gray-400-rgb), 0.3);178 --color-error: var(--color-red-400);179 --color-success: var(--color-teal-300);180 --color-warning: var(--color-orange-400);181 --color-info: var(--color-gray-300);182 --color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);183 --color-btn-primary-text: var(--color-slate-900);184 --color-card-border: rgba(var(--color-gray-400-rgb), 0.2);185 --color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);186 --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),187 inset 0 -1px 0 rgba(0, 0, 0, 0.15);188 --button-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);189 --color-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);190 --color-select-caret: rgba(var(--color-gray-200-rgb), 0.8);191 192 /* Common style patterns - updated for dark mode */193 --focus-ring: 0 0 0 3px var(--color-focus-ring);194 --focus-outline: 2px solid var(--color-primary);195 --status-bg-opacity: 0.15;196 --status-border-opacity: 0.25;197 --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");198 --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");199 200 /* RGB versions for dark mode */201 --color-success-rgb: var(--color-teal-300-rgb);202 --color-error-rgb: var(--color-red-400-rgb);203 --color-warning-rgb: var(--color-orange-400-rgb);204 --color-info-rgb: var(--color-gray-300-rgb);205 }206}207 208/* Data attribute for manual theme switching */209[data-color-scheme="dark"] {210 /* RGB versions for opacity control (dark mode) */211 --color-gray-400-rgb: 119, 124, 124;212 --color-teal-300-rgb: 50, 184, 198;213 --color-gray-300-rgb: 167, 169, 169;214 --color-gray-200-rgb: 245, 245, 245;215 216 /* Colorful background palette - Dark Mode */217 --color-bg-1: rgba(29, 78, 216, 0.15); /* Dark blue */218 --color-bg-2: rgba(180, 83, 9, 0.15); /* Dark yellow */219 --color-bg-3: rgba(21, 128, 61, 0.15); /* Dark green */220 --color-bg-4: rgba(185, 28, 28, 0.15); /* Dark red */221 --color-bg-5: rgba(107, 33, 168, 0.15); /* Dark purple */222 --color-bg-6: rgba(194, 65, 12, 0.15); /* Dark orange */223 --color-bg-7: rgba(190, 24, 93, 0.15); /* Dark pink */224 --color-bg-8: rgba(8, 145, 178, 0.15); /* Dark cyan */225 226 /* Semantic Color Tokens (Dark Mode) */227 --color-background: var(--color-charcoal-700);228 --color-surface: var(--color-charcoal-800);229 --color-text: var(--color-gray-200);230 --color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7);231 --color-primary: var(--color-teal-300);232 --color-primary-hover: var(--color-teal-400);233 --color-primary-active: var(--color-teal-800);234 --color-secondary: rgba(var(--color-gray-400-rgb), 0.15);235 --color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);236 --color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);237 --color-border: rgba(var(--color-gray-400-rgb), 0.3);238 --color-error: var(--color-red-400);239 --color-success: var(--color-teal-300);240 --color-warning: var(--color-orange-400);241 --color-info: var(--color-gray-300);242 --color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);243 --color-btn-primary-text: var(--color-slate-900);244 --color-card-border: rgba(var(--color-gray-400-rgb), 0.15);245 --color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);246 --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),247 inset 0 -1px 0 rgba(0, 0, 0, 0.15);248 --color-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);249 --color-select-caret: rgba(var(--color-gray-200-rgb), 0.8);250 251 /* Common style patterns - updated for dark mode */252 --focus-ring: 0 0 0 3px var(--color-focus-ring);253 --focus-outline: 2px solid var(--color-primary);254 --status-bg-opacity: 0.15;255 --status-border-opacity: 0.25;256 --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");257 --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");258 259 /* RGB versions for dark mode */260 --color-success-rgb: var(--color-teal-300-rgb);261 --color-error-rgb: var(--color-red-400-rgb);262 --color-warning-rgb: var(--color-orange-400-rgb);263 --color-info-rgb: var(--color-gray-300-rgb);264}265 266[data-color-scheme="light"] {267 /* RGB versions for opacity control (light mode) */268 --color-brown-600-rgb: 94, 82, 64;269 --color-teal-500-rgb: 33, 128, 141;270 --color-slate-900-rgb: 19, 52, 59;271 272 /* Semantic Color Tokens (Light Mode) */273 --color-background: var(--color-cream-50);274 --color-surface: var(--color-cream-100);275 --color-text: var(--color-slate-900);276 --color-text-secondary: var(--color-slate-500);277 --color-primary: var(--color-teal-500);278 --color-primary-hover: var(--color-teal-600);279 --color-primary-active: var(--color-teal-700);280 --color-secondary: rgba(var(--color-brown-600-rgb), 0.12);281 --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);282 --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);283 --color-border: rgba(var(--color-brown-600-rgb), 0.2);284 --color-btn-primary-text: var(--color-cream-50);285 --color-card-border: rgba(var(--color-brown-600-rgb), 0.12);286 --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);287 --color-error: var(--color-red-500);288 --color-success: var(--color-teal-500);289 --color-warning: var(--color-orange-500);290 --color-info: var(--color-slate-500);291 --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);292 293 /* RGB versions for light mode */294 --color-success-rgb: var(--color-teal-500-rgb);295 --color-error-rgb: var(--color-red-500-rgb);296 --color-warning-rgb: var(--color-orange-500-rgb);297 --color-info-rgb: var(--color-slate-500-rgb);298}299 300/* Base styles */301html {302 font-size: var(--font-size-base);303 font-family: var(--font-family-base);304 line-height: var(--line-height-normal);305 color: var(--color-text);306 background-color: var(--color-background);307 -webkit-font-smoothing: antialiased;308 box-sizing: border-box;309}310 311body {312 margin: 0;313 padding: 0;314}315 316*,317*::before,318*::after {319 box-sizing: inherit;320}321 322/* Typography */323h1,324h2,325h3,326h4,327h5,328h6 {329 margin: 0;330 font-weight: var(--font-weight-semibold);331 line-height: var(--line-height-tight);332 color: var(--color-text);333 letter-spacing: var(--letter-spacing-tight);334}335 336h1 {337 font-size: var(--font-size-4xl);338}339h2 {340 font-size: var(--font-size-3xl);341}342h3 {343 font-size: var(--font-size-2xl);344}345h4 {346 font-size: var(--font-size-xl);347}348h5 {349 font-size: var(--font-size-lg);350}351h6 {352 font-size: var(--font-size-md);353}354 355p {356 margin: 0 0 var(--space-16) 0;357}358 359a {360 color: var(--color-primary);361 text-decoration: none;362 transition: color var(--duration-fast) var(--ease-standard);363}364 365a:hover {366 color: var(--color-primary-hover);367}368 369code,370pre {371 font-family: var(--font-family-mono);372 font-size: calc(var(--font-size-base) * 0.95);373 background-color: var(--color-secondary);374 border-radius: var(--radius-sm);375}376 377code {378 padding: var(--space-1) var(--space-4);379}380 381pre {382 padding: var(--space-16);383 margin: var(--space-16) 0;384 overflow: auto;385 border: 1px solid var(--color-border);386}387 388pre code {389 background: none;390 padding: 0;391}392 393/* Buttons */394.btn {395 display: inline-flex;396 align-items: center;397 justify-content: center;398 padding: var(--space-8) var(--space-16);399 border-radius: var(--radius-base);400 font-size: var(--font-size-base);401 font-weight: 500;402 line-height: 1.5;403 cursor: pointer;404 transition: all var(--duration-normal) var(--ease-standard);405 border: none;406 text-decoration: none;407 position: relative;408}409 410.btn:focus-visible {411 outline: none;412 box-shadow: var(--focus-ring);413}414 415.btn--primary {416 background: var(--color-primary);417 color: var(--color-btn-primary-text);418}419 420.btn--primary:hover {421 background: var(--color-primary-hover);422}423 424.btn--primary:active {425 background: var(--color-primary-active);426}427 428.btn--secondary {429 background: var(--color-secondary);430 color: var(--color-text);431}432 433.btn--secondary:hover {434 background: var(--color-secondary-hover);435}436 437.btn--secondary:active {438 background: var(--color-secondary-active);439}440 441.btn--outline {442 background: transparent;443 border: 1px solid var(--color-border);444 color: var(--color-text);445}446 447.btn--outline:hover {448 background: var(--color-secondary);449}450 451.btn--sm {452 padding: var(--space-4) var(--space-12);453 font-size: var(--font-size-sm);454 border-radius: var(--radius-sm);455}456 457.btn--lg {458 padding: var(--space-10) var(--space-20);459 font-size: var(--font-size-lg);460 border-radius: var(--radius-md);461}462 463.btn--full-width {464 width: 100%;465}466 467.btn:disabled {468 opacity: 0.5;469 cursor: not-allowed;470}471 472/* Form elements */473.form-control {474 display: block;475 width: 100%;476 padding: var(--space-8) var(--space-12);477 font-size: var(--font-size-md);478 line-height: 1.5;479 color: var(--color-text);480 background-color: var(--color-surface);481 border: 1px solid var(--color-border);482 border-radius: var(--radius-base);483 transition: border-color var(--duration-fast) var(--ease-standard),484 box-shadow var(--duration-fast) var(--ease-standard);485}486 487textarea.form-control {488 font-family: var(--font-family-base);489 font-size: var(--font-size-base);490}491 492select.form-control {493 padding: var(--space-8) var(--space-12);494 -webkit-appearance: none;495 -moz-appearance: none;496 appearance: none;497 background-image: var(--select-caret-light);498 background-repeat: no-repeat;499 background-position: right var(--space-12) center;500 background-size: 16px;501 padding-right: var(--space-32);502}503 504/* Add a dark mode specific caret */505@media (prefers-color-scheme: dark) {506 select.form-control {507 background-image: var(--select-caret-dark);508 }509}510 511/* Also handle data-color-scheme */512[data-color-scheme="dark"] select.form-control {513 background-image: var(--select-caret-dark);514}515 516[data-color-scheme="light"] select.form-control {517 background-image: var(--select-caret-light);518}519 520.form-control:focus {521 border-color: var(--color-primary);522 outline: var(--focus-outline);523}524 525.form-label {526 display: block;527 margin-bottom: var(--space-8);528 font-weight: var(--font-weight-medium);529 font-size: var(--font-size-sm);530}531 532.form-group {533 margin-bottom: var(--space-16);534}535 536/* Card component */537.card {538 background-color: var(--color-surface);539 border-radius: var(--radius-lg);540 border: 1px solid var(--color-card-border);541 box-shadow: var(--shadow-sm);542 overflow: hidden;543 transition: box-shadow var(--duration-normal) var(--ease-standard);544}545 546.card:hover {547 box-shadow: var(--shadow-md);548}549 550.card__body {551 padding: var(--space-16);552}553 554.card__header,555.card__footer {556 padding: var(--space-16);557 border-bottom: 1px solid var(--color-card-border-inner);558}559 560/* Status indicators - simplified with CSS variables */561.status {562 display: inline-flex;563 align-items: center;564 padding: var(--space-6) var(--space-12);565 border-radius: var(--radius-full);566 font-weight: var(--font-weight-medium);567 font-size: var(--font-size-sm);568}569 570.status--success {571 background-color: rgba(572 var(--color-success-rgb, 33, 128, 141),573 var(--status-bg-opacity)574 );575 color: var(--color-success);576 border: 1px solid577 rgba(var(--color-success-rgb, 33, 128, 141), var(--status-border-opacity));578}579 580.status--error {581 background-color: rgba(582 var(--color-error-rgb, 192, 21, 47),583 var(--status-bg-opacity)584 );585 color: var(--color-error);586 border: 1px solid587 rgba(var(--color-error-rgb, 192, 21, 47), var(--status-border-opacity));588}589 590.status--warning {591 background-color: rgba(592 var(--color-warning-rgb, 168, 75, 47),593 var(--status-bg-opacity)594 );595 color: var(--color-warning);596 border: 1px solid597 rgba(var(--color-warning-rgb, 168, 75, 47), var(--status-border-opacity));598}599 600.status--info {601 background-color: rgba(602 var(--color-info-rgb, 98, 108, 113),603 var(--status-bg-opacity)604 );605 color: var(--color-info);606 border: 1px solid607 rgba(var(--color-info-rgb, 98, 108, 113), var(--status-border-opacity));608}609 610/* Container layout */611.container {612 width: 100%;613 margin-right: auto;614 margin-left: auto;615 padding-right: var(--space-16);616 padding-left: var(--space-16);617}618 619@media (min-width: 640px) {620 .container {621 max-width: var(--container-sm);622 }623}624@media (min-width: 768px) {625 .container {626 max-width: var(--container-md);627 }628}629@media (min-width: 1024px) {630 .container {631 max-width: var(--container-lg);632 }633}634@media (min-width: 1280px) {635 .container {636 max-width: var(--container-xl);637 }638}639 640/* Utility classes */641.flex {642 display: flex;643}644.flex-col {645 flex-direction: column;646}647.items-center {648 align-items: center;649}650.justify-center {651 justify-content: center;652}653.justify-between {654 justify-content: space-between;655}656.gap-4 {657 gap: var(--space-4);658}659.gap-8 {660 gap: var(--space-8);661}662.gap-16 {663 gap: var(--space-16);664}665 666.m-0 {667 margin: 0;668}669.mt-8 {670 margin-top: var(--space-8);671}672.mb-8 {673 margin-bottom: var(--space-8);674}675.mx-8 {676 margin-left: var(--space-8);677 margin-right: var(--space-8);678}679.my-8 {680 margin-top: var(--space-8);681 margin-bottom: var(--space-8);682}683 684.p-0 {685 padding: 0;686}687.py-8 {688 padding-top: var(--space-8);689 padding-bottom: var(--space-8);690}691.px-8 {692 padding-left: var(--space-8);693 padding-right: var(--space-8);694}695.py-16 {696 padding-top: var(--space-16);697 padding-bottom: var(--space-16);698}699.px-16 {700 padding-left: var(--space-16);701 padding-right: var(--space-16);702}703 704.block {705 display: block;706}707.hidden {708 display: none;709}710 711/* Accessibility */712.sr-only {713 position: absolute;714 width: 1px;715 height: 1px;716 padding: 0;717 margin: -1px;718 overflow: hidden;719 clip: rect(0, 0, 0, 0);720 white-space: nowrap;721 border-width: 0;722}723 724:focus-visible {725 outline: var(--focus-outline);726 outline-offset: 2px;727}728 729/* Dark mode specifics */730[data-color-scheme="dark"] .btn--outline {731 border: 1px solid var(--color-border-secondary);732}733 734@font-face {735 font-family: 'FKGroteskNeue';736 src: url('https://r2cdn.perplexity.ai/fonts/FKGroteskNeue.woff2')737 format('woff2');738}739 740/* END PERPLEXITY DESIGN SYSTEM */741```css742/* ============================================743 GOOGLE DRIVE CLONE - COMPLETE CSS744 Redesigned with Perplexity Design System745 ============================================ */746 747* {748 margin: 0;749 padding: 0;750 box-sizing: border-box;751}752 753html {754 font-size: var(--font-size-base);755 font-family: var(--font-family-base);756 background-color: var(--color-background);757 color: var(--color-text);758}759 760body {761 background-color: var(--color-background) !important;762 color: var(--color-text) !important;763 overflow-x: hidden;764}765 766/* ============ HEADER ============ */767.header {768 height: 64px;769 border-bottom: 1px solid var(--color-border);770 display: flex;771 align-items: center;772 padding: 0 var(--space-24);773 position: sticky;774 top: 0;775 background: var(--color-surface);776 z-index: 1000;777 box-shadow: var(--shadow-sm);778}779 780.header-left {781 display: flex;782 align-items: center;783 flex: 0 0 auto;784 gap: 0;785}786 787.header-logo {788 margin-right: var(--space-32);789 cursor: pointer;790 display: flex;791 align-items: center;792 justify-content: center;793}794 795.header-logo svg {796 width: 40px;797 height: 40px;798}799 800.header-title {801 font-size: var(--font-size-2xl);802 font-weight: var(--font-weight-normal);803 color: var(--color-text-secondary);804 white-space: nowrap;805}806 807.header-center {808 flex: 1;809 display: flex;810 justify-content: center;811 min-width: 0;812}813 814.search-box {815 max-width: 720px;816 width: 100%;817 position: relative;818}819 820.search-input {821 width: 100%;822 height: 48px;823 border: none;824 background: var(--color-secondary);825 border-radius: var(--radius-base);826 padding: 0 48px;827 font-size: var(--font-size-base);828 outline: none;829 transition: all var(--duration-fast) var(--ease-standard);830 color: var(--color-text);831 font-family: var(--font-family-base);832}833 834.search-input::placeholder {835 color: var(--color-text-secondary);836}837 838.search-input:focus {839 background: var(--color-surface);840 box-shadow: var(--shadow-md);841 border: 1px solid var(--color-primary);842}843 844.search-icon {845 position: absolute;846 left: var(--space-16);847 top: 50%;848 transform: translateY(-50%);849 color: var(--color-text-secondary);850 display: flex;851 align-items: center;852 justify-content: center;853}854 855.search-icon .material-icons {856 font-size: 20px;857}858 859.header-right {860 display: flex;861 align-items: center;862 gap: 0;863 flex: 0 0 auto;864}865 866.header-icon {867 width: 40px;868 height: 40px;869 border-radius: var(--radius-full);870 display: flex;871 align-items: center;872 justify-content: center;873 cursor: pointer;874 color: var(--color-text-secondary);875 transition: background var(--duration-fast) var(--ease-standard);876 border: none;877 background: transparent;878}879 880.header-icon:hover {881 background: var(--color-secondary);882}883 884.header-icon:focus-visible {885 outline: var(--focus-outline);886 outline-offset: var(--space-2);887}888 889.header-icon .material-icons {890 font-size: 24px;891}892 893/* ============ SIDEBAR ============ */894.sidebar {895 width: 256px;896 position: fixed;897 left: 0;898 top: 64px;899 bottom: 0;900 padding: var(--space-12) 0;901 background: var(--color-surface);902 border-right: 1px solid var(--color-border);903 overflow-y: auto;904 z-index: 100;905}906 907.new-button {908 margin: 0 var(--space-12) var(--space-20);909 padding: var(--space-12) var(--space-24);910 background: var(--color-surface);911 border: 1px solid var(--color-border);912 border-radius: var(--radius-full);913 display: flex;914 align-items: center;915 gap: var(--space-12);916 cursor: pointer;917 transition: all var(--duration-fast) var(--ease-standard);918 box-shadow: var(--shadow-sm);919 font-size: var(--font-size-base);920 color: var(--color-text);921 font-weight: var(--font-weight-medium);922 font-family: var(--font-family-base);923}924 925.new-button:hover {926 background: var(--color-secondary);927 box-shadow: var(--shadow-md);928}929 930.new-button:focus-visible {931 outline: var(--focus-outline);932 outline-offset: var(--space-2);933}934 935.new-button .material-icons {936 font-size: 20px;937}938 939.new-dropdown {940 position: absolute;941 top: 120px;942 left: var(--space-24);943 background: var(--color-surface);944 border-radius: var(--radius-base);945 box-shadow: var(--shadow-lg);946 padding: var(--space-8) 0;947 min-width: 240px;948 display: none;949 z-index: 1000;950 border: 1px solid var(--color-border);951}952 953.new-dropdown.show {954 display: block;955}956 957.dropdown-item {958 padding: var(--space-12) var(--space-24);959 display: flex;960 align-items: center;961 gap: var(--space-16);962 cursor: pointer;963 transition: background var(--duration-fast) var(--ease-standard);964 font-size: var(--font-size-base);965 color: var(--color-text);966}967 968.dropdown-item:hover {969 background: var(--color-secondary);970}971 972.dropdown-item .material-icons {973 font-size: 18px;974 color: var(--color-text-secondary);975}976 977.dropdown-divider {978 height: 1px;979 background: var(--color-border);980 margin: var(--space-8) 0;981}982 983.sidebar-menu {984 list-style: none;985 padding: 0;986 margin: 0;987}988 989.sidebar-item {990 padding: var(--space-12) var(--space-24);991 display: flex;992 align-items: center;993 gap: var(--space-16);994 cursor: pointer;995 transition: background var(--duration-fast) var(--ease-standard);996 color: var(--color-text-secondary);997 font-size: var(--font-size-base);998 border-radius: 0;999}1000 1001.sidebar-item:hover {1002 background: var(--color-secondary);1003}1004 1005.sidebar-item.active {1006 background: rgba(var(--color-teal-500-rgb), 0.1);1007 color: var(--color-primary);1008}1009 1010.sidebar-item .material-icons {1011 font-size: 20px;1012}1013 1014.storage-info {1015 position: absolute;1016 bottom: 0;1017 left: 0;1018 right: 0;1019 padding: var(--space-20) var(--space-24);1020 border-top: 1px solid var(--color-border);1021 background: var(--color-surface);1022}1023 1024.storage-text {1025 font-size: var(--font-size-xs);1026 color: var(--color-text-secondary);1027 margin-bottom: var(--space-8);1028}1029 1030.storage-bar {1031 width: 100%;1032 height: var(--space-4);1033 background: var(--color-border);1034 border-radius: var(--space-2);1035 overflow: hidden;1036 margin-bottom: var(--space-8);1037}1038 1039.storage-used {1040 height: 100%;1041 background: var(--color-primary);1042 transition: width 0.3s var(--ease-standard);1043}1044 1045/* ============ MAIN CONTENT ============ */1046.main-content {1047 margin-left: 256px;1048 padding: var(--space-24) var(--space-32);1049 min-height: calc(100vh - 64px);1050 background-color: var(--color-background);1051}1052 1053.breadcrumbs {1054 display: flex;1055 align-items: center;1056 margin-bottom: var(--space-24);1057 font-size: var(--font-size-sm);1058 color: var(--color-text-secondary);1059}1060 1061.breadcrumb-item {1062 display: flex;1063 align-items: center;1064 gap: var(--space-4);1065 cursor: pointer;1066 padding: var(--space-4) var(--space-8);1067 border-radius: var(--radius-sm);1068 transition: background var(--duration-fast) var(--ease-standard);1069}1070 1071.breadcrumb-item:hover {1072 background: var(--color-secondary);1073}1074 1075.breadcrumb-arrow {1076 font-size: var(--space-16);1077 color: var(--color-text-secondary);1078 margin: 0 var(--space-4);1079}1080 1081/* ============ TOOLBAR ============ */1082.toolbar {1083 display: flex;1084 justify-content: space-between;1085 align-items: center;1086 margin-bottom: var(--space-24);1087 padding: var(--space-12) 0;1088}1089 1090.toolbar-left,1091.toolbar-right {1092 display: flex;1093 gap: var(--space-8);1094 align-items: center;1095}1096 1097.toolbar-button {1098 padding: var(--space-8) var(--space-16);1099 border: 1px solid var(--color-border);1100 background: var(--color-surface);1101 border-radius: var(--radius-sm);1102 display: flex;1103 align-items: center;1104 gap: var(--space-8);1105 cursor: pointer;1106 transition: all var(--duration-fast) var(--ease-standard);1107 font-size: var(--font-size-sm);1108 color: var(--color-text-secondary);1109 font-weight: var(--font-weight-medium);1110 font-family: var(--font-family-base);1111}1112 1113.toolbar-button:hover {1114 background: var(--color-secondary);1115 border-color: var(--color-border);1116}1117 1118.toolbar-button.active {1119 background: rgba(var(--color-teal-500-rgb), 0.1);1120 color: var(--color-primary);1121 border-color: var(--color-primary);1122}1123 1124.toolbar-button:focus-visible {1125 outline: var(--focus-outline);1126 outline-offset: var(--space-2);1127}1128 1129.toolbar-button .material-icons {1130 font-size: 18px;1131}1132 1133#selectedCount {1134 color: var(--color-text-secondary);1135 font-size: var(--font-size-sm);1136}1137 1138/* ============ FILE GRID ============ */1139.file-grid {1140 display: grid;1141 grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));1142 gap: var(--space-16);1143 padding: var(--space-12) 0;1144}1145 1146.file-grid.list-view {1147 display: block !important;1148 padding: 0 !important;1149}1150 1151.file-grid.list-view .file-item {1152 display: flex !important;1153 flex-direction: row !important;1154 align-items: center !important;1155 padding: var(--space-8) var(--space-16) !important;1156 border: none !important;1157 border-bottom: 1px solid var(--color-border) !important;1158 border-radius: 0 !important;1159 height: auto !important;1160 min-height: 48px !important;1161}1162 1163.file-item {1164 border: 1px solid var(--color-card-border);1165 border-radius: var(--radius-base);1166 padding: var(--space-16);1167 cursor: pointer;1168 transition: all var(--duration-fast) var(--ease-standard);1169 background: var(--color-surface);1170 position: relative;1171 overflow: hidden;1172}1173 1174.file-item:hover {1175 border-color: var(--color-primary);1176 box-shadow: 0 2px 8px rgba(var(--color-teal-500-rgb), 0.2);1177}1178 1179.file-item.selected {1180 background: rgba(var(--color-teal-500-rgb), 0.1);1181 border-color: var(--color-primary);1182}1183 1184.file-preview {1185 width: 100%;1186 aspect-ratio: 1;1187 display: flex;1188 align-items: center;1189 justify-content: center;1190 background: var(--color-secondary);1191 border-radius: var(--radius-sm);1192 margin-bottom: var(--space-12);1193 position: relative;1194 overflow: hidden;1195}1196 1197.file-grid.list-view .file-preview {1198 width: 32px !important;1199 height: 32px !important;1200 aspect-ratio: auto !important;