/* Cryptic Hub — base: tokens, the two themes, glass and the colour field.
   Every colour is a token; a theme only redefines tokens, so no component
   knows which theme it is in.

   Ember is the hub's own look, warm and dark, and the default. Paper is the
   white option. Both are the palettes the hub has always had. */

:root, [data-theme="ember"] {
  --font: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "DM Serif Display", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --r-xs: 6px; --r-sm: 9px; --r: 10px; --r-lg: 13px; --r-xl: 16px; --r-full: 999px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --rail: 76px;

  --bg: #15120f;
  --surface: #1a1714;
  --surface-2: #211d18;
  --surface-3: #2a251f;
  --hover: rgba(255, 240, 220, .05);
  --press: rgba(255, 240, 220, .09);
  --border: rgba(255, 255, 255, .08);
  --border-strong: rgba(255, 255, 255, .14);
  --text: #f0e9df;
  --text-2: #b3a99c;
  --text-3: #837869;
  --accent: #e08a4a;
  --accent-2: #f0985a;
  --accent-soft: rgba(224, 138, 74, .14);
  --accent-text: #fff;
  --mine: var(--accent);
  --mine-text: #fff;
  --theirs: var(--surface);
  --theirs-text: var(--text);
  --danger: #e07a7a;
  --danger-soft: rgba(224, 122, 122, .14);
  --success: #5cba78;
  --success-soft: rgba(92, 186, 120, .14);
  --warning: #e0b04a;
  --info: #7ab8f5;
  --online: #5cba78;
  --overlay: rgba(8, 6, 4, .62);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .25);
  --shadow: 0 4px 16px rgba(0, 0, 0, .32), 0 2px 6px rgba(0, 0, 0, .22);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, .5), 0 4px 14px rgba(0, 0, 0, .3);
  --ring: rgba(224, 138, 74, .34);
  --focus: 0 0 0 3px var(--ring);
  --code-bg: #100e0b;
  --code-text: #eae3d8;

  --glass: rgba(32, 28, 23, .62);
  --glass-2: rgba(32, 28, 23, .40);
  --glass-brd: rgba(255, 255, 255, .10);
  --glass-blur: 18px;
  --sheen: linear-gradient(135deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, 0) 55%);
  --mesh-1: rgba(224, 138, 74, .22);
  --mesh-2: rgba(90, 130, 190, .18);
  --mesh-3: rgba(180, 100, 160, .16);
  color-scheme: dark;
}

/* Paper — the white option. */
[data-theme="paper"] {
  --bg: #fbfcfd;
  --surface: #ffffff;
  --surface-2: #f6f7f9;
  --surface-3: #eef0f4;
  --hover: rgba(16, 24, 40, .045);
  --press: rgba(16, 24, 40, .08);
  --border: rgba(16, 24, 40, .08);
  --border-strong: rgba(16, 24, 40, .14);
  --text: #111827;
  --text-2: #525c6b;
  --text-3: #8a93a2;
  --accent: #3f6ed6;
  --accent-2: #2f59b8;
  --accent-soft: rgba(63, 110, 214, .10);
  --danger: #c2384a;
  --danger-soft: rgba(194, 56, 74, .10);
  --success: #2f8a58;
  --success-soft: rgba(47, 138, 88, .10);
  --warning: #b7791f;
  --info: #3f6ed6;
  --online: #2f8a58;
  --overlay: rgba(16, 24, 40, .42);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, .06);
  --shadow: 0 4px 16px rgba(16, 24, 40, .08), 0 2px 6px rgba(16, 24, 40, .04);
  --shadow-lg: 0 12px 40px rgba(16, 24, 40, .14), 0 4px 14px rgba(16, 24, 40, .06);
  --ring: rgba(63, 110, 214, .26);
  --code-bg: #15181f;
  --code-text: #e6e9ef;

  --glass: rgba(255, 255, 255, .72);
  --glass-2: rgba(255, 255, 255, .48);
  --glass-brd: rgba(16, 24, 40, .08);
  --sheen: linear-gradient(135deg, rgba(255, 255, 255, .7) 0%, rgba(255, 255, 255, 0) 55%);
  --mesh-1: rgba(63, 110, 214, .14);
  --mesh-2: rgba(90, 170, 220, .12);
  --mesh-3: rgba(150, 130, 220, .12);
  color-scheme: light;
}

