/* weekendbuild.ing shared theme.  One file, loaded by every app at /_wb/wb.css.
   Edit the tokens in :root to restyle the whole suite.  Section 3 maps each
   app's own token names onto these, so the apps follow without being rewritten. */

/* 1. Tokens ------------------------------------------------------------- */
:root {
  color-scheme: light dark;
  --wb-bg:        #fafaf8;
  --wb-surface:   #ffffff;
  --wb-surface-2: #f1f1ed;
  --wb-line:      #e4e4de;
  --wb-line-strong: #8a8a84;
  --wb-ink:       #151513;
  --wb-ink-2:     #55554f;
  --wb-accent:    #0f766e;
  --wb-accent-2:  #0b5d57;
  --wb-solid:     #0f766e;   /* filled buttons with white text, same in light and dark */
  --wb-solid-2:   #0b5d57;
  --wb-on-accent: #ffffff;
  --wb-danger:    #b42318;
  --wb-ok:        #1b6e3c;
  --wb-focus:     #1d4ed8;
  --wb-glow:      rgba(15,118,110,.14);

  --wb-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wb-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --wb-r-sm: 8px; --wb-r-md: 14px; --wb-r-lg: 22px;
  --wb-shadow: 0 1px 2px rgb(21 21 19 / .06), 0 10px 30px rgb(21 21 19 / .06);

  /* motion */
  --wb-ease:     cubic-bezier(.22, 1, .36, 1);     /* soft decelerate */
  --wb-ease-in:  cubic-bezier(.4, 0, 1, 1);
  --wb-spring:   cubic-bezier(.34, 1.56, .64, 1);  /* slight overshoot */
  --wb-t-fast: 140ms; --wb-t: 280ms; --wb-t-slow: 560ms;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-wb-theme="light"]) { --wb-dark: 1;
    --wb-bg:#101110; --wb-surface:#171918; --wb-surface-2:#1f2120; --wb-line:#2a2d2b;
    --wb-line-strong:#7a7f7b; --wb-ink:#ecece8; --wb-ink-2:#a4a8a3;
    --wb-accent:#5eead4; --wb-accent-2:#99f6e4; --wb-on-accent:#042f2a;
    --wb-danger:#ff8a80; --wb-ok:#6fdc9a; --wb-focus:#8ab4ff; --wb-glow:rgba(94,234,212,.12);
    --wb-shadow: 0 1px 2px rgb(0 0 0 / .4), 0 10px 30px rgb(0 0 0 / .35); }
}
:root[data-wb-theme="dark"] { color-scheme: dark;
  --wb-bg:#101110; --wb-surface:#171918; --wb-surface-2:#1f2120; --wb-line:#2a2d2b;
  --wb-line-strong:#7a7f7b; --wb-ink:#ecece8; --wb-ink-2:#a4a8a3;
  --wb-accent:#5eead4; --wb-accent-2:#99f6e4; --wb-on-accent:#042f2a;
  --wb-danger:#ff8a80; --wb-ok:#6fdc9a; --wb-focus:#8ab4ff; --wb-glow:rgba(94,234,212,.12);
  --wb-shadow: 0 1px 2px rgb(0 0 0 / .4), 0 10px 30px rgb(0 0 0 / .35); }
:root[data-wb-theme="light"] { color-scheme: light; }

/* 2. Fluid motion --------------------------------------------------------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: wb-fade-out var(--wb-t) var(--wb-ease-in) both; }
::view-transition-new(root) { animation: wb-fade-in var(--wb-t-slow) var(--wb-ease) both; }
@keyframes wb-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes wb-fade-out { to { opacity: 0; } }
@keyframes wb-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes wb-drift { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(3%,-4%,0) scale(1.08); } }

/* No page-wide opacity fade: it delays first paint. Page-to-page fades use view transitions above. */
[data-wb-reveal] { opacity: 0; animation: wb-rise var(--wb-t-slow) var(--wb-ease) forwards;
  animation-delay: calc(var(--i, 0) * 60ms); }
.wb-lift { transition: transform var(--wb-t) var(--wb-ease), box-shadow var(--wb-t) var(--wb-ease), border-color var(--wb-t) var(--wb-ease); }
.wb-lift:hover { transform: translateY(-3px); box-shadow: var(--wb-shadow); border-color: var(--wb-accent); }
:where(a, button, input, select, textarea, summary) {
  transition: background-color var(--wb-t-fast) var(--wb-ease), border-color var(--wb-t-fast) var(--wb-ease),
              color var(--wb-t-fast) var(--wb-ease), box-shadow var(--wb-t) var(--wb-ease), transform var(--wb-t-fast) var(--wb-ease);
}
:where(button, .btn):active { transform: scale(.97); }
:focus-visible { outline: 2px solid var(--wb-focus); outline-offset: 2px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important; }
  [data-wb-reveal] { opacity: 1; }
}

