/* GuildNet design tokens (direction A3). Light by default; dark when the system asks for it, unless someone picked a side with the switch, which theme.js records as data-theme on . Components use only these. */ @font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/space-grotesk-400.woff2") format("woff2"); } @font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/space-grotesk-500.woff2") format("woff2"); } @font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/space-grotesk-700.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/jetbrains-mono-400.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/jetbrains-mono-600.woff2") format("woff2"); } :root { --font: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace; --radius: 8px; /* buttons, inputs, badges' containers */ --radius-card: 12px; /* cards, panels, banners */ --bg: #f6f6f9; --surface: #ffffff; --rail: #eceef4; --selected: #dfe2ec; --line: #dcdfe8; --text: #171a22; --muted: #4b5163; --faint: #5f6577; --accent: #4c55d8; --accent-hover: #3940b8; --on-accent: #ffffff; --tonal: #e6e8ff; --on-tonal: #262c8f; --ai: #1f7a4d; --on-ai: #ffffff; --danger: #d6264a; --on-danger: #ffffff; --danger-soft: #fde8ec; --on-danger-soft: #8f1230; --warn-soft: #fff3dc; --on-warn-soft: #6b4a00; --shadow: 0 18px 44px rgba(23, 26, 34, 0.14); /* The transcript is a terminal in both themes. */ --term: #0f1116; --term-line: #262a35; --term-text: #aeb3c2; --term-bright: #e6e8ee; --term-accent: #8b91ff; --term-faint: #8a90a2; --term-edge: #0f1116; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #12141a; --surface: #1b1e26; --rail: #161920; --selected: #262a35; --line: #2c303b; --text: #e6e8ee; --muted: #aeb3c2; --faint: #8a90a2; --accent: #8b91ff; --accent-hover: #a5abff; --on-accent: #12141a; --tonal: #262a4a; --on-tonal: #d4d6ff; --ai: #2f8f5b; --danger-soft: #3a1c24; --on-danger-soft: #ffb3c1; --warn-soft: #33291a; --on-warn-soft: #f5d28f; --shadow: none; --term-edge: #2c303b; color-scheme: dark; } } :root[data-theme="dark"] { --bg: #12141a; --surface: #1b1e26; --rail: #161920; --selected: #262a35; --line: #2c303b; --text: #e6e8ee; --muted: #aeb3c2; --faint: #8a90a2; --accent: #8b91ff; --accent-hover: #a5abff; --on-accent: #12141a; --tonal: #262a4a; --on-tonal: #d4d6ff; --ai: #2f8f5b; --danger-soft: #3a1c24; --on-danger-soft: #ffb3c1; --warn-soft: #33291a; --on-warn-soft: #f5d28f; --shadow: none; --term-edge: #2c303b; color-scheme: dark; } /* Shared pieces. */ * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); } a { color: var(--accent); } a:hover { color: var(--accent-hover); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } svg { flex-shrink: 0; } .hash { font-family: var(--mono); color: var(--accent); } .badge { display: inline-block; font-size: 10px; font-weight: 700; line-height: 1.5; letter-spacing: .3px; text-transform: uppercase; padding: 0 5px; border-radius: 3px; vertical-align: 2px; background: var(--selected); color: var(--text); } .badge.ai { background: var(--ai); color: var(--on-ai); } .badge.lead { background: var(--accent); color: var(--on-accent); } .count { display: inline-block; min-width: 20px; text-align: center; background: var(--danger); color: var(--on-danger); border-radius: 9px; padding: 0 6px; font-size: 12px; font-weight: 700; line-height: 18px; } .button, button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border: 0; border-radius: var(--radius); background: var(--accent); color: var(--on-accent); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; } .button:hover, button:hover { background: var(--accent-hover); color: var(--on-accent); } button.outline, .button.outline { background: transparent; color: inherit; border: 1px solid currentColor; font-weight: 600; } button.outline:hover { background: transparent; color: inherit; opacity: .8; } button.danger { background: var(--danger); color: var(--on-danger); } button.danger:hover { background: var(--danger); filter: brightness(1.1); } button.link { height: auto; padding: 0; background: none; color: var(--muted); font-weight: 400; } button.link:hover { background: none; color: var(--text); text-decoration: underline; } .theme { width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); background: var(--surface); color: var(--text); } .theme:hover { background: var(--selected); color: var(--text); } .theme .sun { display: none; } :root[data-theme="dark"] .theme .sun { display: block; } :root[data-theme="dark"] .theme .moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme .sun { display: block; } :root:not([data-theme="light"]) .theme .moon { display: none; } } input, select, textarea { height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; font-size: 15px; } textarea { height: auto; padding: 10px 12px; font-family: var(--mono); font-size: 14px; line-height: 1.5; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; } label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--faint); } .error { background: var(--danger-soft); color: var(--on-danger-soft); border-radius: var(--radius); padding: 12px 16px; margin: 0; } .note { background: var(--warn-soft); color: var(--on-warn-soft); border-radius: var(--radius); padding: 10px 16px; margin: 0; } .muted { color: var(--faint); }