/* Shared look of every widget (embedded in Notion pages from widgets.magnetcreativestudio.com).
   Colors come from the link (core.js sets --fg, --bg, --tile, --accent on :root); without them the
   widget uses Notion's own text and block colors, light or dark with the viewer's system setting,
   on a transparent background so it sits on the page like any other block. */

@font-face {
  font-family: 'Figtree';
  src: url('/fonts/figtree.woff2') format('woff2');
  font-weight: 300 900;
  font-display: swap;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/fonts/bricolage-800.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}

:root {
  --ink-default: #37352f;
  --tile-default: #f1f1ef;
  --accent-default: #e16259;
  --font-sans: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Bricolage Grotesque', 'Figtree', ui-sans-serif, system-ui, sans-serif;
  --font-serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  --font-rounded: ui-rounded, 'SF Pro Rounded', 'Figtree', system-ui, sans-serif;
  /* The phone's own font: SF Pro on iPhone and Mac, Segoe UI on Windows, Roboto on Android. */
  --font-system: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not(.t-light) {
    --ink-default: #d4d4d4;
    --tile-default: #2f2f2f;
    --accent-default: #ff7369;
  }
}
:root.t-dark {
  --ink-default: #d4d4d4;
  --tile-default: #2f2f2f;
  --accent-default: #ff7369;
}

* {
  box-sizing: border-box;
}
html {
  height: 100%;
  background: transparent;
}
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  color: var(--fg, var(--ink-default));
  background: var(--bg, transparent);
  font-family: var(--font, var(--font-sans));
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
.has-bg body {
  border-radius: 12px;
}
.w {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 4vmin;
}
/* Shown only when the browser has JavaScript off: the widget needs it to tell the time. */
.nojs {
  margin: 0;
  font-size: 14px;
  text-align: center;
}