/* ═══════════════════════════════════════════════════════════════ base.css — HL / سيولة · Foundation Reset · Typography (كل النصوص font-weight: 900) · Spacing · Radius · Motion · A11y · Scrollbars لا قيم ألوان هنا — كل الألوان في themes.css ═══════════════════════════════════════════════════════════════ */ @layer base, themes, components; @layer base { /* ════════════════════════════════════ CORE TOKENS — theme-agnostic ════════════════════════════════════ */ :root { /* Typography */ --font-ui: 'Cairo', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, monospace; --fs-2xs: 9px; --fs-xs: 10px; --fs-sm: 11px; --fs-base: 12px; --fs-md: 14px; --fs-lg: 15px; --fs-xl: 16px; --fs-2xl: 18px; --fs-3xl: 20px; --fs-4xl: 22px; --fs-5xl: 26px; --fs-6xl: 28px; --lh-tight: 1.2; --lh-base: 1.45; --lh-loose: 1.75; /* ✅ كل الأوزان = 900 (نص عريض 100% كامل) */ --fw-regular: 900; --fw-medium: 900; --fw-semibold: 900; --fw-bold: 900; --fw-black: 900; /* Spacing — 4px system */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; /* Radius scale — من hl.css */ --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 20px; --r-xl: 24px; --r-pill: 999px; /* Motion */ --ease-standard: cubic-bezier(.4,0,.2,1); --ease-out: cubic-bezier(.22,1,.36,1); --ease-in: cubic-bezier(.64,0,.78,0); --ease-bounce: cubic-bezier(.34,1.56,.64,1); --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 280ms; --dur-theme: 200ms; /* Z-index — طبقات هندسية 100% (من hl2.css) */ --z-screen: 1; --z-chart: 50; --z-opts: 200; --z-modal: 300; --z-toast: 350; --z-loader: 400; } /* ════════════════════════════════════ THEME-SWITCH SMOOTHING يُطبَّق على خلال ~200ms عند تبديل data-theme عبر الزر الخارجي. ════════════════════════════════════ */ html.theme-transitioning, html.theme-transitioning *, html.theme-transitioning *::before, html.theme-transitioning *::after { transition: background-color var(--dur-theme) var(--ease-standard), color var(--dur-theme) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard) !important; } /* ════════════════════════════════════ RESET ════════════════════════════════════ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; } /* البيانات المالية تبقى قابلة للتحديد */ .pos-data-value, .price-value, .positions-pnl, .hist-val, .hist-pnl, .balance-value, .confirm-val, .tab-price, .nav-address, .pos-pnl, .pos-size, .price-bid-ask, .price-delta, .wp-val, .tb-mono, .cal-stat-v, .cal-dv, .cal-tv, .cal-tp { user-select: text; -webkit-user-select: text; } html, body { height: 100%; background: var(--bg-app); color: var(--text-primary); font-family: var(--font-ui); overflow: hidden; font-size: var(--fs-md); line-height: var(--lh-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-weight: 900; } /* ✅ إجبار كل عنصر نصي على 900 */ body, p, span, div, a, label, strong, em, b, i, small, h1, h2, h3, h4, h5, h6, button, input, select, textarea, li, td, th, figcaption { font-weight: 900 !important; } input, button, select, textarea { font-family: inherit; font-size: inherit; color: inherit; } button { cursor: pointer; border: none; background: none; font-weight: 900; transition: transform var(--dur-fast) var(--ease-standard), filter var(--dur-base) var(--ease-standard), opacity var(--dur-base) var(--ease-standard); } button:active { transform: scale(.96); } button:disabled { opacity: .45; pointer-events: none; } input { background: var(--bg-input); border: 2px solid var(--border-strong); border-radius: var(--r-sm); padding: 10px 14px; outline: none; transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); font-weight: 900; color: var(--text-primary); font-size: max(16px, 1em); /* منع zoom تلقائي على iOS */ } input:focus { border-color: var(--ac); box-shadow: 0 0 0 3px var(--ac-dim); } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; } input[type="number"] { -moz-appearance: textfield; } :focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; border-radius: var(--r-xs); } button:focus-visible { outline-offset: 3px; } /* ════════════════════════════════════ SCROLLBARS — thin, theme-aware ════════════════════════════════════ */ * { scrollbar-width: thin; scrollbar-color: var(--sb-thumb) transparent; } *::-webkit-scrollbar { width: 6px; height: 6px; } *::-webkit-scrollbar-track { background: transparent; border-radius: 2px; transition: background var(--dur-fast) var(--ease-standard); } *::-webkit-scrollbar-track:hover { background: var(--sb-track-hover); } *::-webkit-scrollbar-thumb { background: var(--sb-thumb); border-radius: var(--r-pill); transition: background var(--dur-fast) var(--ease-standard); } *::-webkit-scrollbar-thumb:hover { background: var(--sb-thumb-hover); } *::-webkit-scrollbar-thumb:active { background: var(--ac); } /* ════════════════════════════════════ UTILITIES ════════════════════════════════════ */ .hidden { display: none !important; } /* ════════════════════════════════════ A11Y — motion ════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } } /* @layer base */