/* Translucency only reads as glass when there is something behind it worth
   blurring, so the app sits on a slow-moving colour field and the chrome
   floats on top of it. */
.glass { background: var(--glass); backdrop-filter: blur(var(--glass-blur)) saturate(150%); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%); }
.glass-soft { background: var(--glass-2); backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%); }
.sheen { position: relative; }
.sheen::before { content: ""; position: absolute; inset: 0; background: var(--sheen); pointer-events: none; opacity: .7; border-radius: inherit; }
.mesh { position: fixed; inset: -30%; pointer-events: none; z-index: 0; overflow: hidden; }
.mesh i { position: absolute; display: block; border-radius: 50%; filter: blur(70px); opacity: .9; will-change: transform; }
.mesh i:nth-child(1) { width: 52vw; height: 52vw; left: 4%; top: 2%; background: var(--mesh-1); animation: float1 34s var(--ease) infinite; }
.mesh i:nth-child(2) { width: 44vw; height: 44vw; right: 2%; top: 16%; background: var(--mesh-2); animation: float2 44s var(--ease) infinite; }
.mesh i:nth-child(3) { width: 38vw; height: 38vw; left: 34%; bottom: 2%; background: var(--mesh-3); animation: float3 52s var(--ease) infinite; }
@keyframes float1 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 33% { transform: translate3d(9vw, 7vh, 0) scale(1.14); } 66% { transform: translate3d(-5vw, 10vh, 0) scale(.94); } }
@keyframes float2 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 40% { transform: translate3d(-11vw, 9vh, 0) scale(1.1); } 75% { transform: translate3d(6vw, -6vh, 0) scale(.92); } }
@keyframes float3 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(7vw, -11vh, 0) scale(1.16); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes shimmerText { 0% { background-position: -140% 0; } 100% { background-position: 240% 0; } }

/* The wordmark gets a slow gradient sweep rather than a flat fill. */
.grad-text { background: linear-gradient(100deg, var(--text) 12%, var(--accent) 42%, var(--text) 72%); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmerText 9s linear infinite; }
.brand-mark { width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; background: linear-gradient(140deg, var(--text), var(--accent)); color: var(--bg); display: grid; place-items: center; font-family: var(--font-display); font-size: 16px; box-shadow: var(--shadow-sm); line-height: 1; }
.wordmark { font-family: var(--font-display); font-size: 19px; letter-spacing: -.01em; white-space: nowrap; font-weight: 400; }

* , *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
img, video { max-width: 100%; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); }
::selection { background: var(--accent-soft); }
:focus-visible { outline: none; box-shadow: var(--focus); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Scrollbars that don't shout */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---- Type ------------------------------------------------------------------- */
h1, h2, h3, h4 { margin: 0; letter-spacing: -.015em; }
.h1 { font-family: var(--font-display); font-size: 30px; font-weight: 400; letter-spacing: -.01em; line-height: 1.15; }
.h2 { font-family: var(--font-display); font-size: 22px; font-weight: 400; letter-spacing: 0; }
.h3 { font-size: 15px; font-weight: 600; }
.eyebrow { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.small { font-size: 12.5px; }
.tiny { font-size: 11.5px; }
.mono { font-family: var(--font-mono); }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row { display: flex; align-items: center; gap: 8px; }
.col { display: flex; flex-direction: column; gap: 8px; }
.grow { flex: 1; min-width: 0; }
.wrap { flex-wrap: wrap; }
.center { display: grid; place-items: center; }
.gap-4 { gap: 4px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; }
.divider { height: 1px; background: var(--border); margin: 8px 0; border: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .mesh i { animation: none; }
}

/* Phones zoom the page into any text box under 16px and stay zoomed; keep
   every field at 16px on touch screens so tapping one never shifts the page. */
@media (hover: none) and (pointer: coarse) {
  input, textarea, select { font-size: 16px !important; }
}