Spaces:
Running
Running
| @import "tailwindcss"; | |
| @custom-variant dark (&:where(.dark, .dark *)); | |
| @theme { | |
| --font-sans: "IBM Plex Sans Arabic", system-ui, sans-serif; | |
| --font-display: "Readex Pro", "IBM Plex Sans Arabic", system-ui, sans-serif; | |
| --color-paper: #f3f6f5; | |
| --color-surface: #ffffff; | |
| --color-sunken: #e8eeec; | |
| --color-line: #d5dfdc; | |
| --color-ink: #102a2c; | |
| --color-muted: #557173; | |
| --color-nile: #0e7c66; | |
| --color-nile-deep: #0a5c4c; | |
| --color-nile-soft: #dcefe9; | |
| --color-amber: #f2a93b; | |
| --color-amber-soft: #fcefd9; | |
| --color-danger: #c8463d; | |
| --color-danger-soft: #f8e3e1; | |
| } | |
| /* dark theme: same token names, different values */ | |
| .dark { | |
| --color-paper: #0b1a1b; | |
| --color-surface: #11292a; | |
| --color-sunken: #0e2223; | |
| --color-line: #21403f; | |
| --color-ink: #e4efec; | |
| --color-muted: #8fb0ad; | |
| --color-nile: #2fb393; | |
| --color-nile-deep: #5fd0b2; | |
| --color-nile-soft: #133a33; | |
| --color-amber: #f5b553; | |
| --color-amber-soft: #3a2c12; | |
| --color-danger: #ef6b61; | |
| --color-danger-soft: #3b1c1a; | |
| } | |
| html { background: var(--color-paper); color: var(--color-ink); } | |
| body { font-family: var(--font-sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } | |
| h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.2; letter-spacing: -0.01em; } | |
| [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 { letter-spacing: 0; line-height: 1.35; } | |
| :focus-visible { outline: 2px solid var(--color-nile); outline-offset: 2px; border-radius: 6px; } | |
| .ltr { direction: ltr; unicode-bidi: isolate; } | |
| .tabular { font-variant-numeric: tabular-nums; } | |
| @keyframes wave { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } } | |
| .wave-bar { transform-origin: center; animation: wave 1.1s ease-in-out infinite; } | |
| @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } | |
| .rise { animation: rise 0.5s ease-out both; } | |
| @keyframes pulse-dot { 50% { opacity: 0.35; } } | |
| .pulse-dot { animation: pulse-dot 1s ease-in-out infinite; } | |
| @media (prefers-reduced-motion: reduce) { | |
| .wave-bar, .rise, .pulse-dot { animation: none ; } | |
| } | |