/* ============================================================ ASX Analyser Portal — Quiet Ledger Design tokens. Drop into webapi/static/css/tokens.css. ============================================================ */ :root { /* Surfaces */ --bg: #fbfaf6; --surface: #ffffff; --surface-alt: #f4f2ec; /* Lines */ --border: #e7e3d8; --border-strong: #cfcabb; --rule: #ece9dd; /* Text */ --text: #1f1d18; --text-dim: #5a574d; --text-muted: #8a877a; /* Semantic */ --accent: #0f5e5e; --accent-text: #ffffff; --signal: #b86b00; --signal-soft: #fbf0dc; --quoted: #0f5e5e; --unquoted: #8a877a; /* Type */ --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace; --font-serif: "IBM Plex Serif", "Source Serif Pro", Georgia, serif; /* Type sizes */ --fs-h1: 32px; --fs-h2: 18px; --fs-brand: 17px; --fs-body: 14px; --fs-ui: 13.5px; --fs-button: 13px; --fs-mono-meta: 12px; --fs-mono-tiny: 11px; --fs-badge: 10px; /* Spacing scale (4-multiple) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-14: 56px; /* Radius */ --radius-sm: 4px; --radius-pill: 999px; /* Elevation (only one) */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04); /* Motion */ --t-fast: 120ms ease; /* Layout constants */ --header-h: 56px; --mobile-bp: 768px; } /* ============================================================ Dark theme — applied via ============================================================ */ [data-theme="dark"] { --bg: #16161a; --surface: #1d1d22; --surface-alt: #24242a; --border: #2e2e36; --border-strong: #42424c; --rule: #23232a; --text: #ece9e2; --text-dim: #9b988e; --text-muted: #6b6960; --accent: #5dc8b6; --accent-text: #0c2622; --signal: #f4b454; --signal-soft: #3a2c14; --quoted: #5dc8b6; --unquoted: #9b988e; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); } /* Auto-pick dark when no explicit theme is set and OS prefers it */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #16161a; --surface: #1d1d22; --surface-alt: #24242a; --border: #2e2e36; --border-strong: #42424c; --rule: #23232a; --text: #ece9e2; --text-dim: #9b988e; --text-muted: #6b6960; --accent: #5dc8b6; --accent-text: #0c2622; --signal: #f4b454; --signal-soft: #3a2c14; --quoted: #5dc8b6; --unquoted: #9b988e; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); } } /* ============================================================ Reduced motion — disable transitions ============================================================ */ @media (prefers-reduced-motion: reduce) { :root { --t-fast: 0ms; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* ============================================================ HTMX in-flight conventions ============================================================ */ .htmx-request { opacity: 0.6; cursor: wait; } .htmx-request .alert-mark-seen { pointer-events: none; } /* ============================================================ Base reset (optional — keep or merge into style.css) ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--fs-ui); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } button { font: inherit; color: inherit; } input, textarea, select { font: inherit; color: inherit; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; }