/* ═══════════════════════════════════════════════════════════════ TradeMesh — Base design tokens & primitives Colors/typography/spacing ported verbatim from the old build (deveto_site/assets/css/style.css) — see frontend/map.md for the old-vs-new merge rationale. Light + dark via [data-theme] on . ═══════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600;700&display=swap'); :root { --bg: #FAF7F2; --bg-alt: #F2EAE0; --bg-surface:#E8DDD0; --border: #DDD0BC; --border-2: #C9B99E; --text-1: #2C1A0E; --text-2: #7A5A42; --text-3: #B89A7A; --orange: #C17A4A; --orange-2: #A0612E; --orange-dim:rgba(193,122,74,0.12); --orange-bd: rgba(193,122,74,0.32); --blue: #5B7FA6; --blue-dk: #3F6085; --blue-dim: rgba(91,127,166,0.10); --blue-bd: rgba(91,127,166,0.25); --green: #2D7A50; --green-dim: rgba(45,122,80,0.10); --red: #B83232; --red-dim: rgba(184,50,50,0.10); --neutral: #8B7355; --sh-sm: 0 1px 3px rgba(44,26,14,0.06), 0 1px 2px rgba(44,26,14,0.03); --sh-md: 0 4px 16px rgba(44,26,14,0.08), 0 2px 4px rgba(44,26,14,0.04); --sh-lg: 0 20px 48px rgba(44,26,14,0.10), 0 4px 12px rgba(44,26,14,0.05); --r-sm: 6px; --r: 10px; --r-lg: 16px; --r-xl: 24px; --font: 'Inter', system-ui, sans-serif; --mono: 'JetBrains Mono', 'Fira Code', monospace; --sidebar-w: 252px; --sidebar-w-rail: 72px; --nav-h: 64px; --heat-0: var(--bg-surface); --heat-1: rgba(45,122,80,0.28); --heat-2: rgba(45,122,80,0.48); --heat-3: rgba(45,122,80,0.7); --heat-4: var(--green); } [data-theme="dark"] { --bg: #111118; --bg-alt: #19191f; --bg-surface:#1e1e26; --border: rgba(255,255,255,0.07); --border-2: rgba(255,255,255,0.13); --text-1: #f0ece8; --text-2: #9a8e82; --text-3: #5a524a; --orange: #C17A4A; --orange-2: #d4895a; --orange-dim:rgba(193,122,74,0.14); --orange-bd: rgba(193,122,74,0.30); --blue: #6b93c4; --blue-dk: #8ab0d8; --blue-dim: rgba(107,147,196,0.12); --blue-bd: rgba(107,147,196,0.25); --green: #3da86a; --green-dim: rgba(61,168,106,0.12); --red: #d95050; --red-dim: rgba(217,80,80,0.12); --neutral: #6a5e52; --sh-sm: 0 1px 4px rgba(0,0,0,0.4); --sh-md: 0 4px 20px rgba(0,0,0,0.5); --sh-lg: 0 20px 60px rgba(0,0,0,0.6); --heat-1: rgba(61,168,106,0.3); --heat-2: rgba(61,168,106,0.5); --heat-3: rgba(61,168,106,0.75); } /* ── RESET ──────────────────────────────────────── */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font); background: var(--bg); color: var(--text-1); line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background 0.2s, color 0.2s; } img, svg { display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } input, select, textarea { font-family: inherit; } ul { list-style: none; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 8px; } /* ── TYPOGRAPHY ─────────────────────────────────── */ h1 { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; } h2 { font-size: clamp(1.5rem, 2.5vw, 2.25rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; } h3 { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; } h4 { font-size: 0.9rem; font-weight: 600; } p { color: var(--text-2); } .mono { font-family: var(--mono); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); } /* ── BUTTONS ─────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.3rem; border-radius: var(--r-sm); font-size: 0.875rem; font-weight: 600; border: none; transition: all 0.18s; white-space: nowrap; cursor: pointer; } .btn-primary { background: var(--orange); color: #fff; } .btn-primary:hover { background: var(--orange-2); box-shadow: 0 4px 16px rgba(193,122,74,0.35); transform: translateY(-1px); } .btn-secondary { background: var(--bg-surface); color: var(--text-2); border: 1px solid var(--border); } .btn-secondary:hover { background: var(--border); color: var(--text-1); } .btn-outline { background: transparent; color: var(--orange); border: 1.5px solid var(--orange-bd); } .btn-outline:hover { background: var(--orange-dim); } .btn-ghost { background: transparent; color: var(--text-2); border: 1.5px solid var(--border); } .btn-ghost:hover { border-color: var(--border-2); color: var(--text-1); } .btn-sm { padding: 0.4rem 0.9rem; font-size: 0.8rem; } .btn-lg { padding: 0.85rem 1.8rem; font-size: 0.95rem; border-radius: var(--r); } /* ── BADGES ─────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.6rem; border-radius: 100px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; } .badge-orange { background: var(--orange-dim); color: var(--orange-2); border: 1px solid var(--orange-bd); } .badge-blue { background: var(--blue-dim); color: var(--blue-dk); border: 1px solid var(--blue-bd); } .badge-green { background: var(--green-dim); color: var(--green); border: 1px solid rgba(22,163,74,0.25); } .badge-red { background: var(--red-dim); color: var(--red); border: 1px solid rgba(220,38,38,0.2); } .badge-gray { background: var(--bg-surface); color: var(--neutral); border: 1px solid var(--border); } .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex-shrink: 0; animation: pulse-live 1.8s infinite; } @keyframes pulse-live { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.5; transform:scale(0.7); } } /* ── CARD ────────────────────────────────────────── */ .card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--sh-sm); } .card-p { padding: 1.5rem; } /* ── EMPTY STATE ─────────────────────────────────── */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 1.5rem; text-align: center; gap: 0.6rem; } .empty-icon { font-size: 2.5rem; margin-bottom: 0.25rem; } .empty-title { font-size: 0.92rem; font-weight: 700; color: var(--text-1); } .empty-sub { font-size: 0.8rem; color: var(--text-3); max-width: 260px; line-height: 1.55; } /* ── SEARCH INPUT ────────────────────────────────── */ .search-input-wrap { position: relative; } .search-input-wrap svg { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; } .search-input { width: 100%; padding: 0.55rem 0.75rem 0.55rem 2.25rem; border: 1.5px solid var(--border); border-radius: var(--r-sm); font-size: 0.84rem; font-family: var(--font); color: var(--text-1); background: var(--bg); outline: none; transition: border-color 0.15s; } .search-input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-dim); } /* ── SKELETON ────────────────────────────────────── */ .skeleton { background: linear-gradient(90deg, var(--bg-alt) 25%, var(--bg-surface) 50%, var(--bg-alt) 75%); background-size: 800px 100%; animation: shimmer 1.5s infinite; border-radius: var(--r-sm); color: transparent !important; } @keyframes shimmer { from { background-position: -400px 0; } to { background-position: 400px 0; } } /* ── TOAST ───────────────────────────────────────── */ #toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999; display: flex; flex-direction: column; gap: 0.5rem; pointer-events: none; } .toast { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 1rem; border-radius: var(--r); background: var(--text-1); color: var(--bg); font-size: 0.84rem; font-weight: 500; box-shadow: var(--sh-lg); pointer-events: auto; animation: toast-in 0.25s ease; min-width: 220px; max-width: 340px; } .toast.success { background: var(--green); color: #fff; } .toast.error { background: var(--red); color: #fff; } @keyframes toast-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }