| |
|
|
| *, |
| *::before, |
| *::after { |
| box-sizing: border-box; |
| } |
|
|
| html { |
| font-family: var(--font-family-primary); |
| } |
|
|
| body { |
| font-family: var(--font-family-primary); |
| font-size: var(--font-size-body); |
| font-weight: var(--font-weight-regular); |
| line-height: var(--line-height-body); |
| background-color: var(--color-bg); |
| color: var(--color-text-primary); |
| margin: 0; |
| -webkit-font-smoothing: antialiased; |
| -moz-osx-font-smoothing: grayscale; |
| text-rendering: optimizeLegibility; |
| } |
|
|
| |
| .text-display { |
| font-size: var(--font-size-display); |
| font-weight: var(--font-weight-bold); |
| line-height: 1.3; |
| } |
|
|
| .text-h1 { |
| font-size: var(--font-size-h1); |
| font-weight: var(--font-weight-bold); |
| line-height: 1.35; |
| } |
|
|
| .text-h2 { |
| font-size: var(--font-size-h2); |
| font-weight: var(--font-weight-semibold); |
| line-height: 1.4; |
| } |
|
|
| .text-h3 { |
| font-size: var(--font-size-h3); |
| font-weight: var(--font-weight-semibold); |
| line-height: 1.5; |
| } |
|
|
| .text-body { |
| font-size: var(--font-size-body); |
| font-weight: var(--font-weight-regular); |
| line-height: var(--line-height-body); |
| } |
|
|
| .text-caption { |
| font-size: var(--font-size-caption); |
| font-weight: var(--font-weight-medium); |
| line-height: 1.6; |
| } |
|
|
| .text-label { |
| font-size: var(--font-size-label); |
| font-weight: var(--font-weight-semibold); |
| line-height: 1.5; |
| letter-spacing: 0.04em; |
| } |
|
|
| |
| .text-primary { color: var(--color-text-primary); } |
| .text-secondary { color: var(--color-text-secondary); } |
| .text-muted { color: var(--color-text-muted); } |
| .text-brand { color: var(--color-primary); } |
| .text-success { color: var(--color-success); } |
| .text-warning { color: var(--color-warning); } |
| .text-error { color: var(--color-error); } |
| .text-secondary-brand { color: var(--color-secondary); } |
|
|
| |
| .page-bg { background-color: var(--color-bg); } |
| .surface-bg { background-color: var(--color-surface); } |
|
|
| .sr-only { |
| position: absolute; |
| width: 1px; |
| height: 1px; |
| padding: 0; |
| margin: -1px; |
| overflow: hidden; |
| clip: rect(0, 0, 0, 0); |
| white-space: nowrap; |
| border: 0; |
| } |
|
|
| .page { display: none; } |
| .page.active { display: block; } |
|
|
| .gradient-bg { |
| background: linear-gradient( |
| 165deg, |
| var(--color-bg) 0%, |
| var(--color-surface) 50%, |
| var(--color-bg) 100% |
| ); |
| } |
|
|
| .gradient-accent { |
| background: linear-gradient( |
| 135deg, |
| var(--color-primary) 0%, |
| var(--color-secondary) 100% |
| ); |
| } |
|
|
| .text-gradient { |
| background: linear-gradient( |
| 135deg, |
| var(--color-primary) 0%, |
| var(--color-secondary) 100% |
| ); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| } |
|
|
| .editor-content { |
| font-size: var(--font-size-editor); |
| line-height: var(--line-height-editor); |
| letter-spacing: var(--letter-spacing-arabic); |
| } |
|
|
| |
| button:focus-visible, |
| a:focus-visible, |
| [contenteditable]:focus-visible, |
| .suggestion-card:focus-visible, |
| input:focus-visible { |
| outline: 2px solid var(--color-accent); |
| outline-offset: 2px; |
| } |
|
|
| |
| input[type="checkbox"], |
| input[type="range"] { |
| accent-color: var(--color-primary); |
| } |
|
|
| |
| @media (prefers-reduced-motion: reduce) { |
| *, |
| *::before, |
| *::after { |
| animation-duration: 0.01ms !important; |
| animation-iteration-count: 1 !important; |
| transition-duration: 0.01ms !important; |
| } |
|
|
| .card-hover:hover { |
| transform: none; |
| } |
| } |
|
|
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(12px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
|
|
| @keyframes float { |
| 0%, 100% { transform: translateY(0); } |
| 50% { transform: translateY(-12px); } |
| } |
|
|
| @keyframes spin { |
| to { transform: rotate(360deg); } |
| } |
|
|
| @keyframes pulse-subtle { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0.55; } |
| } |
|
|
| .animate-fade-in { animation: fadeIn 0.5s ease-out; } |
| .animate-float { animation: float 6s ease-in-out infinite; } |
|
|
