/* Kiln — design system for Studio. Tokens taken verbatim from Tanner's Kiln spec. Do not invent values: if something needs a colour or a radius, it comes from here. */ @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* neutrals — greige paper, white cards floating on it, ink never true black */ --surface: #FFFFFF; --canvas: #EFEBE4; --sunken: #E7E2D8; --border: #DED8CB; --ink-mute: #8C867A; --ink: #17150F; /* accent + status */ --citron: #F5D231; /* highlight */ --sage: #3E7F5F; /* success */ --ochre: #C79A1E; /* warning */ --rust: #D9503A; /* danger */ --slate: #3F4EA8; /* info */ --tint-citron: #FAEDBE; --tint-sage: #DEEBE2; --tint-rust: #FAE3DC; /* type */ --font: 'Outfit', ui-sans-serif, system-ui, -apple-system, sans-serif; --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* spacing — 4px base */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; /* radius */ --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 12px; --r-xl: 18px; --r-2xl: 24px; --r-pill: 999px; --shadow-sm: 0 1px 2px rgba(23,21,15,.06); --shadow-md: 0 2px 8px rgba(23,21,15,.07); --shadow-lg: 0 12px 32px rgba(23,21,15,.13); } /* Light is the product. Kiln's dark surfaces exist in the spec, but the app does NOT follow the OS — Tanner saw dark because his Mac is dark, and that isn't what this is meant to look like. Dark is opt-in only, via . */ :root[data-theme='dark'] { --canvas:#17150F; --surface:#201E17; --sunken:#2A2820; --border:#3A362C; --ink:#EFEBE4; --ink-mute:#A8A296; --sage:#8FC9A6; } * { box-sizing: border-box; } body { margin: 0; background: var(--canvas); color: var(--ink); font: 400 16px/1.55 var(--font); -webkit-font-smoothing: antialiased; } h1, h2, h3 { letter-spacing: -0.025em; font-weight: 600; margin: 0; } h1 { font-size: 38px; letter-spacing: -0.03em; line-height: 1.08; } h2 { font-size: 24px; } /* the recurring section label */ .eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 var(--s4); } .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; } .muted { color: var(--ink-mute); } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); } button, .btn { font: 500 15px/1 var(--font); padding: 11px 16px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); border-radius: var(--r-md); cursor: pointer; transition: background .15s, border-color .15s, transform .06s; } button:hover, .btn:hover { border-color: var(--ink-mute); } button:active { transform: translateY(1px); } button.primary { background: var(--ink); color: var(--surface); border-color: var(--ink); } button.primary:hover { opacity: .9; } button[disabled] { opacity: .5; cursor: default; transform: none; } input[type=text], input[type=email], input[type=tel], input[type=date], input[type=password], select, textarea { width: 100%; padding: 11px 13px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--ink); font: 400 15px/1.4 var(--font); } input:focus, select:focus, textarea:focus { outline: 2px solid var(--citron); outline-offset: 1px; border-color: var(--ink-mute); } label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-mute); margin: var(--s4) 0 var(--s1); } .pill { display: inline-block; padding: 3px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 500; letter-spacing: .02em; background: var(--sunken); color: var(--ink-mute); } .pill.ok { background: var(--tint-sage); color: var(--sage); } .pill.warn { background: var(--tint-citron); color: var(--ochre); } .pill.bad { background: var(--tint-rust); color: var(--rust); } .err { color: var(--rust); } .ok { color: var(--sage); }