@tailwind base; @tailwind components; @tailwind utilities; /* =========================================================================== AURALYNQ DESIGN TOKENS Three themes switched via [data-theme] on . Every surface, text and status color is a CSS variable (R G B triplet) so Tailwind tokens — bg-ink/panel/panel2, border-edge/edge2, text-fg/fg2/fg3, text-ok/warn/bad — re-theme automatically. No component hardcodes a hex value. Identity: local-first · voice-native · evidence-grounded · observable RAG. ========================================================================= */ :root, [data-theme="dark"] { color-scheme: dark; /* surfaces — deep, saturated base so gradients read rich (not washed out) */ --c-ink: 7 11 22; /* #070b16 base */ --c-ink-2: 12 18 33; /* #0c1221 section band */ --c-panel: 19 27 47; /* #131b2f raised card */ --c-panel-2: 28 38 65; /* #1c2641 inset */ --c-edge: 44 57 88; /* hairline border */ --c-edge-strong: 64 82 122; /* emphasized border */ --c-muted: 203 213 225; /* text scale (contrast-checked on --c-panel) */ --c-text: 241 245 249; /* slate-100 */ --c-text-2: 203 213 225; /* slate-300 */ --c-text-3: 148 163 184; /* slate-400 */ /* semantic status dots/bars */ --c-ok: 52 211 153; --c-warn: 251 191 36; --c-bad: 251 113 133; --c-info: 129 140 248; /* status text variants (readable on this theme's surfaces) */ --ok-fg: 110 231 183; --warn-fg: 252 211 77; --bad-fg: 253 164 175; /* misc */ --text: #f1f5f9; --brand-fg: #5eead4; --ring: #5eead4; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 6px 20px -8px rgba(0, 0, 0, 0.55); --shadow-lg: 0 18px 50px -16px rgba(0, 0, 0, 0.7); --shadow-glow: 0 12px 40px -12px rgba(94, 234, 212, 0.35); --body-glow-a: rgba(129, 140, 248, 0.18); --body-glow-b: rgba(94, 234, 212, 0.12); --grid-line: rgba(129, 140, 248, 0.07); } [data-theme="light"] { color-scheme: light; /* crisp white cards on a soft cool-grey canvas with real separation */ --c-ink: 236 240 247; /* #ecf0f7 canvas */ --c-ink-2: 243 246 251; --c-panel: 255 255 255; --c-panel-2: 244 247 251; --c-edge: 203 213 228; /* #cbd5e4 visible hairline */ --c-edge-strong: 176 189 211; --c-muted: 71 85 105; --c-text: 11 18 32; /* near-black */ --c-text-2: 51 65 85; /* slate-700 */ --c-text-3: 71 85 105; /* slate-600 */ --c-ok: 16 185 129; --c-warn: 217 119 6; --c-bad: 225 29 72; --c-info: 79 70 229; --ok-fg: 4 120 87; --warn-fg: 180 83 9; --bad-fg: 190 18 60; --text: #0b1220; --brand-fg: #0d9488; --ring: #0d9488; --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08); --shadow-md: 0 8px 24px -12px rgba(15, 23, 42, 0.18); --shadow-lg: 0 18px 48px -18px rgba(15, 23, 42, 0.22); --shadow-glow: 0 12px 40px -14px rgba(13, 148, 136, 0.28); --body-glow-a: rgba(99, 102, 241, 0.1); --body-glow-b: rgba(13, 148, 136, 0.08); --grid-line: rgba(71, 85, 105, 0.08); } [data-theme="comfort"] { color-scheme: light; /* warm paper, larger type, low glare, high-contrast warm ink */ --c-ink: 241 232 217; /* #f1e8d9 warm canvas */ --c-ink-2: 247 240 228; --c-panel: 252 247 238; /* warm card */ --c-panel-2: 245 237 223; --c-edge: 205 191 162; /* visible warm hairline */ --c-edge-strong: 181 165 132; --c-muted: 60 54 44; --c-text: 28 24 20; /* #1c1814 */ --c-text-2: 58 51 40; --c-text-3: 90 79 62; --c-ok: 21 128 61; --c-warn: 180 83 9; --c-bad: 190 18 60; --c-info: 67 56 202; --ok-fg: 21 110 53; --warn-fg: 154 70 8; --bad-fg: 159 18 57; --text: #1c1814; --brand-fg: #0b7a6f; --ring: #0b7a6f; --shadow-sm: 0 1px 2px rgba(80, 60, 30, 0.1); --shadow-md: 0 8px 22px -12px rgba(80, 60, 30, 0.2); --shadow-lg: 0 18px 46px -18px rgba(80, 60, 30, 0.24); --shadow-glow: 0 12px 40px -14px rgba(11, 122, 111, 0.25); --body-glow-a: rgba(180, 120, 40, 0.08); --body-glow-b: rgba(11, 122, 111, 0.06); --grid-line: rgba(120, 90, 40, 0.07); font-size: 17px; /* roomier base for long reading sessions */ } /* ===================================================== typography & density = CSS variables for font scale, density, and layout widths. Controlled by SettingsPanel — persisted in localStorage and applied via JS. Defaults are set here; overridden via document.documentElement.style.setProperty. ========================================================================= */ :root { /* typography scale — multiplied into base font-size */ --font-scale: 1.1; /* spacing/density multiplier — applied to padding/gap tokens */ --density-scale: 1; /* layout widths */ --chat-max-width: min(900px, 90vw); --inspector-width: clamp(360px, 30vw, 560px); --trace-rail-width: 240px; --composer-height: auto; } html { font-size: calc(15px * var(--font-scale, 1)); } /* ===================================================== responsive breakpoints = CSS variables for Bootstrap-style breakpoint awareness. Use via calc() or media queries in custom CSS. ========================================================================= */ :root { --bp-sm: 576px; --bp-md: 768px; --bp-lg: 992px; --bp-xl: 1200px; --bp-xxl: 1400px; } ::selection { background: rgba(129, 140, 248, 0.3); } html { scroll-behavior: smooth; line-height: 1.6; } body { @apply bg-ink text-fg; background-image: radial-gradient(60rem 60rem at 80% -10%, var(--body-glow-a), transparent), radial-gradient(50rem 50rem at -10% 10%, var(--body-glow-b), transparent); } /* ---- per-theme remap of the slate text scale (legacy components) --------- New components use token classes (text-fg/fg2/fg3); this keeps any remaining slate-* usage contrast-correct across light/comfort. */ [data-theme="light"] .text-slate-100, [data-theme="comfort"] .text-slate-100 { color: rgb(var(--c-text)); } [data-theme="light"] .text-slate-200, [data-theme="comfort"] .text-slate-200 { color: rgb(var(--c-text)); } [data-theme="light"] .text-slate-300, [data-theme="comfort"] .text-slate-300 { color: rgb(var(--c-text-2)); } [data-theme="light"] .text-slate-400, [data-theme="comfort"] .text-slate-400 { color: rgb(var(--c-text-3)); } [data-theme="light"] .text-slate-500, [data-theme="comfort"] .text-slate-500 { color: rgb(var(--c-text-3)); } /* brand-colored text darkens on light surfaces to stay readable */ [data-theme="light"] .text-brand, [data-theme="comfort"] .text-brand { color: var(--brand-fg); } /* indigo brand2 text is too light on white — darken it on light/comfort */ [data-theme="light"] .text-brand2, [data-theme="comfort"] .text-brand2 { color: #4f46e5; } [data-theme="light"] .text-accent, [data-theme="comfort"] .text-accent { color: #7c3aed; } /* ===================================================== focus & a11y ====== */ .focusable { @apply outline-none; } .focusable:focus-visible, button:focus-visible, a:focus-visible, [role="radio"]:focus-visible, summary:focus-visible, textarea:focus-visible, input:focus-visible { outline: none; box-shadow: 0 0 0 2px rgb(var(--c-ink)), 0 0 0 4px var(--ring); border-radius: 0.5rem; } /* ===================================================== surfaces ========== */ .card { @apply rounded-2xl border border-edge bg-panel p-4; box-shadow: var(--shadow-md); } .card-inset { @apply rounded-xl border border-edge bg-panel2 p-3; } .card-hover { @apply transition duration-200; } .card-hover:hover { @apply border-edge2; box-shadow: var(--shadow-lg); transform: translateY(-2px); } /* glassmorphic surface — token-aware so it works in every theme (hero/marketing) */ .glass { @apply rounded-2xl border border-edge bg-panel/70 backdrop-blur-xl; box-shadow: var(--shadow-lg); } .glass-hover { @apply transition duration-300; } .glass-hover:hover { @apply border-edge2 bg-panel/90; transform: translateY(-2px); } /* ===================================================== typography ======== */ .gradient-text { @apply bg-clip-text text-transparent; background-image: linear-gradient(100deg, #5eead4 0%, #818cf8 45%, #c084fc 80%); } .overline { @apply text-overline font-semibold uppercase text-brand; } .section-title { @apply text-3xl font-bold tracking-tight sm:text-4xl; color: rgb(var(--c-text)); } /* faint grid + vignette backdrop for the marketing hero */ .grid-bg { background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(60% 50% at 50% 0%, #000 30%, transparent 100%); mask-image: radial-gradient(60% 50% at 50% 0%, #000 30%, transparent 100%); } /* ambient blurred color orbs */ .orb { @apply pointer-events-none absolute rounded-full blur-[90px]; } /* ===================================================== chips / pills ===== */ .chip { @apply inline-flex items-center gap-2 rounded-full border border-edge bg-panel2 px-3 py-1 text-xs font-medium; color: rgb(var(--c-text-2)); } .tag { @apply inline-flex items-center gap-1 rounded-full border border-edge bg-panel2/60 px-2 py-0.5 text-xs; color: rgb(var(--c-text-2)); } /* status pill: dot + label, semantic color */ .pill { @apply inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-xs font-semibold; } .pill-ok { color: rgb(var(--ok-fg)); border-color: rgb(var(--c-ok) / 0.4); background: rgb(var(--c-ok) / 0.1); } .pill-warn { color: rgb(var(--warn-fg)); border-color: rgb(var(--c-warn) / 0.4); background: rgb(var(--c-warn) / 0.1); } .pill-bad { color: rgb(var(--bad-fg)); border-color: rgb(var(--c-bad) / 0.4); background: rgb(var(--c-bad) / 0.1); } .pill-neutral { color: rgb(var(--c-text-3)); border-color: rgb(var(--c-edge)); background: rgb(var(--c-panel-2)); } /* ===================================================== buttons =========== */ .btn { @apply inline-flex items-center justify-center gap-2 rounded-xl px-4 py-2 font-medium transition disabled:cursor-not-allowed disabled:opacity-40; } /* primary gradient CTA */ .btn-cta { @apply btn px-5 py-2.5 font-semibold; color: #06231e; background-image: linear-gradient(100deg, #5eead4, #818cf8); box-shadow: 0 10px 30px -10px rgba(129, 140, 248, 0.6); } .btn-cta:hover { filter: brightness(1.07); transform: translateY(-1px); } .btn-outline { @apply btn px-5 py-2.5 font-semibold; color: rgb(var(--c-text)); border: 1px solid rgb(var(--c-edge-strong)); } .btn-outline:hover { background: rgb(var(--c-panel-2)); border-color: rgb(var(--c-text-3)); } .btn-brand { @apply btn bg-brand font-semibold hover:brightness-110; color: #06231e; /* fixed dark ink — readable on teal in every theme */ } .btn-ghost { @apply btn border border-edge; color: rgb(var(--c-text)); } .btn-ghost:hover { background: rgb(var(--c-panel-2)); border-color: rgb(var(--c-edge-strong)); } /* ===================================================== tabs ============== */ .tab { @apply inline-flex items-center gap-1.5 rounded-lg border border-transparent px-3 py-1.5 text-sm font-medium transition; color: rgb(var(--c-text-3)); } .tab:hover { color: rgb(var(--c-text)); background: rgb(var(--c-panel-2)); } .tab-active { color: rgb(var(--c-text)); background: rgb(var(--c-panel-2)); border-color: rgb(var(--c-edge)); box-shadow: var(--shadow-sm); } /* ===================================================== stats ============= */ .stat { @apply rounded-xl border border-edge bg-panel2 px-3 py-2; } .stat-label { @apply text-[10px] font-medium uppercase tracking-wider; color: rgb(var(--c-text-3)); } .stat-value { @apply text-sm font-semibold; color: rgb(var(--c-text)); } /* ===================================================== evidence cards ==== */ .evidence-card { @apply rounded-xl border bg-panel2 p-3 transition; border-color: rgb(var(--c-edge)); } .evidence-strong { border-color: rgb(var(--c-ok) / 0.45); background: rgb(var(--c-ok) / 0.06); } .evidence-weak { border-color: rgb(var(--c-warn) / 0.4); background: rgb(var(--c-warn) / 0.06); } .evidence-none { border-color: rgb(var(--c-bad) / 0.4); background: rgb(var(--c-bad) / 0.06); } /* ===================================================== misc ============== */ .reveal { animation: fade-up 0.7s ease-out both; } .scroll-thin::-webkit-scrollbar { width: 8px; height: 8px; } .scroll-thin::-webkit-scrollbar-thumb { @apply rounded-full; background: rgb(var(--c-edge-strong)); } .scroll-thin { scrollbar-width: thin; scrollbar-color: rgb(var(--c-edge-strong)) transparent; } /* ---- streaming "typing" indicator ---- */ .typing-dot { @apply inline-block h-2 w-2 rounded-full bg-brand/70; animation: typing-bounce 1.1s infinite ease-in-out; } @keyframes typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } } /* ---- new-message fade-in ---- */ .msg-in { animation: msg-in 0.22s ease-out both; } @keyframes msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ===================================================== answer prose ======= */ /* Wrapper for assistant answer text — slightly larger, full-color, generous line-height so citations [n] read cleanly inline. */ .prose-answer { color: rgb(var(--c-text)); font-size: 0.9375rem; /* 15px */ line-height: 1.7; } .prose-answer > :first-child { margin-top: 0; } .prose-answer > :last-child { margin-bottom: 0; } .prose-answer p { margin: 0.45em 0; } /* Inline citation markers [n] rendered via Markdown get a teal tint */ .prose-answer sup, .prose-answer [data-citation] { color: rgb(var(--c-ok)); font-size: 0.78em; font-weight: 600; letter-spacing: -0.01em; } /* ===================================================== markdown ========== */ .prose-auralynq { @apply text-[0.95rem] leading-relaxed; color: rgb(var(--c-text-2)); } .prose-auralynq > :first-child { margin-top: 0; } .prose-auralynq > :last-child { margin-bottom: 0; } .prose-auralynq p { @apply my-2; } .prose-auralynq h1, .prose-auralynq h2, .prose-auralynq h3 { @apply mb-2 mt-4 font-semibold; color: rgb(var(--c-text)); } .prose-auralynq h1 { @apply text-lg; } .prose-auralynq h2 { @apply text-base; } .prose-auralynq ul { @apply my-2 list-disc space-y-1 pl-5; } .prose-auralynq ol { @apply my-2 list-decimal space-y-1 pl-5; } .prose-auralynq a { @apply text-brand underline decoration-brand/40 underline-offset-2 hover:decoration-brand; } .prose-auralynq blockquote { @apply my-2 border-l-2 border-edge pl-3; color: rgb(var(--c-text-3)); } .prose-auralynq code:not(pre code) { @apply rounded bg-ink/80 px-1.5 py-0.5 font-mono text-[0.85em] text-brand; } .prose-auralynq pre { @apply my-3 overflow-x-auto rounded-xl border border-edge p-3 text-[0.85rem]; background: #0d1117; } .prose-auralynq table { @apply my-3 w-full border-collapse text-sm; } .prose-auralynq th, .prose-auralynq td { @apply border border-edge px-2 py-1 text-left; } .prose-auralynq th { @apply bg-panel2; } /* ===================================================== responsive utilities = Lightweight Bootstrap-style layout helpers. ========================================================================= */ /* Full-width containers */ .container-fluid { width: 100%; padding-left: 1rem; padding-right: 1rem; } @media (min-width: 768px) { .container-fluid { padding-left: 1.5rem; padding-right: 1.5rem; } } @media (min-width: 1200px) { .container-fluid { padding-left: 2rem; padding-right: 2rem; } } /* Page-width container (max-width with auto centering) */ .container-page { width: 100%; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; max-width: 1440px; } @media (min-width: 768px) { .container-page { padding-left: 1.5rem; padding-right: 1.5rem; } } /* Responsive surface card */ .surface-card { @apply rounded-2xl border border-edge bg-panel; padding: clamp(1rem, 2vw, 1.5rem); box-shadow: var(--shadow-md); } /* Status pills */ .status-pill { @apply inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-xs font-semibold; } /* Show/hide at breakpoints */ @media (max-width: 767px) { .hide-mobile { display: none !important; } } @media (min-width: 768px) { .hide-desktop { display: none !important; } } /* Stack children vertically on mobile */ @media (max-width: 767px) { .stack-mobile { flex-direction: column !important; align-items: stretch !important; } } /* Responsive 2-column grid */ .grid-2 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 768px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } } /* Responsive 3-column grid */ .grid-3 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 640px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } } /* Responsive app shell — main content uses full viewport */ .responsive-shell { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; } /* Landing section spacing */ .section-pad { padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(3rem, 6vw, 5rem); } /* Inspector panel — always rendered, width adapts to viewport */ .inspector-panel { width: clamp(300px, 28vw, 520px); min-width: 280px; display: flex; flex-direction: column; flex-shrink: 0; }