/* TIMxAI design system — one family, a clean-cut style per app type. Usage: Everything below is same-origin and CSP-safe (no external fonts/assets). */ :root { /* --- spine: shared by every TIMxAI app --- */ --bg:#0B1220; --panel:#111a2e; --panel-2:#0c1526; --line:#1e2b47; --ink:#e7eefc; --mut:#8aa0c6; --blue:#38C6F5; --green:#3BD17A; --amber:#F5B638; --red:#FF6B6B; --violet:#8a5cf6; --ok:var(--green); --warn:var(--amber); --danger:var(--red); --accent:var(--blue); --grad:linear-gradient(120deg,var(--blue),var(--green)); --font:-apple-system,'Segoe UI',Roboto,Inter,system-ui,sans-serif; --display:var(--font); --mono:ui-monospace,SFMono-Regular,'JetBrains Mono',monospace; --r:10px; --r-sm:6px; --sp:12px; /* base spacing unit; density scales it */ --pad:16px; --gap:12px; --ring:0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); --motion:160ms; --shadow:0 6px 24px -12px #000a; color-scheme:dark; } /* --- per-kit personality (accent, density, radius, motion, type accent) --- */ [data-kit="canvas"] { --accent:var(--violet); --r:14px; --pad:22px; --gap:16px; --display:Georgia,'Iowan Old Style',serif; --motion:220ms; } [data-kit="clockwork"] { --accent:var(--blue); --r:10px; --pad:16px; --gap:12px; --motion:140ms; } [data-kit="matrix"] { --accent:var(--amber); --r:6px; --pad:10px; --gap:8px; --motion:90ms; } [data-kit="seal"] { --accent:var(--green); --r:4px; --pad:18px; --gap:14px; --display:'Iowan Old Style',Georgia,serif; --motion:120ms; } [data-kit="prompt"] { --accent:var(--green); --r:999px;--pad:22px; --gap:18px; --motion:240ms; } * { box-sizing:border-box; } html { -webkit-text-size-adjust:100%; } body { margin:0; font:15px/1.5 var(--font); background:var(--bg); color:var(--ink); } .wrap { max-width:1080px; margin:0 auto; padding:20px 16px 80px; } h1,h2,h3 { font-family:var(--display); line-height:1.25; } /* interactive core — every control gets a real focus ring + hover/active/disabled/loading state */ a { color:var(--accent); } :focus-visible { outline:none; box-shadow:var(--ring); border-radius:var(--r-sm); } .btn, button { cursor:pointer; border:0; border-radius:var(--r); padding:9px 14px; font:inherit; font-weight:600; transition:transform var(--motion) ease, filter var(--motion) ease, box-shadow var(--motion) ease; } .btn:active, button:active { transform:translateY(1px); } .btn[disabled], button[disabled] { opacity:.5; cursor:not-allowed; transform:none; } .btn[aria-busy="true"], button[aria-busy="true"] { opacity:.7; cursor:progress; } .btn.primary, .primary { background:var(--grad); color:#04121f; } .btn.primary:hover, .primary:hover { filter:brightness(1.06); } .btn.ghost, .ghost { background:transparent; border:1px solid var(--line); color:var(--ink); } .btn.ghost:hover, .ghost:hover { border-color:var(--accent); } .card { background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:var(--pad); margin-bottom:var(--gap); box-shadow:var(--shadow); } label, .label { display:block; font-size:12px; color:var(--mut); margin:10px 0 4px; } input, select, textarea { padding:9px 11px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--panel-2); color:var(--ink); font:inherit; } input:focus, select:focus, textarea:focus { border-color:var(--accent); } [data-kit="matrix"] .num, [data-kit="matrix"] input[inputmode="numeric"] { font-family:var(--mono); } .row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; } .spacer { flex:1; } .chip { font-size:11px; padding:2px 8px; border-radius:999px; border:1px solid var(--line); color:var(--mut); } /* trust + status badges every app should surface (sovereign-by-default, beta labelling) */ .badge-sovereign { display:inline-flex; gap:6px; align-items:center; font-size:11px; color:var(--mut); } .badge-sovereign::before { content:"🔒"; } .badge-beta { font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#04121f; background:var(--amber); border-radius:999px; padding:2px 8px; } /* empty / loading / error states — designed, not blank */ .empty, .loading, .error { color:var(--mut); text-align:center; padding:32px 16px; } .error { color:var(--danger); } /* creative, on-brand, accessibility-safe: the orbit motif can breathe, but only if motion is allowed */ @keyframes orbit-pulse { 0%,100%{opacity:.7} 50%{opacity:1} } .mark-orbit { animation:orbit-pulse 3.6s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; } }