/* =============================================================
Noxity Imapsync — UI styles
Built on Noxity Design System v2 (Metronome-inspired):
ink on paper, italic serif accents, mono eyebrows, deep radii.
============================================================= */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500;600&display=swap');
:root {
/* Brand */
--nox-ink: #23375A;
--nox-ink-2: #586581;
--nox-ink-mute: #7A746A;
--nox-ink-faint: #B8B2A6;
--nox-paper: #F4F0E7;
--nox-paper-2: #EFEBE3;
--nox-paper-3: #E5DFD3;
--nox-crimson: #B83553;
--nox-crimson-hover: #9C2A45;
--nox-crimson-press: #7E2138;
--nox-evergreen: #4E7954;
--nox-evergreen-soft: #E4ECDF;
/* Pastel surfaces (for yes/no choice tiles) */
--nox-mint: #C8DDD0;
--nox-pink-soft: #F4D8DD;
--nox-success: #4E7954;
--nox-danger: #B83553;
/* Hairlines */
--nox-line: rgba(35,55,90,0.10);
--nox-line-strong: rgba(35,55,90,0.18);
--nox-line-soft: rgba(35,55,90,0.06);
/* Type */
--nox-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--nox-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
--nox-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
/* Radii */
--nox-radius-sm: 8px;
--nox-radius-md: 14px;
--nox-radius-lg: 20px;
--nox-radius-xl: 28px;
--nox-radius-pill: 999px;
/* Shadows */
--nox-shadow-soft: 0 1px 2px rgba(35,55,90,0.04), 0 8px 24px rgba(35,55,90,0.06);
--nox-shadow-card: 0 1px 0 rgba(35,55,90,0.04), 0 12px 32px rgba(35,55,90,0.08);
/* Motion */
--nox-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* =============================================================
Dark theme (Task 3) — same tokens, inverted ink/paper.
Toggled by data-theme="dark" on ; the value is applied
before first paint by a tiny inline script in the page
so there is no light/dark flash on reload.
============================================================= */
[data-theme="dark"] {
--nox-ink: #ECE7DD;
--nox-ink-2: #B4BBCA;
--nox-ink-mute: #8C93A2;
--nox-ink-faint: #6C7382;
--nox-paper: #1B2334;
--nox-paper-2: #141A27;
--nox-paper-3: #2A3447;
/* Dark enough that white button labels stay legible on hover (AA);
link/accent text is lifted separately below for small-text contrast. */
--nox-crimson: #C13A59;
--nox-crimson-hover: #D14A68;
--nox-crimson-press: #A82F4C;
--nox-evergreen: #8FB995;
--nox-evergreen-soft: #233227;
--nox-mint: #233227;
--nox-pink-soft: #3A2530;
--nox-success: #8FB995;
--nox-danger: #E0697F;
--nox-line: rgba(236,231,221,0.12);
--nox-line-strong: rgba(236,231,221,0.22);
--nox-line-soft: rgba(236,231,221,0.07);
--nox-shadow-soft: 0 1px 2px rgba(0,0,0,0.30), 0 8px 24px rgba(0,0,0,0.40);
--nox-shadow-card: 0 1px 0 rgba(0,0,0,0.25), 0 12px 32px rgba(0,0,0,0.45);
}
/* Lift small crimson *text* on dark backgrounds to meet AA contrast.
(Buttons keep the darker crimson above so white labels stay legible.) */
[data-theme="dark"] a,
[data-theme="dark"] .modal-link,
[data-theme="dark"] #bt-abort {
color: #EE8AA0;
}
[data-theme="dark"] #bt-abort { border-color: #EE8AA0 !important; }
[data-theme="dark"] .modal-steps li::marker { color: #EE8AA0; }
/* =============================================================
Reset / base
============================================================= */
*,
*::before,
*::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Flash-on-reload fix (Task 1: CSS visibility).
Chosen because the flashing element is not an ![]()
but the modal overlay
and the inactive step cards: Tailwind is loaded from a CDN