/* ============================================================================ Price Tracker — Design System v2 (foundation layer) ---------------------------------------------------------------------------- This file establishes the NEW visual identity as a parallel token layer. It is collision-free with the legacy `theme.css`: • All tokens live under the `--ptn-*` namespace (legacy uses `--pt-*`). • It declares ONLY custom properties — no bare element selectors, so loading it changes nothing visually until components consume the tokens (FAZ 2+). Loaded in base.html right after theme.css. Once the page-by-page migration in FAZ 2 lands, theme.css is retired and these tokens become the single source. Design rationale (grounded in the actual brand sites, not assumptions) Subject : EcoFlow portable power / B2B price intelligence (a Boemar tool). Brand audit (hex frequency on the live sites): • boemar.com.tr → strict BLACK & WHITE (#fff / #141414 / #000). No accent. • ecoflow.com.tr → BLUE-led (#3F68E0 ×48, #2164FF ×20, cyan #0ECFE2 ×8); orange #FF7F00 is secondary (×24); typeface = Manrope. Identity: a Boemar-monochrome base (cool neutral, not warm) carrying a single EcoFlow-blue accent. Deliberately NOT the AI-default cream+terracotta, near-black+acid-green, or broadsheet. The earlier "volt amber" was a wrong assumption — EcoFlow's .tr identity is blue, not orange. Type : Manrope (display + body — EcoFlow's own typeface) + JetBrains Mono for ALL prices/figures (tabular numerals). The mono numeral is the signature: a pricing tool's identity is its figures. Signature (FAZ 2): per-row sparklines so price history is the hero of every table — the data carries the page, not decoration. ========================================================================== */ :root { /* ── Brand accent — EcoFlow blue ────────────────────────────────────────── */ --ptn-flow: #3F68E0; /* EcoFlow primary blue (eco­flow.com.tr ×48) */ --ptn-flow-bright: #2164FF; /* EcoFlow bright blue (×20) — gradients/hover */ --ptn-flow-ink: #2C4FB8; /* pressed / darkest */ --ptn-flow-soft: #ECF1FD; /* tinted background for flow chips */ --ptn-flow-glow: rgba(63, 104, 224, 0.32); --ptn-flow-cyan: #0ECFE2; /* EcoFlow cyan — reserved for special accents */ /* ── Surface & ink (light) — Boemar-cool neutral, not warm ──────────────── */ --ptn-paper: #F6F7F9; /* page background — cool neutral */ --ptn-surface: #FFFFFF; /* cards / panels */ --ptn-surface-2: #F1F3F7; /* sunken / secondary surface */ --ptn-line: #E4E7EC; /* borders / hairlines */ --ptn-line-strong: #D1D5DD; --ptn-ink: #141618; /* primary text — Boemar near-black (#141414) */ --ptn-ink-soft: #3F4754; /* secondary text */ --ptn-ink-mute: #7A8290; /* tertiary / captions */ --ptn-ink-faint: #A8AEB8; /* placeholders */ /* ── Directional / status ───────────────────────────────────────────────── Semantic preserved from the legacy theme: a price RISE is the attention state, a FALL is the calm state (the team watches for dealer undercutting). */ --ptn-rise: #E5484D; /* price up */ --ptn-rise-soft: #FDECEC; --ptn-fall: #1FA971; /* price down */ --ptn-fall-soft: #E6F6EE; --ptn-warn: #E8A317; --ptn-warn-soft: #FCF3DC; --ptn-info: #3A8FE0; --ptn-info-soft: #E9F2FB; /* ── Typography ─────────────────────────────────────────────────────────── */ --ptn-font-display: 'Manrope', system-ui, -apple-system, sans-serif; --ptn-font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --ptn-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* Type scale (1.250 major third). Mono figures get tabular numerals by default. */ --ptn-fs-xs: 0.75rem; /* 12 — captions, badges */ --ptn-fs-sm: 0.875rem; /* 14 — secondary text, table dense */ --ptn-fs-base: 1rem; /* 16 — body */ --ptn-fs-lg: 1.25rem; /* 20 — lead / card titles */ --ptn-fs-xl: 1.5rem; /* 24 — page sections */ --ptn-fs-2xl: 2rem; /* 32 — stat values */ --ptn-fs-3xl: 2.75rem; /* 44 — display headlines (Manrope 800) */ --ptn-lh-tight: 1.15; --ptn-lh-snug: 1.35; --ptn-lh-base: 1.55; --ptn-fw-regular: 400; --ptn-fw-medium: 500; --ptn-fw-semi: 600; --ptn-fw-bold: 700; --ptn-fw-display: 800; /* Manrope display weight */ --ptn-tracking-tight: -0.02em; --ptn-tracking-wide: 0.06em; --ptn-tracking-caps: 0.08em; /* eyebrows / uppercase labels */ /* ── Spacing (4px base) ─────────────────────────────────────────────────── */ --ptn-space-0: 0; --ptn-space-1: 0.25rem; /* 4 */ --ptn-space-2: 0.5rem; /* 8 */ --ptn-space-3: 0.75rem; /* 12 */ --ptn-space-4: 1rem; /* 16 */ --ptn-space-5: 1.5rem; /* 24 */ --ptn-space-6: 2rem; /* 32 */ --ptn-space-7: 3rem; /* 48 */ --ptn-space-8: 4rem; /* 64 */ /* ── Radius ─────────────────────────────────────────────────────────────── */ --ptn-radius-xs: 4px; --ptn-radius-sm: 8px; --ptn-radius-md: 12px; --ptn-radius-lg: 16px; --ptn-radius-pill: 999px; /* ── Elevation (restrained — one calm, one lifted) ──────────────────────── */ --ptn-shadow-sm: 0 1px 2px rgba(20, 22, 24, 0.05); --ptn-shadow: 0 1px 2px rgba(20, 22, 24, 0.05), 0 6px 18px rgba(20, 22, 24, 0.07); --ptn-shadow-lg: 0 12px 34px rgba(20, 22, 24, 0.13); --ptn-ring: 0 0 0 3px var(--ptn-flow-glow); /* focus ring — flow blue */ /* ── Layout ─────────────────────────────────────────────────────────────── */ --ptn-sidebar-w: 276px; --ptn-content-max: 1280px; --ptn-topbar-h: 64px; /* ── Motion ─────────────────────────────────────────────────────────────── */ --ptn-ease: cubic-bezier(0.2, 0.7, 0.2, 1); --ptn-dur-fast: 120ms; --ptn-dur: 180ms; --ptn-dur-slow: 280ms; /* ── Z-index scale ──────────────────────────────────────────────────────── */ --ptn-z-sticky: 1020; --ptn-z-topbar: 1030; --ptn-z-sidebar: 1040; --ptn-z-overlay: 1035; --ptn-z-popover: 2000; --ptn-z-toast: 1080; } /* ─────────────────────────────────────────────────────────────────────────── Dark theme overrides — only the tokens that actually change. Applied via [data-ptn-theme="dark"] on (FAZ 1.4 wires the toggle). The flow accent brightens slightly on dark so it reads against the ink. ─────────────────────────────────────────────────────────────────────────── */ [data-ptn-theme="dark"] { --ptn-paper: #0E1116; --ptn-surface: #161A21; --ptn-surface-2: #1F252F; --ptn-line: #2B323D; --ptn-line-strong: #3A424F; --ptn-ink: #E8EAF0; --ptn-ink-soft: #B6BCC8; --ptn-ink-mute: #828A98; --ptn-ink-faint: #5A6170; --ptn-flow: #6B8AEF; /* brightened for dark backgrounds */ --ptn-flow-soft: rgba(63, 104, 224, 0.16); --ptn-flow-glow: rgba(107, 138, 239, 0.42); --ptn-rise-soft: rgba(229, 72, 77, 0.16); --ptn-fall-soft: rgba(31, 169, 113, 0.16); --ptn-warn-soft: rgba(232, 163, 23, 0.16); --ptn-info-soft: rgba(58, 143, 224, 0.16); --ptn-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --ptn-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 22px rgba(0, 0, 0, 0.45); --ptn-shadow-lg: 0 14px 38px rgba(0, 0, 0, 0.55); } /* Honor the user's OS preference once the toggle (FAZ 1.4) is wired, so a fresh visitor with a dark OS lands in dark even before clicking. No-JS safe. */ @media (prefers-color-scheme: dark) { :root:not([data-ptn-theme="light"]) { color-scheme: dark; } }