/* Kiri Washi Background - Recreated from Reference */
:root{
  /* Adjusted to match reference: paler, cooler blue/off-white */
  --kiri-bg: #F4F6F8;
  --kiri-bg-cool: #F2F4F7;
  
  /* Design System Tokens */
  --text-primary: #1F2328;
  --text-secondary: #5F6B75;
  --accent-blue: #3A6EA5;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --radius-sm: 8px;
  --state-hover: rgba(0, 0, 0, 0.04);
  --transition-base: 250ms ease-in-out;
}

/* Apply to the whole app */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  /* Use the reference background image directly */
  background-image: url('/apps/watch/Pre-Build Assets/BackgroundRef2.png');
  background-color: #F4F6F8; /* Fallback color matching the image */
  background-attachment: fixed;
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Back to Portal Button */
.back-to-portal {
  position: fixed;
  top: var(--space-5);
  left: var(--space-5);
  padding: var(--space-3) var(--space-4);
  color: var(--accent-blue);
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  border-radius: var(--radius-sm);
  background-color: transparent;
  transition: background-color var(--transition-base);
  z-index: 200;
}

.back-to-portal:hover {
  background-color: var(--state-hover);
}

.back-to-portal:focus {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}