/* AI Sanity design tokens — warm paper ground. One annotation channel: amber marks everything annotated, whoever wrote it. --info is admin chrome only (run progress, chunk state) and never marks prose. Theme resolution: media query carries the OS preference; an explicit data-theme on (set by the toggle) wins in both directions. */ :root { color-scheme: light dark; --bg: #faf8f4; --ink: #221e19; --muted: #85796a; --card: #ffffff; --border: #eae3d5; --mark: #a16207; --mark-bg: rgba(161, 98, 7, 0.13); --info: #2563eb; --info-bg: rgba(37, 99, 235, 0.10); --accent: #a16207; --danger: #b91c1c; --ok: #15803d; } @media (prefers-color-scheme: dark) { :root { --bg: #1c1a17; --ink: #eae5db; --muted: #9c9184; --card: #262220; --border: #383430; --mark: #e6b54d; --mark-bg: rgba(230, 181, 77, 0.14); --info: #92baf8; --info-bg: rgba(146, 186, 248, 0.13); --accent: #e6b54d; --danger: #f87171; --ok: #4ade80; } } :root[data-theme="light"] { color-scheme: light; --bg: #faf8f4; --ink: #221e19; --muted: #85796a; --card: #ffffff; --border: #eae3d5; --mark: #a16207; --mark-bg: rgba(161, 98, 7, 0.13); --info: #2563eb; --info-bg: rgba(37, 99, 235, 0.10); --accent: #a16207; --danger: #b91c1c; --ok: #15803d; } :root[data-theme="dark"] { color-scheme: dark; --bg: #1c1a17; --ink: #eae5db; --muted: #9c9184; --card: #262220; --border: #383430; --mark: #e6b54d; --mark-bg: rgba(230, 181, 77, 0.14); --info: #92baf8; --info-bg: rgba(146, 186, 248, 0.13); --accent: #e6b54d; --danger: #f87171; --ok: #4ade80; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: Charter, Georgia, Cambria, "Times New Roman", serif; font-size: 17px; line-height: 1.7; } a { color: inherit; text-decoration-color: var(--muted); text-underline-offset: 2px; } a:hover { text-decoration-color: var(--accent); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ---- shell & site chrome (sans-serif utility layer) ---- */ .shell { max-width: 1160px; margin: 0 auto; padding: 0 1.5rem; } .site-header { font-family: ui-sans-serif, system-ui, sans-serif; border-bottom: 1px solid var(--border); } .site-header .shell { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; padding-top: 0.8rem; padding-bottom: 0.8rem; } .wordmark { font-family: Charter, Georgia, serif; font-size: 1.25rem; font-weight: 700; letter-spacing: 0.01em; padding: 0 3px; border-radius: 2px; background: var(--mark-bg); box-shadow: inset 0 -2px 0 var(--mark); text-decoration: none; } .site-nav { display: flex; gap: 1.1rem; font-size: 0.88rem; } .site-nav a { text-decoration: none; color: var(--muted); } .site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); } .site-header .spacer { flex: 1; } .site-footer { font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.8rem; color: var(--muted); border-top: 1px solid var(--border); margin-top: 4rem; } .site-footer .shell { padding-top: 1rem; padding-bottom: 2rem; } /* ---- buttons & forms ---- */ .btn { font: 600 0.9rem ui-sans-serif, system-ui, sans-serif; display: inline-block; color: var(--bg); background: var(--ink); border: 1px solid var(--ink); border-radius: 8px; padding: 0.5rem 1.1rem; cursor: pointer; text-decoration: none; } .btn:hover { opacity: 0.88; } .btn:disabled { opacity: 0.55; cursor: wait; } .btn.ghost { color: var(--ink); background: none; border-color: var(--border); font-weight: 500; } .btn.ghost:hover { border-color: var(--muted); opacity: 1; } .btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; } /* Destructive but secondary: reads as quiet until you reach for it. */ .btn.ghost.danger { background: none; color: var(--danger); border-color: var(--border); } .btn.ghost.danger:hover { border-color: var(--danger); } .btn.small { font-size: 0.78rem; padding: 0.3rem 0.7rem; } .btn:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } input[type="text"], input[type="url"], input[type="email"], input[type="date"], input[type="password"], textarea, select { font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.75rem; width: 100%; } textarea { line-height: 1.6; } input:focus, textarea:focus, select:focus { border-color: var(--accent); outline: none; } label { font: 600 0.82rem ui-sans-serif, system-ui, sans-serif; display: block; margin-bottom: 0.3rem; } .field { margin-bottom: 1.1rem; } .hint { font: 0.78rem ui-sans-serif, system-ui, sans-serif; color: var(--muted); margin-top: 0.25rem; } .empty { font: 0.88rem ui-sans-serif, system-ui, sans-serif; color: var(--muted); border: 1px dashed var(--border); border-radius: 10px; padding: 1.4rem 1.2rem; text-align: center; margin: 1rem 0; } /* ---- utility ---- */ .muted { color: var(--muted); } .sans { font-family: ui-sans-serif, system-ui, sans-serif; } .flash { font-family: ui-sans-serif, system-ui, sans-serif; font-size: 0.88rem; border: 1px solid var(--border); border-left: 3px solid var(--accent); background: var(--card); border-radius: 6px; padding: 0.6rem 0.9rem; margin: 1rem 0; } .flash.alert { border-left-color: var(--danger); } .eyebrow { font: 600 0.7rem ui-sans-serif, system-ui, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .badge { font: 600 0.68rem ui-sans-serif, system-ui, sans-serif; letter-spacing: 0.05em; text-transform: uppercase; border: 1px solid var(--border); border-radius: 999px; padding: 0.1rem 0.55rem; color: var(--muted); white-space: nowrap; } .badge.ok { color: var(--ok); border-color: var(--ok); } .badge.warn { color: var(--mark); border-color: var(--mark); } .badge.danger { color: var(--danger); border-color: var(--danger); }