/* ========================================================================= ProData design tokens. HARD RULE: everything here is namespaced --pd-* and this file contains NO selector other than :root. That is what makes it safe to load on every page - styles.css and stats.html both define --primary (and --shadow, and --radius vs --border-radius) with DIFFERENT values, so sharing or merging the existing token names would be a guaranteed regression. Namespaced tokens have zero collision surface. Never declare --primary / --shadow / --radius / --border-radius here. Every fluid token is pinned to its CURRENT DESKTOP VALUE at >= 768px, so this file alone changes nothing at 768px and above. ========================================================================= */ :root { /* ---- Fluid root type scale ------------------------------------------- Consumed by exactly one rule: html{font-size} in mobile.css. Ramp runs 320px -> 768px and then holds flat at 1rem (16px). Pinned at 768 rather than 1440 on purpose: a 1280px laptop is a real desktop, and letting the ramp reach it would shift every rem value in the app (227 in styles.css, 552 in templates, 449 in app.js before the split into static/js/app/) plus every Tailwind utility. Pinning at 768 gives a testable invariant: at any width >= 768px this evaluates to exactly 1rem = 16px. The ratchet used to get here (each verified for overflow at 320/390px): rung 1 13px clamp(0.8125rem, 0.6786rem + 0.6696vw, 1rem) rung 2 14px clamp(0.875rem, 0.7857rem + 0.4464vw, 1rem) rung 3 15px clamp(0.9375rem, 0.8929rem + 0.2232vw, 1rem) rung 4 16px <- shipped: full readable size, no shrink at all Settled on rung 4 because, once the filter-row wrapping bugs were fixed, the layout carried a full 16px with zero horizontal overflow. Keep a clamp() shape rather than a bare 1rem so dropping to a smaller floor is a one-line change if a future layout needs it. */ --pd-fs-root: clamp(1rem, 1rem, 1rem); /* ---- Fluid layout tokens --------------------------------------------- px-anchored, deliberately NOT riding --pd-fs-root, so gutters do not compound with the type shrink. */ --pd-gutter: clamp(8px, -0.571px + 2.679vw, 20px); /* body padding: 20px @768+ */ --pd-card-pad: clamp(12px, -0.857px + 4.018vw, 30px); /* .container padding: 30px @768+ */ /* ---- Static spacing scale ---- */ --pd-space-1: 4px; --pd-space-2: 8px; --pd-space-3: 12px; --pd-space-4: 16px; --pd-space-5: 20px; --pd-space-6: 24px; --pd-space-8: 32px; /* ---- Touch targets ---- */ --pd-tap: 44px; /* WCAG 2.5.5 AAA / Apple HIG minimum */ --pd-tap-sm: 36px; /* dense secondary controls, coarse pointer only */ --pd-ios-input-fs: 16px; /* below this, iOS Safari auto-zooms on focus */ /* ---- Sticky table geometry ------------------------------------------- --pd-mass-col1-w is overwritten with the measured value on #massTable itself by responsive.js; the value here is the fallback. */ --pd-mass-col1-w: 100px; --pd-z-sticky-cell: 90; --pd-z-sticky-head: 130; /* must beat the base th{z-index:100} in styles.css */ --pd-z-report-nav: 140; /* detailed-report nav (#detailedNav): above every sticky table cell/header (110-130) */ /* ---- Breakpoint ladder ------------------------------------------------ CSS cannot use custom properties inside @media, so these are documentation only - but they are the ONE written source of truth. xs 480px mobile.css sm 768px mobile.css md 1024px styles.css lg 1360px styles.css Plus two CAPABILITY queries that are NOT breakpoints and must never be conflated with them: (pointer: coarse) and (hover: none). */ } /* ========================================================================= Design language tokens (design/DESIGN.md). Colour, type, radius, shadow. Same --pd-* namespace rule as above. ========================================================================= */ :root { /* ---- Brand ---------------------------------------------------------- Navy stays the identity (login panel, header stripe, fund pages). */ --pd-navy: #002366; --pd-navy-deep: #0F172A; /* dark headers - replaces #1E1B4B */ /* ---- Action blue (logo blue) ---------------------------------------- Replaces the whole indigo family: #6366F1 #4F46E5 #4338CA #3B82F6 #EEF2FF #C7D2FE #8B5CF6 #7C3AED. */ --pd-blue: #2563EB; --pd-blue-hover: #1D4ED8; --pd-blue-pressed: #1E40AF; --pd-blue-subtle: #DBEAFE; /* borders of tinted things */ --pd-blue-tint: #EFF6FF; /* active/selected background */ /* ---- Neutrals (slate) ----------------------------------------------- Replaces #333, #7f8c8d, #f1f1f1, #f3f3f3 and other one-off greys. */ --pd-ink: #0F172A; /* headings, fund names */ --pd-ink-2: #1E293B; /* strong body */ --pd-ink-3: #334155; /* body text */ --pd-ink-4: #475569; /* secondary text, labels */ --pd-muted: #64748B; /* muted text, captions */ --pd-faint: #94A3B8; /* placeholder, disabled */ --pd-line-strong: #CBD5E1; /* input borders */ --pd-line: #E2E8F0; /* card borders, table dividers */ --pd-surface-2: #F1F5F9; /* secondary buttons, tab strip */ --pd-surface-sunk: #F8FAFC; /* inputs, table header */ --pd-surface: #FFFFFF; /* cards, modals */ --pd-bg: #F1F5F9; /* page background - was #f4f7f6 */ /* ---- Meaning ---------------------------------------------------------- Colour the NUMBER, not the background. Text-safe on white (>= 4.5:1): gain 5.48, loss 4.83, warn 5.02. The old #059669 / #16A34A greens are only 3.8 / 3.3 on white, so they survive as the *-fill (bars, dots) colour, never as text. */ --pd-gain: #10B981; /* user preferred today's green over #047857 (contrast 2.5:1, accepted) */ --pd-gain-fill: #10B981; --pd-gain-tint: #ECFDF5; --pd-loss: #DC2626; --pd-loss-tint: #FEF2F2; --pd-warn: #B45309; /* text */ --pd-warn-fill: #D97706; /* icons, bars */ --pd-warn-tint: #FFFBEB; --pd-compare: #E67E22; /* kept: compare mode fills/borders */ --pd-compare-text: #C2410C; /* #E67E22 is 2.85:1 - never as text */ --pd-institution: #0D9488; /* institutional user's own company funds (mass table) */ --pd-institution-tint: #CCFBF1; --pd-star: #F5B301; /* kept: favorites (was #ffc107) */ --pd-excel: #107C41; /* ---- Data source / data date (market research table) ---------------- The header colour of a column tells the agent WHICH DATE its data is correct for. Same meaning as today (app/00_core.js getMassColumns headerColor), and the date badges above the table use the same colours, so the badge IS the legend. Violet is allowed here and only here. */ --pd-src-main: #002366; /* נתונים נכונים ליום (incl. non-tradable, same date) */ --pd-src-holdings: #0F766E; /* תאריך נתוני אחזקה ישירה (was #009688) */ --pd-src-holdings-tint: #F0FDFA; --pd-src-holdings-line: #99F6E4; --pd-src-indication: #6D28D9; /* אינדיקציה - לא רשמי (was #7C3AED) */ --pd-src-indication-tint: #F5F3FF; --pd-src-indication-line: #DDD6FE; /* ---- Tool identity --------------------------------------------------- One hue per tool, the same on its home tile and its modal. Allowed ONLY on the tool's icon chip (and, option B, its modal header) - never on buttons, text or table cells. The chip keeps today's 135deg gradient (*-from -> base); the user preferred it over a flat chip. The two violet tools move off violet: portfolio -> blue, calc -> teal. Every other pair is today's exact gradient from index.html. */ --pd-tool-mix-from: #10B981; --pd-tool-mix: #059669; /* מחולל תמהיל השקעה */ --pd-tool-portfolio-from: #3B82F6; --pd-tool-portfolio: #1D4ED8; /* בדיקת תיק (was #6366F1 -> #4338CA) */ --pd-tool-synthetic-from: #38BDF8; --pd-tool-synthetic: #0284C7; /* צור מסלול סינטטי */ --pd-tool-calc-from: #14B8A6; --pd-tool-calc: #0F766E; /* מחשבון (was #7C3AED -> #5B21B6) */ --pd-tool-reasoning-from: #F59E0B; --pd-tool-reasoning: #D97706; /* מסמך הנמקה */ --pd-tool-risk-from: #FB7185; --pd-tool-risk: #E11D48; /* אשף סיכון */ --pd-tool-pdf-from: #3B82F6; --pd-tool-pdf: #1E3A8A; /* הורד דוח PDF (today's report card) */ --pd-tool-excel-from: #22C55E; --pd-tool-excel: #15803D; /* אקסל (today's report card) */ /* Soft tool shades (2026-10-21, user: "קצת יותר חזקים"): tint 17% / tint-strong 26% / line 50% of the tool colour on white. Precomputed on purpose - html2canvas (screenshots, ID-card PDF) cannot parse color-mix(). */ --pd-tool-mix-tint: #D6F3EA; --pd-tool-mix-tint-strong: #C1EDDE; --pd-tool-mix-line: #88DCC0; --pd-tool-portfolio-tint: #DEEAFD; --pd-tool-portfolio-tint-strong: #CCDEFD; --pd-tool-portfolio-line: #9DC0FA; --pd-tool-synthetic-tint: #DDF4FE; --pd-tool-synthetic-tint-strong: #CBEEFD; --pd-tool-synthetic-line: #9CDEFC; --pd-tool-calc-tint: #D7F3F0; --pd-tool-calc-tint-strong: #C2EDE8; --pd-tool-calc-line: #8ADCD2; --pd-tool-reasoning-tint: #FDEFD6; --pd-tool-reasoning-tint-strong: #FCE6C0; --pd-tool-reasoning-line: #FACE85; --pd-tool-risk-tint: #FEE7EA; --pd-tool-risk-tint-strong: #FEDADF; --pd-tool-risk-line: #FDB8C2; --pd-tool-pdf-tint: #DEEAFD; --pd-tool-pdf-tint-strong: #CCDEFD; --pd-tool-pdf-line: #9DC0FA; --pd-tool-excel-tint: #D9F5E4; --pd-tool-excel-tint-strong: #C6F0D5; --pd-tool-excel-line: #90E2AE; --pd-tool-ai-tint: #E4E5FD; --pd-tool-ai-tint-strong: #D6D7FB; --pd-tool-ai-line: #B1B2F8; /* ---- AI ---------------------------------------------------------------- Everything AI keeps today's blue->violet gradient (.ai-magic-btn): AI buttons, AI icon chips, AI result headers' chip. User's pick. Second and last place violet is allowed (see --pd-src-indication). */ --pd-ai-from: #6366F1; --pd-ai-to: #A855F7; --pd-ai-hover-from: #4F46E5; --pd-ai-hover-to: #9333EA; --pd-ai-glow: rgba(99, 102, 241, 0.35); --pd-ai-tint: #EEF2FF; /* background of AI output areas */ /* ---- Typography ------------------------------------------------------- Rubik stays. 8 sizes instead of 119. rem-based, like the app today. */ --pd-font: 'Rubik', sans-serif; --pd-fs-2xs: 0.72rem; /* footnotes, table meta (<= 0.72) */ --pd-fs-xs: 0.8rem; /* labels, chips, small buttons (0.75 - 0.82) */ --pd-fs-sm: 0.85rem; /* table cells, dense UI (0.85 - 0.88) */ --pd-fs-md: 0.95rem; /* body, inputs, buttons (0.9 - 1.05) */ --pd-fs-lg: 1.1rem; /* card titles (1.1 - 1.15) */ --pd-fs-xl: 1.25rem; /* section / modal titles (1.2 - 1.35) */ --pd-fs-2xl: 1.5rem; /* page titles (1.4 - 1.6) */ --pd-fs-3xl: 2rem; /* hero numbers (>= 1.8) */ --pd-fw-regular: 400; --pd-fw-medium: 500; --pd-fw-semibold: 600; --pd-fw-bold: 700; --pd-fw-heavy: 800; /* 900 / 950 / 850 fold into this */ --pd-lh-tight: 1.25; --pd-lh-body: 1.5; --pd-lh-doc: 1.7; /* reasoning documents */ /* ---- Radius: 4 steps + pill ---------------------------------------- */ --pd-r-sm: 8px; /* chips inside tables, checkboxes */ --pd-r-md: 12px; /* buttons, inputs (user: rounder, as before) */ --pd-r-lg: 16px; /* cards, panels */ --pd-r-xl: 24px; /* modals, main container, big panels (1.5rem, as before) */ --pd-r-2xl: 24px; /* home tool tiles only (kept as today, 1.5rem) */ --pd-r-pill: 999px; /* ---- Elevation: slate-tinted, never black --------------------------- */ --pd-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --pd-shadow-md: 0 4px 16px -2px rgba(15, 23, 42, 0.08); --pd-shadow-lg: 0 24px 48px -12px rgba(15, 23, 42, 0.22); --pd-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.22); /* ---- Motion ---------------------------------------------------------- */ --pd-ease: cubic-bezier(0.2, 0, 0, 1); --pd-dur: 150ms; /* static/js/motion.js + theme.css PART 3. Enter/exit = ease-out, never ease-in. Press feedback is fast, content entrances are the slowest thing on screen. */ --pd-ease-out: cubic-bezier(0.23, 1, 0.32, 1); --pd-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --pd-dur-press: 120ms; --pd-dur-ui: 200ms; /* dropdowns, overlays, hovers */ --pd-dur-enter: 700ms; /* report sections, cards fading up into view */ --pd-stagger: 100ms; }