/* ============================================================================= Pavo Market — Design System Tokens Extracted from index.html · single source of truth for the brand system. Architecture (two tiers): 1. PRIMITIVES — raw, brand-agnostic values (color ramps, scales). Never reference these directly in components. 2. SEMANTIC — role-based tokens that map onto primitives. These are what markup and components consume (--color-ink, --btn-...). The legacy names shipped in the original page (--navy, --line-2, --serif …) are preserved verbatim in the semantic tier so existing CSS keeps resolving. Aesthetic notes for anyone extending this system: · Identity is navy + gold on warm paper. Committed, not restrained — the navy carries the utility bar, header actions, tabs and footer. · The system is BORDER-LED, not shadow-led. Depth comes from hairline rules (--line*), never drop shadows. Keep it that way; see --elevation. · Corners are near-square (2px). Only avatars use full-round. Do not round cards; it breaks the editorial-financial register. ============================================================================= */ :root { /* ========================================================================== 1 · PRIMITIVES ========================================================================== */ /* --- Brand: Navy (primary) ------------------------------------------------ */ --navy-500: #2C3C7C; /* base — actions, tabs, footer field */ --navy-600: #1E2A5E; /* hover / darker */ --navy-700: #151D4A; /* deepest — legal band */ /* --- Brand: Gold (accent) ------------------------------------------------- */ --gold-300: #EBD9A8; /* tint — text selection */ --gold-400: #C6A85C; /* base — primary CTA fill */ --gold-500: #B0913F; /* pressed */ --gold-600: #A9873C; /* deep — eyebrows, faq sign */ --gold-700: #8A6E2E; /* darkest — link ink (AA on paper) */ /* --- Neutrals: cool near-black → grays ------------------------------------ */ --ink-900: #1E252D; /* primary text */ --slate-700:#4A515B; /* strong secondary text */ --slate-500:#6E7480; /* muted body */ --slate-400:#8A9098; /* faint / captions */ --hairline-base: 35, 42, 50; /* #232A32 as RGB channels for alpha rules */ /* --- Surfaces / paper ----------------------------------------------------- */ --paper: #F7F5F1; /* warm body ground */ --white: #FFFFFF; /* cards, header, hero */ --white-soft: #FBFAF8; /* off-white panels, row hovers */ --blue-tint: #EEF0F7; /* testimonial ground */ /* --- Status --------------------------------------------------------------- */ --green-700: #1F6B4A; /* positive returns */ --red-600: #B0453A; /* negative returns */ /* --- Alpha channels (for building translucent rules over any ground) ------ */ --navy-rgb: 44, 60, 124; /* --navy-500 as channels */ --white-rgb: 255, 255, 255; /* footer text on navy */ /* --- Type: families ------------------------------------------------------- */ --font-serif: 'Lora', Georgia, 'Times New Roman', serif; --font-sans: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif; /* --- Type: weights (Be Vietnam Pro axis) ---------------------------------- */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* --- Type: size scale (editorial, fine-grained) --------------------------- */ --fs-display: 46px; /* h1 */ --fs-h2: 32px; --fs-h3: 25px; /* also big-quote */ --fs-lede: 16px; --fs-lg: 15px; --fs-body: 14px; /* base */ --fs-sm: 13px; --fs-xs: 12px; --fs-2xs: 11px; --fs-micro: 8px; /* brand sub-label, store chips */ /* --- Type: line-height ---------------------------------------------------- */ --lh-display: 1.22; --lh-heading: 1.28; --lh-snug: 1.5; --lh-body: 1.7; --lh-relaxed: 1.75; /* --- Type: letter-spacing ------------------------------------------------- */ --tracking-tight: -0.015em; /* display */ --tracking-snug: -0.01em; /* h2 */ --tracking-code: 0.02em; /* fund codes */ --tracking-wide: 0.06em; /* partner labels */ --tracking-wider: 0.08em; /* store chips */ --tracking-brand: 0.14em; /* PAVO MARKET wordmark */ --tracking-caps: 0.18em; /* FUND MARKETPLACE JSC */ /* --- Space scale (base rhythm; layout also uses fluid in-between values) -- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-14: 56px; --space-16: 64px; --space-18: 72px; --space-19: 76px; /* canonical vertical section padding */ --space-20: 80px; /* --- Radius --------------------------------------------------------------- */ --radius-sm: 2px; /* buttons, inputs, chips, cards */ --radius-full: 9999px; /* avatars only */ /* --- Borders -------------------------------------------------------------- */ --border-width: 1px; --border-width-accent: 2px; /* gold underlines, flow-step & quote rules */ /* --- Motion --------------------------------------------------------------- */ --dur-fast: 0.12s; /* row / cell background feedback */ --dur-base: 0.15s; /* color, border, tab, link transitions */ /* Shipped feel is the CSS default `ease`. These curves are available for new motion; adopt deliberately — do not retro-apply and change the feel. */ --ease-standard: cubic-bezier(0.2, 0.6, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* --- Z-index scale (semantic, no magic numbers) --------------------------- */ --z-base: 0; --z-dropdown: 10; --z-sticky: 40; /* sticky site header */ --z-modal-backdrop: 100; --z-modal: 110; --z-toast: 120; --z-tooltip: 130; /* --- Layout --------------------------------------------------------------- */ --maxw: 1240px; /* content container */ --gutter: 40px; /* desktop container padding */ --gutter-mobile: 20px; /* ≤960px */ --section-py: var(--space-19); --measure: 65ch; /* prose max line length ceiling */ --measure-lede: 520px; /* hero lede / narrow prose columns */ /* --- Breakpoints (reference only; CSS @media can't read custom props) ----- */ --bp-tablet: 960px; --bp-mobile: 520px; /* ========================================================================== 2 · SEMANTIC (role-based — components consume THESE) Legacy shipped names retained so existing markup keeps resolving. ========================================================================== */ /* --- Surface & ink -------------------------------------------------------- */ --page: var(--paper); /* body ground */ --surface: var(--white); /* cards, header, hero */ --surface-2: var(--white-soft); /* subtle raised panels / hovers */ --surface-blue: var(--blue-tint); /* testimonial section */ --ink: var(--ink-900); /* primary text */ /* --- Text ramp ------------------------------------------------------------ */ --gray-1: var(--slate-700); /* strong secondary */ --gray-2: var(--slate-500); /* body / muted */ --gray-3: var(--slate-400); /* captions / faint labels */ /* --- Brand roles ---------------------------------------------------------- */ --navy: var(--navy-500); --navy-dark: var(--navy-600); --navy-deep: var(--navy-700); --gold: var(--gold-400); --gold-deep: var(--gold-600); --gold-link: var(--gold-700); --gold-press:var(--gold-500); /* --- Status --------------------------------------------------------------- */ --pos: var(--green-700); --neg: var(--red-600); /* --- Hairlines (translucent rules over light grounds) --------------------- */ --line: rgba(var(--hairline-base), 0.10); --line-2: rgba(var(--hairline-base), 0.12); --line-3: rgba(var(--hairline-base), 0.06); --line-strong: rgba(var(--hairline-base), 0.16); /* --- Brand-tinted rules (over blue / navy grounds) ------------------------ */ --line-navy: rgba(var(--navy-rgb), 0.14); /* testimonial divider */ --line-navy-soft: rgba(var(--navy-rgb), 0.15); --line-navy-strong: rgba(var(--navy-rgb), 0.25); /* avatar ring */ --gold-underline: rgba(138, 110, 46, 0.40); /* inline-link underline */ --gold-hover-ring: rgba(169, 135, 60, 0.50); /* partner hover border */ /* --- On-navy text & lines (footer) ---------------------------------------- */ --on-navy-strong: rgba(var(--white-rgb), 0.82); /* util bar text */ --on-navy: rgba(var(--white-rgb), 0.72); /* footer body */ --on-navy-muted: rgba(var(--white-rgb), 0.55); /* legal / dim */ --on-navy-faint: rgba(var(--white-rgb), 0.50); /* footer sub-label */ --on-navy-copy: rgba(var(--white-rgb), 0.40); /* copyright */ --on-navy-line: rgba(var(--white-rgb), 0.25); /* store chip border */ --legal-ground: rgba(21, 29, 74, 0.55); /* legal band over footer */ /* --- Selection ------------------------------------------------------------ */ --selection-bg: var(--gold-300); --selection-fg: var(--ink); /* --- Type aliases (shipped names) ----------------------------------------- */ --serif: var(--font-serif); --sans: var(--font-sans); /* --- Elevation ------------------------------------------------------------ */ /* Intentionally flat. Depth is expressed with --line* hairlines, not shadow. If a floating layer (menu, popover) ever needs lift, use this one token rather than inventing per-component shadows. */ --elevation-none: none; --elevation-overlay: 0 8px 24px rgba(var(--hairline-base), 0.16); /* --- Component: buttons --------------------------------------------------- */ --btn-radius: var(--radius-sm); --btn-primary-bg: var(--gold); /* gold CTA — ink text */ --btn-primary-fg: var(--ink); --btn-primary-hover: var(--gold-press); --btn-secondary-bg: var(--navy); /* navy action */ --btn-secondary-fg: var(--white); --btn-secondary-hover:var(--navy-dark); }