/* ============================================================ Marrsai — Theme entry point Single CSS import for the whole design system. Usage: Loads tokens (colors, type, spacing, motion) then components (app shell, buttons, inputs, cards, tables, banners, tags). Sets sensible base + print + focus defaults. ============================================================ */ @import url("../../fonts/fonts.css"); @import url("tokens.css"); @import url("components.css"); /* ---------- Direction switcher Add [data-direction="cool"] on or any wrapper to opt into the cool violet palette. Default is warm violet. */ /* ---------- Page defaults ---------- */ html { height: 100%; } body { min-height: 100%; font-size: var(--text-base); line-height: var(--leading-base); text-rendering: optimizeLegibility; } /* UI standardizes on Geist. Instrument Sans is the display face and is report-only — it returns under [data-surface="report"] (see colors_and_type.css §3). Marrsai ships no serif. */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); color: var(--ink-800); margin: 0; } [data-surface="report"] h1, [data-surface="report"] h2, [data-surface="report"] h3, [data-surface="report"] h4 { font-family: var(--font-display); font-weight: 500; } p { margin: 0; } a { color: var(--accent-700); text-decoration: none; } a:hover { text-decoration: underline; } button { font-family: inherit; } hr { border: 0; border-top: 1px solid var(--line-100); margin: var(--space-6) 0; } /* ---------- Focus visible One focus treatment for everything: 3px halo of accent-50 plus a 1px accent-500 border replacement. Mouse clicks don't show it (thanks to :focus-visible). */ :focus-visible { outline: 2px solid var(--accent-500); outline-offset: 2px; border-radius: var(--radius-sm); } .input:focus-visible, .btn:focus-visible { outline: none; border-color: var(--accent-500); box-shadow: 0 0 0 3px var(--accent-50); } /* ---------- Selection ---------- */ ::selection { background: var(--accent-100); color: var(--ink-800); } /* ---------- Scrollbar (webkit) ---------- */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--line-200); border-radius: var(--radius-pill); border: 2px solid var(--paper-50); } ::-webkit-scrollbar-thumb:hover { background: var(--ink-100); } /* ---------- Forms: shared helpers ---------- */ .field { display: flex; flex-direction: column; gap: 6px; } .field__label { font-size: var(--text-sm); color: var(--ink-600); font-weight: 500; } .field__hint { font-size: var(--text-xs); color: var(--ink-200); } .field__error { font-size: var(--text-xs); color: var(--status-critical-700); } .input--error { border-color: var(--status-critical-500); } .input--error:focus { border-color: var(--status-critical-500); box-shadow: 0 0 0 3px var(--status-critical-50); } /* ---------- Layout helpers ---------- */ .stack { display: flex; flex-direction: column; } .row { display: flex; } .row--wrap { flex-wrap: wrap; } .row--center { align-items: center; } .row--between { justify-content: space-between; } .row--end { justify-content: flex-end; } .gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); } .gap-6 { gap: var(--space-6); } .gap-8 { gap: var(--space-8); } /* ---------- Print Reports print on letter. Strip shadows, force light palette, prevent card splits across pages. */ @media print { html, body { background: white; color: black; } .sidebar, .app-shell { display: none !important; } .card, .table-wrap, .banner, .insight { box-shadow: none !important; page-break-inside: avoid; } a { color: inherit; text-decoration: none; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }