/* ========================================================================== BALOCH SM — GLOBAL DESIGN TOKENS ========================================================================== FILE: /public_html/assets/css/tokens.css DOMAIN: https://investt.online PROJECT: Baloch SM Trading Intelligence Platform VERSION: 1.0.0 ========================================================================== INTEGRATION CONTRACT This file provides shared variables for: reset.css layout.css components.css auth.css dashboard.css admin.css notifications.css signal-receipt.css responsive.css accessibility.css themes/baloch-dark.css themes/baloch-light.css themes/market-colors.css motion/reduced-motion.css ========================================================================== DESIGN PRINCIPLES 01. Dark-first premium financial interface. 02. Compatible with dedicated light-theme overrides. 03. No external font or asset requests. 04. System fonts for fast loading and privacy. 05. Consistent button and touch-target dimensions. 06. Readable financial numbers. 07. Separate BUY and SELL semantic colors. 08. Clear stale/unavailable feed indicators. 09. Responsive dashboard layout variables. 10. Accessible focus and status styling. 11. Centralized elevation and depth effects. 12. Shared animation timing and easing. 13. Support for mobile safe-area insets. 14. Compatible administrator and member interfaces. 15. Design values never represent actual market data. IMPORTANT: The values below are visual design settings only. They do NOT: - Generate trading signals - Calculate trading probabilities - Determine subscription access - Verify market feeds - Replace server-side authorization - Provide real-time market information ========================================================================== */ /* ========================================================================== 01. ROOT DESIGN SYSTEM ========================================================================== */ :root { /* ============================================================== 01.1. NATIVE COLOR PREFERENCE ============================================================== */ color-scheme: dark; /* ============================================================== 01.2. FONT FAMILIES ============================================================== */ --bsm-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --bsm-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Monaco, monospace; --bsm-font-display: var(--bsm-font-sans); --bsm-font-financial: var(--bsm-font-mono); /* ============================================================== 01.3. FONT WEIGHTS ============================================================== */ --bsm-weight-light: 300; --bsm-weight-regular: 400; --bsm-weight-medium: 500; --bsm-weight-semibold: 600; --bsm-weight-bold: 700; --bsm-weight-extrabold: 800; /* ============================================================== 01.4. FONT SIZE SCALE ============================================================== */ --bsm-text-2xs: 0.6875rem; --bsm-text-xs: 0.75rem; --bsm-text-sm: 0.8125rem; --bsm-text-base-sm: 0.875rem; --bsm-text-base: 1rem; --bsm-text-lg: 1.125rem; --bsm-text-xl: 1.25rem; --bsm-text-2xl: 1.5rem; --bsm-text-3xl: 1.875rem; --bsm-text-4xl: 2.25rem; --bsm-text-5xl: 3rem; /* ============================================================== 01.5. FLUID DISPLAY SIZES ============================================================== */ --bsm-heading-hero: clamp(2.25rem, 4.5vw, 4.25rem); --bsm-heading-page: clamp(1.75rem, 3vw, 2.75rem); --bsm-heading-section: clamp(1.375rem, 2vw, 1.875rem); --bsm-heading-card: clamp(1rem, 1.5vw, 1.25rem); /* ============================================================== 01.6. LINE HEIGHTS ============================================================== */ --bsm-leading-none: 1; --bsm-leading-tight: 1.2; --bsm-leading-heading: 1.3; --bsm-leading-normal: 1.5; --bsm-leading-relaxed: 1.65; --bsm-leading-loose: 1.8; /* ============================================================== 01.7. LETTER SPACING ============================================================== */ --bsm-tracking-tight: -0.035em; --bsm-tracking-normal: 0; --bsm-tracking-wide: 0.025em; --bsm-tracking-wider: 0.06em; --bsm-tracking-label: 0.1em; /* ============================================================== 02. RAW BRAND COLORS ============================================================== */ --bsm-navy-950: #06111e; --bsm-navy-900: #071320; --bsm-navy-850: #0a1a2a; --bsm-navy-800: #0d2234; --bsm-navy-750: #122b40; --bsm-navy-700: #18374e; --bsm-navy-600: #234b64; --bsm-cyan-100: #e5fbff; --bsm-cyan-200: #b9ecf7; --bsm-cyan-300: #8ce0ef; --bsm-cyan-400: #54cbe8; --bsm-cyan-500: #30b5d8; --bsm-cyan-600: #1587b1; --bsm-green-300: #68f0be; --bsm-green-400: #35e3a8; --bsm-green-500: #22c58a; --bsm-green-600: #118b63; --bsm-red-300: #ff9aac; --bsm-red-400: #ff657e; --bsm-red-500: #eb435f; --bsm-red-600: #b92542; --bsm-amber-300: #ffdc88; --bsm-amber-400: #f6bd60; --bsm-amber-500: #df9b36; --bsm-blue-400: #69aefa; --bsm-violet-400: #b59cff; /* ============================================================== 03. APPLICATION BACKGROUNDS ============================================================== */ --bsm-bg-page: #071320; --bsm-bg-app: #071320; --bsm-bg-surface: #0d2031; --bsm-bg-surface-alt: #102639; --bsm-bg-surface-raised: #152e43; --bsm-bg-surface-inset: #091a29; --bsm-bg-hover: #19364c; --bsm-bg-active: #20465c; --bsm-bg-sidebar: #091b2b; --bsm-bg-header: #0b1d2e; --bsm-bg-input: #0a1c2c; --bsm-bg-card: #102638; --bsm-bg-modal: #10283b; --bsm-bg-tooltip: #1c364a; --bsm-bg-skeleton: #233c4e; /* ============================================================== 04. TEXT COLORS ============================================================== */ --bsm-text-primary: #f1f8fc; --bsm-text-secondary: #c2d4e0; --bsm-text-muted: #a1b6c7; --bsm-text-subtle: #89a4b6; --bsm-text-disabled: #8194a2; --bsm-text-placeholder: #90a8ba; --bsm-text-on-brand: #052331; --bsm-text-on-dark: #ffffff; --bsm-text-code: #b7e4f2; --bsm-text-link: #8ce0ef; --bsm-text-link-hover: #c5f3fc; /* ============================================================== 05. BORDER COLORS ============================================================== */ --bsm-border-subtle: rgba(168, 200, 219, 0.12); --bsm-border-default: rgba(168, 200, 219, 0.22); --bsm-border-strong: rgba(168, 200, 219, 0.4); --bsm-border-interactive: rgba(84, 203, 232, 0.58); --bsm-border-focus: #8ce0ef; --bsm-border-error: #ff657e; --bsm-border-success: #35e3a8; --bsm-border-warning: #f6bd60; --bsm-border-width: 1px; --bsm-border-width-strong: 2px; /* ============================================================== 06. PRIMARY BRAND COLORS ============================================================== */ --bsm-color-primary: #54cbe8; --bsm-color-primary-hover: #80dcf0; --bsm-color-primary-pressed: #30b5d8; --bsm-color-primary-soft: rgba(84, 203, 232, 0.12); --bsm-color-primary-border: rgba(84, 203, 232, 0.38); --bsm-color-accent: #35e3a8; --bsm-color-accent-hover: #68f0be; --bsm-color-accent-soft: rgba(53, 227, 168, 0.12); /* ============================================================== 07. SYSTEM STATUS COLORS ============================================================== */ --bsm-color-success: #35e3a8; --bsm-color-success-soft: rgba(53, 227, 168, 0.12); --bsm-color-success-border: rgba(53, 227, 168, 0.38); --bsm-color-danger: #ff657e; --bsm-color-danger-soft: rgba(255, 101, 126, 0.12); --bsm-color-danger-border: rgba(255, 101, 126, 0.4); --bsm-color-warning: #f6bd60; --bsm-color-warning-soft: rgba(246, 189, 96, 0.12); --bsm-color-warning-border: rgba(246, 189, 96, 0.4); --bsm-color-info: #69aefa; --bsm-color-info-soft: rgba(105, 174, 250, 0.12); --bsm-color-info-border: rgba(105, 174, 250, 0.36); --bsm-color-neutral: #a1b6c7; --bsm-color-neutral-soft: rgba(161, 182, 199, 0.1); /* ============================================================== 08. FOREX TRADING SIGNAL COLORS ============================================================== These are semantic display values. A signal's BUY/SELL direction must always come from the verified backend record, never from a CSS class alone. Colors must be accompanied by readable BUY/SELL labels. ============================================================== */ --bsm-signal-buy: #35e3a8; --bsm-signal-buy-strong: #22c58a; --bsm-signal-buy-text: #a8fbd7; --bsm-signal-buy-bg: rgba(53, 227, 168, 0.13); --bsm-signal-buy-border: rgba(53, 227, 168, 0.48); --bsm-signal-buy-glow: rgba(53, 227, 168, 0.24); --bsm-signal-sell: #ff657e; --bsm-signal-sell-strong: #eb435f; --bsm-signal-sell-text: #ffb3c0; --bsm-signal-sell-bg: rgba(255, 101, 126, 0.13); --bsm-signal-sell-border: rgba(255, 101, 126, 0.48); --bsm-signal-sell-glow: rgba(255, 101, 126, 0.24); --bsm-signal-neutral: #a1b6c7; --bsm-signal-pending: #f6bd60; --bsm-signal-confirmed: #54cbe8; --bsm-signal-expired: #9daebb; --bsm-signal-invalidated: #ff657e; /* ============================================================== 09. SIGNAL POPUP INTEGRATION ============================================================== User requirement: All eligible, confirmed signals from ANY pair in the selected market may display as full signal notifications. Other markets display market-level clues only. Full popups remain visible for 30 seconds under frontend notification-timer control. The actual timing and ownership verification belong to the application logic, not CSS. ============================================================== */ --bsm-signal-popup-duration: 30s; --bsm-signal-popup-duration-ms: 30000; --bsm-signal-popup-max-width: 420px; --bsm-signal-popup-min-height: 110px; --bsm-signal-popup-gap: 12px; --bsm-signal-popup-radius: 18px; --bsm-signal-popup-offset: 20px; --bsm-signal-popup-border-width: 2px; --bsm-signal-popup-progress-height: 4px; --bsm-signal-popup-buy-glow: 0 0 28px rgba(53, 227, 168, 0.22); --bsm-signal-popup-sell-glow: 0 0 28px rgba(255, 101, 126, 0.22); /* ============================================================== 10. MARKET TAB CLUES ============================================================== Other-market clues do NOT reveal pair-level information before the user switches markets. ============================================================== */ --bsm-clue-buy: var(--bsm-signal-buy); --bsm-clue-sell: var(--bsm-signal-sell); --bsm-clue-dot-size: 8px; --bsm-clue-ring-size: 16px; --bsm-clue-ring-opacity: 0.3; --bsm-market-tab-active: rgba(84, 203, 232, 0.13); --bsm-market-tab-border: rgba(84, 203, 232, 0.4); /* ============================================================== 11. FINANCIAL CHART COLORS ============================================================== Chart colors do not generate candle data. Candles must originate from verified feed services. A missing or stale feed must never be drawn as live. ============================================================== */ --bsm-chart-background: #091827; --bsm-chart-surface: #0b2031; --bsm-chart-grid: rgba(161, 182, 199, 0.1); --bsm-chart-axis: rgba(161, 182, 199, 0.24); --bsm-chart-axis-text: #a4bacb; --bsm-chart-crosshair: rgba(198, 231, 241, 0.65); --bsm-chart-crosshair-label: #c2e8f5; --bsm-chart-bull: #35e3a8; --bsm-chart-bear: #ff657e; --bsm-chart-bull-wick: #35e3a8; --bsm-chart-bear-wick: #ff657e; --bsm-chart-volume-bull: rgba(53, 227, 168, 0.36); --bsm-chart-volume-bear: rgba(255, 101, 126, 0.36); --bsm-chart-price-line: #8ce0ef; --bsm-chart-entry-line: #f6bd60; --bsm-chart-stop-line: #ff657e; --bsm-chart-target-line: #35e3a8; --bsm-chart-watermark: rgba(194, 212, 224, 0.12); --bsm-chart-selection: rgba(84, 203, 232, 0.14); --bsm-chart-stale-overlay: rgba(7, 19, 32, 0.78); /* ============================================================== 12. TECHNICAL INDICATOR PALETTE ============================================================== Distinguishable colors for RSI, MACD, EMA, SMA, Bollinger Bands, ATR, VWAP and other overlays. Actual calculations remain in private/authorized engines. ============================================================== */ --bsm-indicator-1: #69aefa; --bsm-indicator-2: #f6bd60; --bsm-indicator-3: #b59cff; --bsm-indicator-4: #35e3a8; --bsm-indicator-5: #ff657e; --bsm-indicator-6: #54cbe8; --bsm-indicator-7: #f0a6d5; --bsm-indicator-8: #c5da77; --bsm-indicator-rsi: var(--bsm-indicator-3); --bsm-indicator-macd: var(--bsm-indicator-1); --bsm-indicator-ema: var(--bsm-indicator-2); --bsm-indicator-sma: var(--bsm-indicator-6); --bsm-indicator-vwap: var(--bsm-indicator-4); --bsm-indicator-atr: var(--bsm-indicator-7); --bsm-indicator-band: var(--bsm-indicator-3); /* ============================================================== 13. ECONOMIC CALENDAR AND CPI COLORS ============================================================== These values style source-verified economic events and countdown clocks only. ============================================================== */ --bsm-news-impact-low: #69aefa; --bsm-news-impact-medium: #f6bd60; --bsm-news-impact-high: #ff657e; --bsm-news-upcoming: #8ce0ef; --bsm-news-released: #35e3a8; --bsm-news-delayed: #f6bd60; --bsm-news-unverified: #a1b6c7; --bsm-news-countdown-text: #f1f8fc; --bsm-news-countdown-bg: #102638; --bsm-news-countdown-border: rgba(84, 203, 232, 0.28); /* ============================================================== 14. PROVIDER / DATA HEALTH COLORS ============================================================== */ --bsm-feed-healthy: #35e3a8; --bsm-feed-degraded: #f6bd60; --bsm-feed-disconnected: #ff657e; --bsm-feed-unverified: #a1b6c7; --bsm-feed-stale: #f6bd60; --bsm-feed-disabled: #8194a2; --bsm-provider-verified: #35e3a8; --bsm-provider-pending: #f6bd60; --bsm-provider-rejected: #ff657e; /* ============================================================== 15. SUBSCRIPTION AND PAYMENT STATUS COLORS ============================================================== */ --bsm-access-approved: #35e3a8; --bsm-access-pending: #f6bd60; --bsm-access-expired: #ff657e; --bsm-access-suspended: #ff657e; --bsm-payment-verified: #35e3a8; --bsm-payment-review: #f6bd60; --bsm-payment-rejected: #ff657e; /* ============================================================== 16. SPACING SCALE ============================================================== Shared by all application layouts and components. The scale uses rem units, respecting the document's default root font size. ============================================================== */ --bsm-space-0: 0; --bsm-space-px: 1px; --bsm-space-0-5: 0.125rem; --bsm-space-1: 0.25rem; --bsm-space-1-5: 0.375rem; --bsm-space-2: 0.5rem; --bsm-space-2-5: 0.625rem; --bsm-space-3: 0.75rem; --bsm-space-3-5: 0.875rem; --bsm-space-4: 1rem; --bsm-space-5: 1.25rem; --bsm-space-6: 1.5rem; --bsm-space-7: 1.75rem; --bsm-space-8: 2rem; --bsm-space-9: 2.25rem; --bsm-space-10: 2.5rem; --bsm-space-12: 3rem; --bsm-space-14: 3.5rem; --bsm-space-16: 4rem; --bsm-space-20: 5rem; --bsm-space-24: 6rem; --bsm-space-28: 7rem; --bsm-space-32: 8rem; /* ============================================================== 17. BORDER RADIUS SCALE ============================================================== */ --bsm-radius-none: 0; --bsm-radius-xs: 4px; --bsm-radius-sm: 7px; --bsm-radius-md: 10px; --bsm-radius-lg: 14px; --bsm-radius-xl: 18px; --bsm-radius-2xl: 24px; --bsm-radius-3xl: 32px; --bsm-radius-pill: 999px; --bsm-radius-circle: 50%; --bsm-radius-card: var(--bsm-radius-xl); --bsm-radius-input: var(--bsm-radius-md); --bsm-radius-button: var(--bsm-radius-md); --bsm-radius-modal: var(--bsm-radius-2xl); /* ============================================================== 18. SHADOWS AND ELEVATION ============================================================== */ --bsm-shadow-xs: 0 2px 6px rgba(0, 0, 0, 0.12); --bsm-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.16); --bsm-shadow-md: 0 10px 28px rgba(0, 0, 0, 0.24); --bsm-shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.32); --bsm-shadow-xl: 0 28px 80px rgba(0, 0, 0, 0.4); --bsm-shadow-card: 0 10px 32px rgba(0, 0, 0, 0.2); --bsm-shadow-modal: 0 30px 90px rgba(0, 0, 0, 0.46); --bsm-shadow-focus: 0 0 0 3px rgba(84, 203, 232, 0.3); --bsm-shadow-primary-glow: 0 0 26px rgba(84, 203, 232, 0.18); --bsm-shadow-success-glow: 0 0 26px rgba(53, 227, 168, 0.18); --bsm-shadow-danger-glow: 0 0 26px rgba(255, 101, 126, 0.18); /* ============================================================== 19. GRADIENTS ============================================================== CSS-only visual effects. No large background images or external dependencies. ============================================================== */ --bsm-gradient-primary: linear-gradient( 135deg, #54cbe8 0%, #35b7dd 100% ); --bsm-gradient-success: linear-gradient( 135deg, #35e3a8 0%, #1fb985 100% ); --bsm-gradient-danger: linear-gradient( 135deg, #ff657e 0%, #d93757 100% ); --bsm-gradient-surface: linear-gradient( 145deg, var(--bsm-bg-surface-raised) 0%, var(--bsm-bg-surface) 100% ); --bsm-gradient-hero: radial-gradient( ellipse at 15% 20%, rgba(84, 203, 232, 0.13), transparent 54% ), radial-gradient( ellipse at 90% 85%, rgba(53, 227, 168, 0.07), transparent 55% ); --bsm-gradient-buy: linear-gradient( 120deg, rgba(53, 227, 168, 0.16), rgba(53, 227, 168, 0.04) ); --bsm-gradient-sell: linear-gradient( 120deg, rgba(255, 101, 126, 0.16), rgba(255, 101, 126, 0.04) ); /* ============================================================== 20. OVERLAYS AND GLASS SURFACES ============================================================== */ --bsm-overlay-soft: rgba(4, 12, 21, 0.42); --bsm-overlay-default: rgba(4, 12, 21, 0.7); --bsm-overlay-strong: rgba(4, 12, 21, 0.86); --bsm-glass-bg: rgba(12, 30, 45, 0.88); --bsm-glass-border: rgba(168, 200, 219, 0.18); --bsm-backdrop-blur: 16px; --bsm-backdrop-blur-strong: 24px; /* ============================================================== 21. LAYOUT DIMENSIONS ============================================================== */ --bsm-page-max-width: 1440px; --bsm-page-wide-max-width: 1720px; --bsm-content-max-width: 1200px; --bsm-auth-max-width: 1100px; --bsm-form-max-width: 520px; --bsm-reading-max-width: 760px; --bsm-header-height: 72px; --bsm-mobile-header-height: 64px; --bsm-sidebar-width: 270px; --bsm-sidebar-collapsed-width: 76px; --bsm-admin-sidebar-width: 280px; --bsm-mobile-nav-height: 68px; --bsm-page-gutter: 24px; --bsm-section-gap: 24px; --bsm-card-padding: 22px; --bsm-card-gap: 16px; /* ============================================================== 22. TRADING DASHBOARD DIMENSIONS ============================================================== */ --bsm-dashboard-sidebar-width: 270px; --bsm-chart-min-height: 360px; --bsm-chart-desktop-height: 520px; --bsm-chart-mobile-height: 340px; --bsm-chart-toolbar-height: 56px; --bsm-market-tab-min-height: 44px; --bsm-market-tab-gap: 8px; --bsm-timeframe-button-min-width: 46px; --bsm-price-label-min-width: 76px; --bsm-notification-panel-width: 410px; --bsm-notification-row-min-height: 64px; --bsm-receipt-modal-max-width: 620px; --bsm-economic-countdown-height: 90px; /* ============================================================== 23. FORM AND CONTROL DIMENSIONS ============================================================== */ --bsm-touch-target-min: 44px; --bsm-input-height: 46px; --bsm-input-height-lg: 52px; --bsm-input-padding-inline: 14px; --bsm-input-padding-block: 10px; --bsm-button-height-sm: 36px; --bsm-button-height: 44px; --bsm-button-height-lg: 52px; --bsm-button-padding-inline: 18px; --bsm-button-gap: 8px; --bsm-checkbox-size: 18px; --bsm-switch-width: 44px; --bsm-switch-height: 26px; --bsm-icon-xs: 14px; --bsm-icon-sm: 16px; --bsm-icon-md: 20px; --bsm-icon-lg: 24px; --bsm-icon-xl: 32px; /* ============================================================== 24. ADMINISTRATOR INTERFACE DIMENSIONS ============================================================== */ --bsm-admin-topbar-height: 72px; --bsm-admin-table-row-height: 48px; --bsm-admin-table-cell-padding: 12px; --bsm-admin-stat-min-height: 110px; --bsm-admin-form-max-width: 720px; --bsm-admin-table-min-width: 720px; /* ============================================================== 25. Z-INDEX LAYER SYSTEM ============================================================== A unified stacking system prevents conflicts between: - Sticky headers - Dropdowns - Market menus - Notification drawers - Signal popups - Receipt modals - Confirmation dialogs The browser's native dialog top layer is managed independently of z-index. ============================================================== */ --bsm-z-base: 0; --bsm-z-raised: 1; --bsm-z-sticky: 100; --bsm-z-header: 200; --bsm-z-sidebar: 250; --bsm-z-dropdown: 350; --bsm-z-tooltip: 450; --bsm-z-notification-panel: 550; --bsm-z-signal-popup: 650; --bsm-z-backdrop: 750; --bsm-z-modal: 800; --bsm-z-dialog: 850; --bsm-z-critical: 950; /* ============================================================== 26. MOTION DURATIONS ============================================================== These values control visual transitions only. They do not alter real-time economic event timestamps, signal expiration, or other server-verified time values. ============================================================== */ --bsm-motion-instant: 0ms; --bsm-motion-fast: 120ms; --bsm-motion-normal: 200ms; --bsm-motion-medium: 300ms; --bsm-motion-slow: 450ms; --bsm-motion-reveal: 600ms; --bsm-motion-ambient: 1800ms; --bsm-motion-pulse: 2400ms; /* ============================================================== 27. EASING CURVES ============================================================== */ --bsm-ease-linear: linear; --bsm-ease-in: cubic-bezier(0.4, 0, 1, 1); --bsm-ease-out: cubic-bezier(0, 0, 0.2, 1); --bsm-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --bsm-ease-smooth: cubic-bezier(0.22, 1, 0.36, 1); --bsm-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* ============================================================== 28. INTERACTIVE STATE OPACITIES ============================================================== */ --bsm-opacity-disabled: 0.55; --bsm-opacity-muted: 0.76; --bsm-opacity-hover: 0.9; --bsm-opacity-ghost: 0.16; --bsm-opacity-overlay: 0.7; /* ============================================================== 29. MOBILE SAFE AREA ============================================================== Supports Android/iOS installed PWA viewports and devices with display cutouts. ============================================================== */ --bsm-safe-top: env(safe-area-inset-top, 0px); --bsm-safe-right: env(safe-area-inset-right, 0px); --bsm-safe-bottom: env(safe-area-inset-bottom, 0px); --bsm-safe-left: env(safe-area-inset-left, 0px); /* ============================================================== 30. FOCUS RING ============================================================== Focus styles are applied in accessibility.css. Do not remove native focus indicators in this file. ============================================================== */ --bsm-focus-color: #8ce0ef; --bsm-focus-width: 3px; --bsm-focus-offset: 3px; --bsm-focus-shadow: 0 0 0 3px rgba(84, 203, 232, 0.3); /* ============================================================== 31. SKELETON / LOADING STATE ============================================================== Loading indicators must never be mistaken for verified live market prices. ============================================================== */ --bsm-skeleton-base: #1b3447; --bsm-skeleton-highlight: #29495e; --bsm-loading-indicator: #54cbe8; --bsm-loading-track: rgba(168, 200, 219, 0.14); /* ============================================================== 32. LEGACY / SHORT VARIABLE ALIASES ============================================================== These aliases help previously created styles and future components share the same token values. Aliases depend on the canonical --bsm-* variables. Themes override the canonical tokens, so these aliases automatically reflect the active theme. ============================================================== */ --bg: var(--bsm-bg-page); --bg-page: var(--bsm-bg-page); --bg-primary: var(--bsm-bg-page); --bg-secondary: var(--bsm-bg-surface); --bg-elevated: var(--bsm-bg-surface-raised); --surface: var(--bsm-bg-surface); --surface-2: var(--bsm-bg-surface-alt); --surface-elevated: var(--bsm-bg-surface-raised); --surface-hover: var(--bsm-bg-hover); --text: var(--bsm-text-primary); --text-primary: var(--bsm-text-primary); --text-secondary: var(--bsm-text-secondary); --text-muted: var(--bsm-text-muted); --text-subtle: var(--bsm-text-subtle); --muted: var(--bsm-text-muted); --border: var(--bsm-border-default); --border-color: var(--bsm-border-default); --border-strong: var(--bsm-border-strong); --primary: var(--bsm-color-primary); --primary-hover: var(--bsm-color-primary-hover); --accent: var(--bsm-color-accent); --success: var(--bsm-color-success); --danger: var(--bsm-color-danger); --warning: var(--bsm-color-warning); --info: var(--bsm-color-info); --buy: var(--bsm-signal-buy); --sell: var(--bsm-signal-sell); --color-bg: var(--bsm-bg-page); --color-surface: var(--bsm-bg-surface); --color-surface-elevated: var(--bsm-bg-surface-raised); --color-text: var(--bsm-text-primary); --color-text-muted: var(--bsm-text-muted); --color-border: var(--bsm-border-default); --color-primary: var(--bsm-color-primary); --color-accent: var(--bsm-color-accent); --color-success: var(--bsm-color-success); --color-danger: var(--bsm-color-danger); --color-warning: var(--bsm-color-warning); --color-info: var(--bsm-color-info); --color-buy: var(--bsm-signal-buy); --color-sell: var(--bsm-signal-sell); --font-sans: var(--bsm-font-sans); --font-mono: var(--bsm-font-mono); --radius-sm: var(--bsm-radius-sm); --radius-md: var(--bsm-radius-md); --radius-lg: var(--bsm-radius-lg); --radius-xl: var(--bsm-radius-xl); --radius-card: var(--bsm-radius-card); --radius-pill: var(--bsm-radius-pill); --shadow-sm: var(--bsm-shadow-sm); --shadow-md: var(--bsm-shadow-md); --shadow-lg: var(--bsm-shadow-lg); --shadow-xl: var(--bsm-shadow-xl); --space-1: var(--bsm-space-1); --space-2: var(--bsm-space-2); --space-3: var(--bsm-space-3); --space-4: var(--bsm-space-4); --space-5: var(--bsm-space-5); --space-6: var(--bsm-space-6); --space-8: var(--bsm-space-8); --space-10: var(--bsm-space-10); --space-12: var(--bsm-space-12); --container-width: var(--bsm-page-max-width); --header-height: var(--bsm-header-height); --sidebar-width: var(--bsm-sidebar-width); --transition-fast: var(--bsm-motion-fast); --transition-normal: var(--bsm-motion-normal); --transition-slow: var(--bsm-motion-slow); --z-header: var(--bsm-z-header); --z-dropdown: var(--bsm-z-dropdown); --z-modal: var(--bsm-z-modal); --z-notification: var(--bsm-z-signal-popup); } /* ========================================================================== 33. BASE PAGE TYPOGRAPHY AND COLORS ========================================================================== reset.css removes inconsistent browser defaults. This file now applies the shared application identity. Theme files loaded afterward may override semantic tokens and the native color-scheme property. ========================================================================== */ html { font-family: var(--bsm-font-sans); font-size: 100%; font-weight: var(--bsm-weight-regular); background-color: var(--bsm-bg-page); color: var(--bsm-text-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--bsm-font-sans); font-size: var(--bsm-text-base); font-weight: var(--bsm-weight-regular); line-height: var(--bsm-leading-normal); background-color: var(--bsm-bg-page); color: var(--bsm-text-primary); } /* ========================================================================== 34. SYSTEM TYPOGRAPHY INHERITANCE ========================================================================== */ button, input, textarea, select, optgroup { font-family: inherit; } /* ========================================================================== 35. DEFAULT SELECTION COLORS ========================================================================== */ ::selection { background-color: var(--bsm-color-primary-soft); color: var(--bsm-text-primary); } ::-moz-selection { background-color: var(--bsm-color-primary-soft); color: var(--bsm-text-primary); } /* ========================================================================== 36. FINANCIAL NUMBER RENDERING ========================================================================== Designed for: - Forex prices - Candle OHLC labels - Risk values - CPI countdowns - Subscription durations - Performance metrics Prefer tabular figures when supported by the active font. Never use CSS to round, truncate, or fabricate a price. ========================================================================== */ .price-value, .financial-number, .metric-value, .market-price, .countdown-value, [data-financial-value] { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; } /* ========================================================================== 37. MONOSPACE DATA VALUES ========================================================================== */ .code-value, .transaction-id, .signal-id, .audit-reference, [data-monospace] { font-family: var(--bsm-font-financial); font-variant-numeric: tabular-nums; } /* ========================================================================== 38. DEFAULT COLOR SCHEME FALLBACK ========================================================================== Default dark colors are already defined in :root. Explicitly selected light and alternate themes are handled by their dedicated theme files. We intentionally do not automatically replace an administrator/member-selected theme based on the operating system's prefers-color-scheme preference. ========================================================================== */ /* ========================================================================== 39. COMPACT TABLET LAYOUT TOKENS ========================================================================== */ @media (max-width: 1024px) { :root { --bsm-page-gutter: 20px; --bsm-sidebar-width: 244px; --bsm-admin-sidebar-width: 250px; --bsm-section-gap: 20px; --bsm-card-padding: 20px; --bsm-chart-desktop-height: 450px; } } /* ========================================================================== 40. MOBILE LAYOUT TOKENS ========================================================================== */ @media (max-width: 767px) { :root { --bsm-page-gutter: 16px; --bsm-section-gap: 16px; --bsm-card-padding: 16px; --bsm-card-gap: 12px; --bsm-header-height: 64px; --bsm-chart-min-height: 280px; --bsm-chart-desktop-height: 340px; --bsm-chart-mobile-height: 320px; --bsm-chart-toolbar-height: 50px; --bsm-market-tab-gap: 6px; --bsm-notification-panel-width: 100%; --bsm-signal-popup-max-width: 100%; --bsm-signal-popup-offset: 12px; --bsm-admin-topbar-height: 64px; --bsm-auth-max-width: 100%; } } /* ========================================================================== 41. SMALL MOBILE LAYOUT TOKENS ========================================================================== */ @media (max-width: 420px) { :root { --bsm-page-gutter: 12px; --bsm-section-gap: 12px; --bsm-card-padding: 14px; --bsm-chart-min-height: 250px; --bsm-chart-mobile-height: 290px; --bsm-heading-page: clamp(1.5rem, 7vw, 2rem); --bsm-heading-hero: clamp(1.875rem, 8vw, 2.75rem); --bsm-signal-popup-offset: 10px; --bsm-signal-popup-gap: 10px; } } /* ========================================================================== 42. REDUCED MOTION TOKEN OVERRIDES ========================================================================== This is the baseline reduced-motion integration. The dedicated motion/reduced-motion.css file will enforce additional restrictions for component animations, chart interactions and visual effects. Functional market timers must continue to represent actual verified time even when animation is disabled. ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --bsm-motion-fast: 0ms; --bsm-motion-normal: 0ms; --bsm-motion-medium: 0ms; --bsm-motion-slow: 0ms; --bsm-motion-reveal: 0ms; --bsm-motion-ambient: 0ms; --bsm-motion-pulse: 0ms; --bsm-ease-bounce: linear; } } /* ========================================================================== 43. HIGH-CONTRAST SYSTEM PREFERENCE ========================================================================== These tokens improve visible borders and focus distinction. More detailed high-contrast rules will be defined in accessibility.css. ========================================================================== */ @media (prefers-contrast: more) { :root { --bsm-border-default: rgba(211, 237, 249, 0.55); --bsm-border-strong: rgba(230, 247, 255, 0.85); --bsm-border-focus: #d4f8ff; --bsm-focus-color: #d4f8ff; --bsm-focus-width: 4px; --bsm-text-muted: #d5e5ef; --bsm-text-subtle: #c7dce9; } } /* ========================================================================== 44. FORCED COLORS ========================================================================== Preserve the browser's own high-contrast system colors. Do not use forced-color-adjust:none across the page. Components requiring specialized treatment will be handled in accessibility.css. ========================================================================== */ /* ========================================================================== 45. PRINT COLOR FALLBACK ========================================================================== Avoid printing entire pages with a dark background. This does not reveal private content or remove authorization. ========================================================================== */ @media print { :root { color-scheme: light; --bsm-bg-page: #ffffff; --bsm-bg-app: #ffffff; --bsm-bg-surface: #ffffff; --bsm-bg-surface-alt: #f5f7fa; --bsm-bg-surface-raised: #f0f4f8; --bsm-text-primary: #111827; --bsm-text-secondary: #303a46; --bsm-text-muted: #4b5563; --bsm-border-default: #c8d0da; } } /* ========================================================================== 46. FINAL INTEGRATION CONTRACT ========================================================================== CANONICAL PREFIX: --bsm- ALL FUTURE BALOCH SM STYLESHEETS SHOULD: 1. Reuse these canonical tokens. 2. Avoid creating conflicting color systems. 3. Preserve BUY green and SELL red semantics. 4. Keep missing/stale feed styles visibly distinct. 5. Respect mobile safe-area insets. 6. Respect user-selected themes. 7. Respect reduced-motion preferences. 8. Use the shared z-index layer hierarchy. 9. Use the shared spacing and radius scales. 10. Avoid new external assets without authorization. REQUIRED LOADING ORDER: reset.css tokens.css themes/{approved-theme}.css themes/market-colors.css layout.css components.css page-specific styles responsive.css accessibility.css motion/reduced-motion.css Script/application logic remains separate from CSS. ========================================================================== */ /* END OF BALOCH SM GLOBAL DESIGN TOKENS */