/** * ============================================================================== * ASH INFINITY ENGINE — ULTRA-PREMIUM OBSIDIAN & QUARTZ DESIGN SYSTEM * Architecture: Apple HIG Fluid Interfaces & Institutional Quantitative Fintech * Phase 1: Canonical Design Tokens, Optical Typography & Tabular Numbers * ============================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap'); /* ============================================================================== 1. CANONICAL ROOT DESIGN TOKENS ============================================================================== */ :root, [data-theme="dark"] { color-scheme: dark !important; /* -------------------------------------------------------------------------- A. SURFACE ELEVATION HIERARCHY (OLED Obsidian Void to Frosted Glass) -------------------------------------------------------------------------- */ --surface-canvas: #030712; /* Level 0: Pure Obsidian Canvas (OLED battery optimized) */ --surface-structural: #070D1A; /* Level 1: Submerged rails, sidebars, recessed wells */ --surface-card: #0B1326; /* Level 2: Primary bento cards, table rows, ledger */ --surface-card-hover: #101B35; /* Level 3: Active rows, hover highlights, floating bars */ --surface-elevated: #152342; /* Level 4: Modals, context menus, bottom sheets */ /* Translucent Glass Materials with Backdrop Blur */ --surface-glass: rgba(11, 19, 38, 0.78); --surface-glass-header: rgba(7, 13, 26, 0.82); --surface-glass-card: rgba(11, 19, 38, 0.65); --surface-glass-overlay: rgba(3, 7, 18, 0.75); /* -------------------------------------------------------------------------- B. OPTICAL HAIRLINE BORDERS & SPECULAR LIGHT BEVELS -------------------------------------------------------------------------- */ --border-subtle: rgba(255, 255, 255, 0.06); --border-medium: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.16); --border-light-edge: rgba(255, 255, 255, 0.12); /* Simulates top specular light catch */ --border-glass: rgba(255, 255, 255, 0.08); --border-focus: rgba(10, 132, 255, 0.55); /* -------------------------------------------------------------------------- C. TYPOGRAPHY PALETTE (WCAG AAA Contrast Hierarchy) -------------------------------------------------------------------------- */ --text-primary: #F8FAFC; /* 15.8:1 contrast against canvas */ --text-secondary: #94A3B8; /* 6.4:1 contrast — subheadings, metadata */ --text-tertiary: #64748B; /* 4.5:1 contrast — micro-labels, borders */ --text-disabled: #475569; --text-inverse: #030712; /* Font Families */ --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif; --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Plus Jakarta Sans", "Inter", sans-serif; --font-mono: "JetBrains Mono", "SF Mono", "Fira Code", ui-monospace, Menlo, monospace; /* Canonical standard font mappings */ --font-heading: var(--font-display); --font-body: var(--font-sans); /* -------------------------------------------------------------------------- D. QUANTITATIVE TRADING SEMANTICS (Calibrated Apple Pro Accents) -------------------------------------------------------------------------- */ /* Profit / Bullish (Apple Emerald — replaces harsh radioactive neon) */ --trade-profit: #10B981; --trade-profit-hover: #059669; --trade-profit-soft: rgba(16, 185, 129, 0.12); --trade-profit-border: rgba(16, 185, 129, 0.25); --trade-profit-glow: rgba(16, 185, 129, 0.18); /* Loss / Bearish (Apple Crimson — replaces screaming red bricks) */ --trade-loss: #EF4444; --trade-loss-hover: #DC2626; --trade-loss-soft: rgba(239, 68, 68, 0.12); --trade-loss-border: rgba(239, 68, 68, 0.25); --trade-loss-glow: rgba(239, 68, 68, 0.18); /* Warning / Breakeven (Apple Amber) */ --trade-warning: #F59E0B; --trade-warning-hover: #D97706; --trade-warning-soft: rgba(245, 158, 11, 0.12); --trade-warning-border: rgba(245, 158, 11, 0.25); /* Brand / Action Accents */ --accent-apple-blue: #0A84FF; --accent-blue-hover: #0071E3; --accent-blue-soft: rgba(10, 132, 255, 0.14); --accent-blue-border: rgba(10, 132, 255, 0.28); /* Sniper Iris (Refined violet — replaces cheap purple gradients) */ --accent-sniper-violet: #8B5CF6; --accent-violet-hover: #7C3AED; --accent-violet-soft: rgba(139, 92, 246, 0.14); --accent-violet-border: rgba(139, 92, 246, 0.28); /* -------------------------------------------------------------------------- E. OPTICAL SHADOWS & LIGHT BEVEL REFLECTION -------------------------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-card: 0 8px 24px -4px rgba(0, 0, 0, 0.5), 0 2px 6px -1px rgba(0, 0, 0, 0.3); --shadow-overlay: 0 20px 48px -8px rgba(0, 0, 0, 0.7); --shadow-bevel: inset 0 1px 0 rgba(255, 255, 255, 0.10); /* -------------------------------------------------------------------------- F. APPLE FLUID MOTION & CRITICALLY DAMPED SPRINGS -------------------------------------------------------------------------- */ --spring-snappy: cubic-bezier(0.2, 0, 0, 1); /* 0ms immediate press feedback */ --spring-smooth: cubic-bezier(0.2, 0.8, 0.2, 1); /* Smooth sheets, drawer open */ --spring-settle: cubic-bezier(0.16, 1, 0.3, 1); /* Critically damped settle */ --duration-instant: 60ms; --duration-fast: 140ms; --duration-normal: 240ms; --duration-smooth: 320ms; /* -------------------------------------------------------------------------- G. GEOMETRIC CURVATURE SCALE -------------------------------------------------------------------------- */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 9999px; /* -------------------------------------------------------------------------- H. 100% BACKWARD-COMPATIBILITY ALIAS MATRIX Guarantees zero JavaScript DOM updates or legacy component styles break -------------------------------------------------------------------------- */ /* Surfaces */ --bg: var(--surface-canvas); --bg-base: var(--surface-canvas); --bg-surface: var(--surface-structural); --bg-card: var(--surface-card); --bg-card-hover: var(--surface-card-hover); --bg-panel: var(--surface-card); --sidebar: var(--surface-structural); --card: var(--surface-card); --card-hi: var(--surface-card-hover); --card-hover: var(--surface-card-hover); --rail: var(--surface-structural); --raise: var(--surface-elevated); /* Material 3 Surface Aliases */ --md-surface: var(--surface-canvas); --md-surface-dim: var(--surface-canvas); --md-surface-bright: var(--surface-structural); --md-surface-container-lowest: var(--surface-structural); --md-surface-container-low: var(--surface-card); --md-surface-container: var(--surface-card); --md-surface-container-high: var(--surface-card-hover); --md-surface-container-highest: var(--surface-elevated); /* Text Aliases */ --text: var(--text-primary); --text-main: var(--text-primary); --text-dim: var(--text-secondary); --text-mute: var(--text-tertiary); --text-muted: var(--text-secondary); --text-sub: var(--text-tertiary); --text-subtle: var(--text-tertiary); --muted: var(--text-secondary); --md-on-surface: var(--text-primary); --md-on-surface-variant: var(--text-secondary); /* Trading Semantics Aliases */ --profit: var(--trade-profit); --profit-bg: var(--trade-profit-soft); --up: var(--trade-profit); --up-bg: var(--trade-profit-soft); --up-border: var(--trade-profit-border); --emerald: var(--trade-profit); --emerald-glow: var(--trade-profit-glow); --loss: var(--trade-loss); --loss-bg: var(--trade-loss-soft); --down: var(--trade-loss); --down-bg: var(--trade-loss-soft); --down-border: var(--trade-loss-border); --rose: var(--trade-loss); --rose-glow: var(--trade-loss-glow); --warn: var(--trade-warning); --warn-bg: var(--trade-warning-soft); --warn-border: var(--trade-warning-border); --gold: var(--trade-warning); --gold-glow: var(--trade-warning-soft); /* Action & Accent Aliases */ --primary: var(--accent-apple-blue); --primary-soft: var(--accent-blue-soft); --accent: var(--accent-apple-blue); --accent-text: var(--accent-apple-blue); --accent-hover: var(--accent-blue-hover); --accent-border: var(--accent-blue-border); --accent-tint: var(--accent-blue-soft); --cyan: var(--accent-apple-blue); --indigo: var(--accent-sniper-violet); --purple: var(--accent-sniper-violet); --purple-glow: var(--accent-violet-soft); /* Border Aliases */ --border: var(--border-subtle); --border-accent: var(--accent-blue-border); --border-focus: rgba(10, 132, 255, 0.55); /* Radius Aliases */ --r-xs: var(--radius-xs); --r-sm: var(--radius-sm); --r-md: var(--radius-md); --r-lg: var(--radius-lg); --r-xl: var(--radius-xl); --radius-card: var(--radius-md); --md-radius-xs: var(--radius-xs); --md-radius-sm: var(--radius-sm); --md-radius-md: var(--radius-md); --md-radius-lg: var(--radius-lg); --md-radius-xl: var(--radius-xl); --md-radius-full: var(--radius-pill); /* Motion Aliases */ --md-motion-standard: var(--spring-snappy); --md-motion-emphasized: var(--spring-smooth); --md-motion-spring: var(--spring-settle); --md-duration-short: var(--duration-fast); --md-duration-medium: var(--duration-normal); --md-duration-long: var(--duration-smooth); } /* ============================================================================== 2. GLOBAL TABULAR NUMBERS ENFORCEMENT (Zero Ticker Jitter) ============================================================================== */ .tabular-nums, .kpi-value, .kpi-sub, .ticker-price, .pnl-val, .pnl-pill, .table-col-num, .col-time, .col-sym, .col-price, .col-pnl, .col-qty, .col-r, .col-strike, .stat-value, .metric-val, .badge-num, .rate-val, .pct-val, .trade-card-price, .trade-card-pnl, .strike-badge, .ltp-ticker, .depth-val, .depth-qty, .orderflow-val, .monte-val, .prob-val, #globalClock, #header-time-ist, .live-clock-badge, .clock-val, .clock-pill, .clock-mono, .live-clock, .mono-num, table td.numeric, table td[data-numeric="true"], #actlog-table td:nth-child(1), #actlog-table td:nth-child(4), #actlog-table td:nth-child(5), #actlog-total-count, #actlog-today-count, #actlog-error-count, .ledger-row td:nth-child(4), .ledger-row td:nth-child(5), .ledger-row td:nth-child(6), .ledger-row td:nth-child(7), .ledger-row td:nth-child(8) { font-variant-numeric: tabular-nums !important; font-feature-settings: "tnum" 1, "ss01" 1, "cv01" 1 !important; font-family: var(--font-mono); } /* ============================================================================== 3. APPLE OPTICAL TYPOGRAPHY & LETTER-SPACING CURVE ============================================================================== */ /* Large Display Headings (22px+) — Negative Tracking for Optical Tightness */ h1, .display-title, .hero-val, .kpi-grid .kpi-val { font-family: var(--font-display); letter-spacing: -0.03em; font-weight: 700; } /* Section Headings (18px - 21px) */ h2, .screen-title, .modal-header h2, .panel-header h2 { font-family: var(--font-display); letter-spacing: -0.022em; font-weight: 600; } /* Card & Group Headings (14px - 17px) */ h3, h4, .card-title, .bento-title, .table-header-title { font-family: var(--font-sans); letter-spacing: -0.012em; font-weight: 600; } /* Standard Body Copy (13px - 14px) */ body, p, span, div, input, select, textarea { font-family: var(--font-sans); letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Micro-Labels, Captions & Column Headers (10px - 12px) — Positive Tracking */ .caption, .micro-label, .sub-label, .tag, .badge, .category-badge, table th, .col-header, .kpi-label, .card-subtitle { letter-spacing: 0.04em; text-transform: uppercase; font-size: 11px; font-weight: 600; } /* ============================================================================== 4. APPLE TACTILE IMMEDIATE PRESS FEEDBACK (0ms Response on Pointer-Down) ============================================================================== */ button:active, .btn:active, .nav-item:active, .qm3-engine-btn:active, .seg-btn:active, .chip:active, .action-btn:active, .pill-tab:active, .quick-action-btn:active { transform: scale(0.97) !important; transition: transform var(--duration-instant) var(--spring-snappy) !important; } /* ============================================================================== 5. FROSTED GLASS SURFACES WITH SPECULAR LIGHT BEVEL ============================================================================== */ .apple-glass-card, .glass-panel, .bento-card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-top: 1px solid var(--border-light-edge); /* Specular top light catch */ border-radius: var(--radius-md); box-shadow: var(--shadow-card); transition: background var(--duration-fast) var(--spring-smooth), border-color var(--duration-fast) var(--spring-smooth), box-shadow var(--duration-fast) var(--spring-smooth); } .apple-glass-card:hover, .bento-card:hover { background: var(--surface-card-hover); border-color: var(--border-medium); border-top-color: rgba(255, 255, 255, 0.18); } /* Elevated Floating Chrome Bar (Top Header & Mobile Navigation) */ .glass-chrome, .header-chrome, .bottom-nav-chrome { background: var(--surface-glass-header) !important; backdrop-filter: blur(20px) saturate(180%) !important; -webkit-backdrop-filter: blur(20px) saturate(180%) !important; border-bottom: 1px solid var(--border-subtle) !important; }