/* 3. Bridges: map each app's own tokens onto the suite tokens ------------- */
/* split-card */
:root {
  --c-bg: var(--wb-bg); --c-surface: var(--wb-surface); --c-surface-2: var(--wb-surface-2);
  --c-ink: var(--wb-ink); --c-ink-muted: var(--wb-ink-2); --c-border: var(--wb-line-strong);
  --c-brand: var(--wb-accent); --c-brand-ink: var(--wb-on-accent);
  --c-accent: var(--wb-accent); --c-accent-ink: var(--wb-on-accent);
  --c-danger: var(--wb-danger); --c-focus: var(--wb-focus);
  --r-sm: var(--wb-r-sm); --r-md: var(--wb-r-md); --r-lg: var(--wb-r-lg); --shadow: var(--wb-shadow);
}
/* pdf-toolbox */
:root {
  --ink: var(--wb-ink); --ink-2: var(--wb-ink-2); --line: var(--wb-line-strong); --hairline: var(--wb-line);
  --brand: var(--wb-accent); --brand-strong: var(--wb-accent-2); --on-brand: var(--wb-on-accent);
  --success: var(--wb-ok); --focus: var(--wb-focus); --font: var(--wb-font);
}
/* key collider */
:root {
  --green: var(--wb-solid); --green-dark: var(--wb-solid-2); --green-soft: var(--wb-solid); --green-soft-dark: var(--wb-solid-2);
  --blue: #2563eb; --blue-dark: #1d4ed8; --yellow: #d97706; --red: var(--wb-danger);
  --gray-100: var(--wb-bg); --gray-200: var(--wb-line); --gray-500: var(--wb-ink-2);
  --input-bg: var(--wb-surface); --funded-row: color-mix(in srgb, var(--wb-danger) 14%, var(--wb-bg)); --overlay: rgba(0,0,0,.55);
}
/* gridwork + tools hub share these names */
:root {
  --bg: var(--wb-bg); --surface: var(--wb-surface); --surface-2: var(--wb-surface-2); --surface2: var(--wb-surface-2);
  --text: var(--wb-ink); --text-muted: var(--wb-ink-2); --muted: var(--wb-ink-2);
  --border: var(--wb-line); --border-strong: var(--wb-line-strong);
  --accent: var(--wb-accent); --accent-hover: var(--wb-accent-2); --accent-ink: var(--wb-on-accent); --on-accent: var(--wb-on-accent);
  --error: var(--wb-danger); --danger: var(--wb-danger); --ok: var(--wb-ok);
  --header-bg: var(--wb-surface-2); --header-hl: var(--wb-glow); --sel-tint: var(--wb-glow);
  --card-bg: var(--wb-surface); --card-border: var(--wb-line); --ctl-bg: var(--wb-surface-2); --ctl-border: var(--wb-line-strong);
  --font-sans: var(--wb-font); --bg-image: none;
}
/* tools-hub landing: it sets its own aurora look on body[data-tool=hub]; flatten it */
body[data-tool="hub"] { --bg: var(--wb-bg); --text: var(--wb-ink); --muted: var(--wb-ink-2);
  --border: var(--wb-line); --accent: var(--wb-accent); --accent-ink: var(--wb-on-accent); }
body { font-family: var(--wb-font); }

/* 4. Suite chrome (injected by wb.js) -------------------------------------- */
.wb-dock { position: fixed; left: 14px; bottom: 14px; z-index: 2147483000; font: 500 13px/1 var(--wb-font); color: var(--wb-ink); }
.wb-dock button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 8px;
  padding: 9px 13px; border-radius: 999px; background: var(--wb-surface); border: 1px solid var(--wb-line);
  box-shadow: var(--wb-shadow); opacity: .78; color: var(--wb-ink); }
.wb-dock button:hover, .wb-dock[data-open] button { opacity: 1; border-color: var(--wb-accent); }
.wb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--wb-accent); box-shadow: 0 0 0 0 var(--wb-glow); animation: wb-pulse 2.8s var(--wb-ease) infinite; }
@keyframes wb-pulse { 0% { box-shadow: 0 0 0 0 var(--wb-glow); } 70%,100% { box-shadow: 0 0 0 9px transparent; } }
.wb-menu { position: absolute; left: 0; bottom: calc(100% + 10px); width: 240px; max-height: 70vh; overflow: auto; padding: 6px;
  background: var(--wb-surface); border: 1px solid var(--wb-line); border-radius: var(--wb-r-md); box-shadow: var(--wb-shadow);
  transform-origin: bottom left; opacity: 0; transform: translateY(8px) scale(.96); pointer-events: none; visibility: hidden;
  transition: opacity var(--wb-t) var(--wb-ease), transform var(--wb-t) var(--wb-spring), visibility 0s linear var(--wb-t); }
.wb-dock[data-open] .wb-menu { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.wb-menu a { display: block; padding: 9px 10px; border-radius: 9px; color: var(--wb-ink); text-decoration: none; }
.wb-menu a small { display: block; margin-top: 3px; color: var(--wb-ink-2); font-size: 12px; font-weight: 400; }
.wb-menu a:hover, .wb-menu a[aria-current] { background: var(--wb-surface-2); }
.wb-menu hr { border: 0; border-top: 1px solid var(--wb-line); margin: 6px 0; }
.wb-menu .wb-theme { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 9px 10px; border-radius: 9px; color: var(--wb-ink-2); cursor: pointer; }
.wb-menu .wb-theme:hover, .wb-menu .wb-theme:focus-visible { background: var(--wb-surface-2); }