@property --sky-base { syntax: '<color>'; inherits: true; initial-value: #0b1026; }
@property --sky-glow { syntax: '<color>'; inherits: true; initial-value: #3b3f9e; }

:root {
  --font-display: 'Unbounded', ui-rounded, system-ui, sans-serif;
  --font-ui: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --k-work: #1fa872;
  --k-break: #e59a24;
  --k-official: #2f7ff0;
  --k-private: #a65ee8;
  --k-away: #7c8594;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --spring: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1.004 83.8%, 1);
  --spring-soft: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001);
}

.k-work { --k: var(--k-work); }
.k-break { --k: var(--k-break); }
.k-official { --k: var(--k-official); }
.k-private { --k: var(--k-private); }
.k-away { --k: var(--k-away); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-ui); line-height: 1.45; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus, #7db4ff); outline-offset: 3px; }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ico { flex: none; display: block; }

/* View transitions shared by both apps */
::view-transition-group(*) { animation-duration: .5s; animation-timing-function: var(--ease-out); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; }

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