/* Fidq Finance — shared design tokens. Two themes swap CSS variables on . */ :root { --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --ease: cubic-bezier(.2,.7,.2,1); } /* ---------- EDITORIAL / TRUST ---------- */ html[data-theme="editorial"] { --bg: #f7f4ec; --bg-elev: #fbf8f1; --bg-ink: #0e1a14; --ink: #141712; --ink-2: #3a3a34; --ink-3: #6a6a62; --rule: #d9d2c0; --rule-soft: #e7e1d1; --accent: #0b3d2e; /* deep emerald */ --accent-2: #8a6a2a; /* muted gold */ --accent-soft: #ead9a8; --ok: #0b5e3f; --warn: #8a5a14; --bad: #8a1f1f; --font-display: "Fraunces","Source Serif 4","Cormorant Garamond",Georgia,serif; --font-body: "Source Serif 4","Fraunces",Georgia,serif; --font-ui: "Inter","Helvetica Neue",Helvetica,Arial,sans-serif; --font-mono: "JetBrains Mono","IBM Plex Mono",ui-monospace,monospace; --display-tracking: -0.02em; --body-tracking: 0; --label-case: uppercase; --label-tracking: 0.16em; } /* ---------- MODERN FINTECH ---------- */ html[data-theme="fintech"] { --bg: #f4f6f8; --bg-elev: #ffffff; --bg-ink: #0a1020; --ink: #0b1220; --ink-2: #3d4658; --ink-3: #6c7588; --rule: #e4e8ee; --rule-soft: #eef1f5; --accent: #1b3a57; /* institutional navy */ --accent-2: #0a8f6b; /* calm teal-green */ --accent-soft: #d7e5de; --ok: #0a8f6b; --warn: #b4720a; --bad: #b02a2a; --font-display: "Söhne","Inter","Helvetica Neue",Helvetica,Arial,sans-serif; --font-body: "Inter","Helvetica Neue",Helvetica,Arial,sans-serif; --font-ui: "Inter","Helvetica Neue",Helvetica,Arial,sans-serif; --font-mono: "JetBrains Mono","IBM Plex Mono",ui-monospace,monospace; --display-tracking: -0.025em; --body-tracking: -0.005em; --label-case: uppercase; --label-tracking: 0.12em; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--ink); font-family: var(--font-body); letter-spacing: var(--body-tracking); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .label { font-family: var(--font-ui); text-transform: var(--label-case); letter-spacing: var(--label-tracking); font-size: 11px; font-weight: 600; color: var(--ink-3); } .mono { font-family: var(--font-mono); } .serif-display { font-family: var(--font-display); letter-spacing: var(--display-tracking); } .btn { font-family: var(--font-ui); font-size: 14px; font-weight: 500; padding: 12px 18px; border-radius: var(--radius-md); border: 1px solid var(--rule); background: var(--bg-elev); color: var(--ink); cursor: pointer; transition: all .18s var(--ease); display: inline-flex; align-items: center; gap: 8px; } .btn:hover { border-color: var(--ink-2); } .btn-primary { background: var(--accent); border-color: var(--accent); color: #fafaf6; } .btn-primary:hover { filter: brightness(1.08); } .btn-ghost { background: transparent; border-color: transparent; } .btn-ghost:hover { background: var(--rule-soft); border-color: transparent; } .rule { height: 1px; background: var(--rule); border: 0; margin: 0; } .rule-soft { height: 1px; background: var(--rule-soft); border: 0; margin: 0; } /* Chip / pill */ .chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; border-radius: 999px; border: 1px solid var(--rule); color: var(--ink-2); background: var(--bg-elev); } .chip .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--ink-3); } .chip.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 28%, var(--rule)); } .chip.ok .dot { background: var(--ok); } .chip.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 28%, var(--rule)); } .chip.warn .dot { background: var(--warn); } .chip.bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 28%, var(--rule)); } .chip.bad .dot { background: var(--bad); } /* Card */ .card { background: var(--bg-elev); border: 1px solid var(--rule); border-radius: var(--radius-lg); } /* ---- Editorial-only: geometric rule pattern ---- */ html[data-theme="editorial"] .geometric-rule { height: 14px; background-image: linear-gradient(135deg, transparent 45%, var(--accent) 45% 55%, transparent 55%), linear-gradient(45deg, transparent 45%, var(--accent) 45% 55%, transparent 55%); background-size: 14px 14px; opacity: .55; } html[data-theme="fintech"] .geometric-rule { height: 1px; background: var(--rule); opacity: 1; } /* scrollbar chill */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 8px; } ::-webkit-scrollbar-thumb:hover { background: var(--ink-3); } /* selection */ ::selection { background: var(--accent); color: #fafaf6; }