/* Soren site: tokens, type and the owl. The values are the app's own (sage/css/base.css), so the site and the app are one product. */

/* Self-hosted, so the site calls no font service. Sora for headlines, Source Sans 3 for body. */
@font-face { font-family:"Sora"; font-style:normal; font-weight:600 800; font-display:swap;
  src:url(/fonts/sora-latin.woff2) format("woff2"); }
@font-face { font-family:"Source Sans 3"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(/fonts/source-sans-3-latin.woff2) format("woff2"); }
@font-face { font-family:"Source Sans 3"; font-style:italic; font-weight:400 700; font-display:swap;
  src:url(/fonts/source-sans-3-italic-latin.woff2) format("woff2"); }

:root {
  color-scheme:light dark;
  --bg:#F5F5F5; --panel:#E6EDE3; --panel-2:#D9E3D6; --sheet:#F2ECDD; --line:#D5DCD3; --edge:#718076;
  --ink:#18221C; --ink-2:#526058;
  --leaf:#2B7A4C; --on-leaf:#FFFFFF; --leaf-text:#1F6039;
  --field:#1D5839; --tile-play:#123C26;
  --marigold:#F0B43F; --on-marigold:#18221C;
  --miss:#A93B28;
  /* The owl: walnut on light surfaces, tawny on dark ones. The face and eyes never change. */
  --owl:#6B4A2F; --owl-face:#F3E6CC; --owl-pupil:#2B1D12;
  --walnut:#6B4A2F; --tawny:#C49A6C;
  --font-head:"Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:"Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --r-card:16px; --r-ctl:12px; --r-pill:999px;
  --ease-spring:cubic-bezier(.2,.9,.3,1.15);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#171717; --panel:#252525; --panel-2:#303030; --sheet:#262420; --line:#3A3A3A; --edge:#7C837E;
    --ink:#EEF0EC; --ink-2:#A9AFAA;
    --leaf:#62C58B; --on-leaf:#0E1F15; --leaf-text:#8ADBA9;
    --field:#143F29; --tile-play:#0E301E;
    --marigold:#F2BE55; --miss:#F1907D;
    --owl:#C49A6C;
  }
}
:root[data-theme="dark"] {
  --bg:#171717; --panel:#252525; --panel-2:#303030; --sheet:#262420; --line:#3A3A3A; --edge:#7C837E;
  --ink:#EEF0EC; --ink-2:#A9AFAA;
  --leaf:#62C58B; --on-leaf:#0E1F15; --leaf-text:#8ADBA9;
  --field:#143F29; --tile-play:#0E301E;
  --marigold:#F2BE55; --miss:#F1907D;
  --owl:#C49A6C;
}

*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font:400 18px/1.5 var(--font-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
img, svg { display:block; max-width:100%; }
a { color:inherit; }
h1, h2, h3, p, figure { margin:0; }
:focus-visible { outline:3px solid var(--leaf); outline-offset:3px; border-radius:6px; }

/* The owl mark. One drawing; only --owl changes with the surface. */
.owl { flex:none; overflow:visible; }
/* No ancestor in these selectors: the mark is drawn once as a symbol and reused, and a reused drawing has no .owl above it. */
.o-body { fill:var(--owl); }
.o-face { fill:var(--owl-face); }
.o-pupil { fill:var(--owl-pupil); }

/* The lockup: mark and wordmark, as in the app's header. */
.brand { display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:var(--ink);
  font:800 22px/1 var(--font-head); letter-spacing:-.035em; }
.brand .owl { width:28px; height:28px; }

/* Controls. Buttons are solid fill, inputs are outlined. */
.btn { appearance:none; border:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; padding:0 22px; border-radius:var(--r-ctl); background:var(--leaf); color:var(--on-leaf);
  font:700 17px/1 var(--font-head); letter-spacing:-.01em; text-decoration:none; white-space:nowrap;
  transition:transform .18s var(--ease-spring), filter .15s; }
.btn:hover { filter:brightness(1.07); }
.btn:active { transform:scale(.97); }
.btn.sm { min-height:40px; padding:0 16px; font-size:15px; }
.field { appearance:none; width:100%; min-height:48px; padding:0 16px; border-radius:var(--r-ctl);
  border:1.5px solid var(--edge); background:var(--bg); color:var(--ink); font:400 18px/1 var(--font-body); }
.field::placeholder { color:var(--ink-2); opacity:1; }
.field:focus-visible { outline:3px solid var(--leaf); outline-offset:1px; border-color:var(--leaf); }

.vh { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}